user_name

user_name 查看完整档案

北京编辑  |  填写毕业院校  |  填写所在公司/组织 github.com/aqiongbei 编辑
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

user_name 发布了文章 · 10月7日

2020年8月-9月前端找工作感受总结

记录一下自8月中旬离职之后准备以及找工作的经历,会提到个人感受到的招聘情况和一些前端面试题.会按照以下几个点来展开.
  • 背景信息(个人相关)
  • 整体找工作的感受
  • 整体节奏(时间安排)
  • 面试题整理(含算法题)
  • 感悟和总结

背景信息(个人相关)

普通二本,计算机专业,三年工作经验(一年爬虫,两年前端+全栈),前端岗位,技术栈主要是vue.js + node.js.简历上稍微好的点应该就是在猎豹的工作经历和爬虫的工作背景.整体看来就是很一般般的.

整体找工作感受

在经历整个过程之后对找工作前的一些点的思考,希望减少一些同学对今年就业形势的误判.

  • 整体就业形势的感受

因为受疫情影响,整体经济大形势是不好的,很多企业都在裁人,所以整体hc减少,工作不好找,这是在脉脉或者v2ex论坛里面很多人的反馈.但是我个人感受是今年招人的还是挺多的,就拿我的情况来说,我找工作一直用的boss直聘(boss招聘打钱),上面有300+条消息都看不过来(这个有点小诀窍,下面会提到),只有第一周我回了一些比较中意的hr简历,剩下的两周都没有再投简历.
结合约面试的情况来看,招聘主要集中在滴滴,美团,字节这三家.boss上发消息的10个里面有6个字节的.美团换着部门面面了三次,滴滴面了两次.面了三周的时间,基本上每天两场.最后陆陆续续拿到了6个offer.
后来我也分析了,整体hc减少是不假,但可能是10个小厂减少了20个hc,一个大厂涨了12个hc这样的情况,hc少了但是更集中了.
我的结论就是,有些事别老听别人说,要小马过河,自己去试试.
另外,我也有点困惑,今年找工作的这个情况到底是3年的工作经验带来的还是猎豹的工作经历带来的.

  • Github项目star数和个人博客对面试的影响

我在github上有一个500+ star的项目,还有平时有写博客的习惯,我从改简历开始就琢磨这些点该怎么表达更好,尽管我在每次自我介绍的时候都会提到在开发之余我会写写自己的项目和博客,但是目前github项目基本没有人问的,博客也只有百度五面和去哪儿二面的时候才有问到.
所以,这部分怎么说呢,属于锦上添花的,要搞好核心能力,不要把这些看太重,除非你这这两点非常非常优秀.

  • 关于视频面和现场面

视频面确实方便,面试成本低,写代码也更方便,但是呢,视频面节奏比较慢,基本上不会一面之后立马二面,我见过最快的视频面隔了一个小时进入下一面,其他的都隔着1-3天不等.不如现场面痛快,今年的现场面基本上都能当场轻松的拿到offer.

  • boss上遇到的一些问题

    • 我发现把boss的求职状态设置成[在职-暂不考虑]比设置成[离职-随时到岗]更有用,设置成[在职-暂不考虑]然后每天还正常的刷boss会收到更多的消息,个人感受,无实际依据.
    • boss上有一部分人,不是hr也是不是team leader,但是也会找你要简历,这部分八成是赚内推奖励的,我的简历就被莫名其妙的推过几次,对于这种情况我不置可否,但是如果你有确定的内推人的话,最好甄别一下这种情况,把内推奖励留给小伙伴.

整体节奏(时间安排)

第一周,主要用来回顾一下基础知识,看了下一些比较重要的知识点,没怎么看面试题,面试题基本上都是通过面试来查漏补缺的.同时开始约下周的面试.
第二周,开始面试,基本都是视频面,上午一场下午一场,好留出来时间整理遇到的问题.周六日基本不约面试,同时开始约下周的面试.这周的面试基本上全挂一面,惨不忍睹,当然也有拿offer的,作为保底.这不重要,重要的是查漏补缺,找出自己准备的和面试的差距.好有的放矢.
第三周,面试节奏放慢了一点,面试题都过了一遍了,所以这周基本上都能进二面了,也拿到了一些offer,这时候去推掉第二周拿到的offer.
第四周,这时候面试节奏更慢了,基本上是第三周面试进入比价靠后的面试和一些临时约的面试.这时候拿到的offer之后去推掉上周的offer.这周之后基本上面试结束,找工作告一段落,纠结纠结手里的offer,作出决定,然后等着入职就行了.

面试题整理

常规知识点

在第一周的时候整理基础知识的时候侧重回顾的一些知识点,这里列一下

  • js基础知识
  • 从输入url到获得页面经历的所有事情(越细越好)
  • 原型链
  • 继承
  • es6新特性
  • DOM事件和事件流
  • 盒子模型
  • 事件循环
  • BFC
  • Flex
  • Promise原理以及手写代码
  • vue响应式原理
  • vue虚拟dom & diff算法
  • 前端性能优化
  • 防抖和节流
  • HTTP缓存
  • 常见算法(排序洗牌等)

面试中遇到的高频题(跟上面会有重合)

  • 事件循环
  • 原型链
  • vue响应式原理
  • HTTP缓存
  • 防抖和节流
  • vue3解决什么问题
  • Vue 为什么不能检测数组和对象的变化,怎么处理(为什么通过索引操作数组不能触发响应式)
  • vue router原理
  • v-model实现原理
  • vue.nexttick
  • https的过程
  • 性能优化
  • promise(基本上要求可以手写Promise.all方法,这个问的最多)
  • async/await
  • 从输入url到看到页面经历的所有事情(越细越好,这道题知识点非常多)
  • 跨域形成原因以及解决方案
  • 深拷贝和浅拷贝(也会问到JSON.stringify JSON.parse这种方案的弊端)
  • 箭头函数和普通函数有什么区别
  • 最近在看什么新技术

低频但是需要注意的面试题

  • CSRF & XSS
  • chrome设置小于12px字体
  • node和浏览器事件循环有何不同
  • webpack tree shaking
  • map & set
  • 前端有哪些技术(腾讯面试题,面试官会顺着你说的技术一个一个展开问)
  • 实现一个call/bind(call,apply,bind区别)
  • get 和 post 的区别
  • BFC
  • yield
  • 如何给localStorage加上max-age功能
  • Object.defineProperties都有那些参数,以及参数解释
  • requestAnimation
  • 手写原型链和js各种继承模式
  • 让你重新做你做过的项目有什么可以改进的地方
  • 让一个元素消失的几种做法,有何不同,对子元素的影响
  • 如何遍历对象(接下来会问有何不同)
  • 搜索框输入需要注意的点(其实还是在问防抖)
  • 原生实现inserAfter
  • 事件委托应用场景,e.target和e.currentTarget区别
  • HTTP缓存,对应字段,cache-contron都有那些值
  • new过程都发生了什么

面试遇到的算法题

  • 排序算法(冒泡,快排)
  • 洗牌算法
  • v1.2.3 v0.3.0 这样的版本号比大小(找简单方法,不要随便写一个循环的版本)
  • 广度优先遍历
  • 用O(n)的复杂度合并两个有序数组
  • 数组生成树形结构
    var arr = [
        { id: 1, value: "节点1", p_id: 0 },
        { id: 2, value: "节点2", p_id: 1 },
        { id: 3, value: "节点3", p_id: 1 },
        { id: 4, value: "节点4", p_id: 2 },
        { id: 5, value: "节点5", p_id: 0 },
        { id: 6, value: "节点6", p_id: 5 },
        { id: 7, value: "节点7", p_id: 6 },
        { id: 8, value: "节点8", p_id: 6 },
    ];
    // 输出
    [{
        "id": 1,
        "value": "节点1",
        "p_id": 0,
        "children": [
            {
                "id": 2,
                "value": "节点2",
                "p_id": 1,
                "children": [
                    {
                        "id": 4,
                        "value": "节点4",
                        "p_id": 2,
                        "children": []
                    }
                ]
            },
            {
                "id": 3,
                "value": "节点3",
                "p_id": 1,
                "children": []
            }
        ]
    },
    {
        "id": 5,
        "value": "节点5",
        "p_id": 0,
        "children": [
            {
                "id": 6,
                "value": "节点6",
                "p_id": 5,
                "children": [
                    {
                        "id": 7,
                        "value": "节点7",
                        "p_id": 6,
                        "children": []
                    },
                    {
                        "id": 8,
                        "value": "节点8",
                        "p_id": 6,
                        "children": []
                    }
                ]
            }
        ]
    }]
  • 数组L型输出
// L型输出
var arr = [

    ['1', '2', '3'],

    ['4', '5', '6'],

    ['7', '8', '9'],

];
// 输出大致顺序 1 4 7 8 9 2 5 6 3
  • 数组求排列组合
// 数组排列组合
var arr = [
    ['A', 'B', 'C'],
    [1, 2, 3],
    ['X', 'Y', 'Z'],
];
// 输出类似 A1X A1Y A1Z ...
  • 实现一个函数 find(obj, str),满足
var obj = {a:{b:{c:1}}};
find(obj,'a.b.c') //1
find(obj,'a.d.c') //undefined
  • 乒乓球比赛判断输赢(这个表达起来费劲,但是是个贴合实际开发场景的例子.不常见,但是不难)

这些是能回忆出来的部分,算法题普遍没有那么难,递归比较多,另外能用简单的方式就用简单的方式,这样才能凸显能力.

感悟和总结

  • 到手的offer,最后选择去百度了

    • 百度(具体部门就不说了)
    • 美团(优选)
    • 去哪儿(机票)
    • 作业帮(成人教育)
    • 天眼查(企服)
    • 一个小公司
  • 一定要避免类似面试官问你项目中遇到什么问题没,你说没问题都解决了这样的回答,基本必挂(网易二面经验)
  • 上面的面试题同一个问题会有不同的表述,所以要认真审题,搞清楚问的知识点,避免面试官问在第三层,而你只答在第一层这样的事情,太拉跨(腾讯一面经验)
  • 找工作是个概率的事情,面试的次数多了就会中
  • 内推有时会可能会有意想不到的加持(面作业帮的体会)
  • 日常我们要留意构建自己的基础知识体系,这样在面试准备的时候不用恶补太多基础知识

最后希望在找工作的同学保持心态,都能顺利找到理想的工作.

查看原文

赞 124 收藏 81 评论 17

user_name 发布了文章 · 8月20日

深入理解DNS解析过程

要想深入理解DNS解析的过程,我们需要知道一些底层的东西和一些周边的知识,本篇文章会围绕这些来构建。

名词解释

前置知识

DNS

域名系统DNS(Domain Name System)是因特网使用的命名系统,用来把便于人们使用的机器名字转换为IP地址。DNS属于应用层协议,是基于UDP协议的。

hosts文件

hosts文件ARPANET时代的解决方案,那时候只有数百台计算机,一个hosts就能满足需求。

域名(Domain)

mail.ccav.com
---- ---- ----
三级域名 二级域名 顶级域名

域名的层级是按照上面这么划分的,每级域名长度不超过63个字符,不区分大小写,只能使用数字字母和-。一个完整的域名不超过255个字符。

域名服务器划分

了解域名服务器划分之后,就会对DNS解析的过程大概有些了解。域名服务器按照层级分为:

本地域名服务器

本地域名服务器相当于一个班主任,你有点啥事都找他。当一个主机发出DNS查询的时候,这个查询的请求就会发送到本地域名服务器。

根域名服务器

根域名服务器是最高层次的域名服务,是校长,只负责规划大方向。他知道所有顶级域名服务器的域名和IP地址。不管那个本地域名服务器若自己不能不能解析,那首先请求的就是根域名服务器。根域名服务器不会把待查询的域名直接转换成IP,而是告诉本地域名服务器下一步应该找哪一个顶级域名服务器进行查询。

顶级域名服务器

顶级域名服务器是负责各个方向的副校长,有负责安全的,有负责教学的。他负责管理该顶级域名下的所有二级域名,当收到DNS查询请求后就会给出响应的应答,可能是最终的结果,也可能是下一步应该找到的域名服务器的IP地址。

权限域名服务器

权限域名服务器就是负责一个区的域名服务器,是基层干活的,比如宿管,各科老师,他负责一个更小的区域。当一个权限服务还不能给出最后的回答时,就会告诉查询请求的DNS客户,下一步应该找哪个权限域名服务器。

域名查询的两种方式

这里只是通俗的讲两种查询的方式,关于如何更好的理解并记住这种两种方式,可以看这篇文章《怎么更好的理解DNS的迭代查询与递归查询》

递归查询

递归查询,就是你找我要一个域名的IP地址,但是我不知道,那我去帮你去向知道的人问这个IP地址。举个例子就是,你问你班主任怎么做番茄炒鸡蛋,你班主任不知道,但是你班主任去问了食堂厨师,然后告诉你。这就叫递归查询。
从host到本地域名服务器一般是用的递归查询。

迭代查询

迭代查询就是,你找我要一个域名的IP地址,我也不知道这个IP地址,但是我知道谁知道,我告诉你去找谁问。举个例子就是,你们班主任到了食堂随便拉了个人问怎么做番茄炒鸡蛋,那个人说,我只是个卖饭的,我不知道,但是我知道A君是在后厨的,你可以去问A君。然后你班主任就去问A君了。呐,这就叫迭代查询。
从本地域名服务器到根域名服务器一般是用的迭代查询。

行了,该知道的储备知识我们知道的差不多了,接下来就看看关键的流程吧。

DNS查询步骤

假设一台主机想知道y.abc.com这个域名的IP地址,那么整个的查询过程如下:

  1. 主机先向其本地域名服务器进行递归查询
  2. 本地域名服务器采用迭代的查询,它先向根域名服务器查询
  3. 根域名服务器告诉本地域名服务器,下一次应该查询的顶级域名服务器的IP地址。
  4. 本地域名服务器向顶级域名服务器发起查询。
  5. 顶级域名服务器告诉本地域名服务器,下一次应查询的权限域名服务器IP地址
  6. 本地域名服务器向权限域名服务器发起查询。
  7. 权限域名服务器告诉本地域名服务器所查询的IP地址。
  8. 本地域名服务器把查询结果告诉主机

给这个过程做个图示,就是这样的
image.png

整个的DNS查询过程就是这样的。结合前面的一些前置知识,你会感觉整个过程更简单。

查看原文

赞 0 收藏 0 评论 0

user_name 发布了文章 · 8月18日

如何理解fn1.call.call(fn2)的结果

问题复现

有这么一道题:

function fn1(){ 
    console.log(`fn1 ${this}`)
} 
function fn2(){ 
    console.log(`fn2 ${this}`)
} 
fn1.call(fn2);// fn1 function fn2(){console.log(`fn2 ${this}`)}
fn1.call.call(fn2);// fn2 [object Window]
fn1.call.call.call.call(fn2);// fn2 [object Window]

问题分析

关于call我们一般知道这些:

  • 用途
    主要作用是改变函数的this指向,可以用于实现继承
  • 传参:
function.call(thisArg, arg1, arg2, ...)
  • 执行步骤
  1. 改边函数的this指向
  2. 传参并执行函数

所以对于

fn1.call(fn2); // fn1 function fn2(){console.log(`fn2 ${this}`)}

这样的输出我并不意外,因为这段代码的意思我理解为改变将fn1this指向fn2并执行。本质上执行的还是执行fn1
而对于

fn1.call.call(fn2);// fn2 [object Window]

这个样的输出就比较困惑了,那么这种该怎理解呢?

问题解决

要理解这个输出我们需要知道这两点:

key_1: call方法是哪里来的?

首先callFunction基类原型上的方法,也就是Function.prototype.call
所以fn1.call.call(fn2)相当于Function.prototype.call.call(fn2)

key_2: call的执行过程是什么样的

用伪代码表示,call的执行过程大概是这样(不考虑传参的情况)的

Function.prototype.call = function (context) {
    // 1. 首先明确第一个this,因为这是个原型上的方法,是公共的方法,所以我们需要知道是谁在调用call这个方法,谁在调用这个this就是谁,我给这里的this起个别名就是this_caller
    // 2. 改变this_caller中的this指向context
    // 3. 执行this_caller()
    this();
}

知道这两点之后,结合fn1.call.call(fn2)实例分析就是:

  1. 根据key_1,我们知道所以,fn1.call.call(fn2)的第一个callFunction.prototype.call,第二个call是通过Function.prototype.call的原型链找到的。
  2. 根据上面得到的信息,我们把可以把fn1.call.call(fn2)看做(fn1.call).call(fn2)。结合key_2我们可以知道,第二个call起了这些作用:

    1. 首选明确这个callthis_callerfn1.call
    2. fn1.call里面的this指向变成了fn2
    3. fn1.call的变成了fn2

3.整体来看,就是fn1.call.call(fn2)变成了fn2()

上面的问题关键在于:
fn1里面虽然没有this,不受call改变this指向的影响,但是fn1.call里面有this,受call改变this指向的影响。
如果能够理解这一点的话,那这个问题就比较好理解了。

参考文档

查看原文

赞 0 收藏 0 评论 0

user_name 发布了文章 · 8月12日

为何不推荐使用JSON.stringify做深拷贝

我们知道做深拷贝的时候可以使用递归的方式也可以用JSON.stringify + JSON.parse这种看起来简单的方式。
那么JSON.stringify + JSON.parse这种方式真的好用吗?
我的经验告诉我:
JSON.stringify + JSON.parse做深拷贝不安全,而且在大数据量的情况下存在性能问题,不推荐使用。
下面我们主要围绕不安全的问题进行讨论,对于性能的问题简单提下。

为何不安全

不安全主要体现在两个方面:

  1. 拷贝过程中数据失真、丢失
  2. 处理特殊数据时候报错

数据失真、丢失

数据失真,丢失主要在这几种类型中有体现

Date对象拷贝后数据类型变成字符串

let obj = {
    d: new Date(),
};
console.log(JSON.parse(JSON.stringify(obj)));
// {d: "2020-08-12T04:47:40.958Z"}

正则对象、Error对象拷贝后变成空对象

let obj = {
    r: /\d+/gi,
    e: new Error('an error')
};
console.log(JSON.parse(JSON.stringify(obj)));
// {r: {}, e: {}}

对象里面的函数和undefined属性拷贝后属性丢失

let obj = {
    f: console.log,
    u: undefined
};
console.log(JSON.parse(JSON.stringify(obj)));
// {}

NaN、Infinity、-Infinity拷贝后变为null

let obj = {
    i: Infinity,
    l: -Infinity,
    n: NaN,

};
console.log(JSON.parse(JSON.stringify(obj)));
// {i: null, l: null, n: null}

改变对象的原型链

如果,对象的某个属性是由构造函数生成的,那么在拷贝后,他的constructor会指向Object

var A = function () {
    this.a = 'a';
};
var a = new A();
var b = JSON.parse(JSON.stringify(a));
console.log(a.constructor, b.constructor);
// ƒ () {this.a = 'a'} ƒ Object() { [native code] }

特殊数据报错

这个简单的说就是如果对象中有环的话话就会报错,最简单的例子就是

console.log(JSON.parse(JSON.stringify(window)));

这个就会报错,所以在使用这种方式做深拷贝的时候也要注意环的问题。

为何性能差

关于性能的问题我这里不多说,推荐《如何提升JSON.stringify()的性能》这篇文章,这篇文章对JSON.stringify的性能问题说的很清晰,我也很认同。

参考文档

查看原文

赞 1 收藏 1 评论 0

user_name 发布了文章 · 5月3日

怎么更好的理解DNS的迭代查询与递归查询

注意,这篇文章并不会详细的介绍DNS的解析过程,只是讲其中的迭代查询和递归查询该怎么理解.

我们知道DNS解析的过程中有涉及到向域名解析服务器查询的过程.这种查询主要分两种:迭代查询和递归查询.
关于这两种解析方式书上也好,网上也好一般都会这么解释:

  • 主机向本地域名服务器一般递归查询
  • 本地域名服务器向根域名服务器使用迭代查询

可是,这里面提到的递归查询和迭代查询到底该怎么理解呢?我看过好多遍都记不住这两个查询的区分,每次用到都需要重新查一次.不过好在,我最近在做开发的时候突然有了点灵感.结合我们开发过程中的一些经验和思想,可以抛出这样的一个理解方式,简单总结就是:

结论先行

迭代查询是请求方不变(上下文环境)的查询,递归查询的请求方(上下文环境)一直在改变.
此话怎讲呢,我们结合DNS的查询过程理解一下.

第一个阶段: 主机向本地域名服务器的请求使用一般使用递归查询

在这个阶段,主机向本地域名服务器发起请求,如果本地域名服务器不知道请求方想要的东西,那么本地域名服务器会向别的根域名服务器发起请求.如果按照这种方式不断持续进行下去的话,那么每次请求发起方都会改变.
这个过程就有点像我们编程里面的递归,在递归的多次执行中,每次的执行环境都在发生变化.

第二阶段:本地域名服务器向根域名服务器请求使用迭代查询

在这个阶段,本地域名服务器向根域名服务器发起请求,如果根域名服务器不知道请求方想要的东西,那根域名服务器会给请求方指定一个域名服务器让其去查询.这个过程请求方始终是本地域名服务器.
这就有点像我们开发时候的版本迭代,我们始终是在一个项目上进行的迭代开发,开发的项目始终是不变的.跟这里的请求发方不变一个道理.

再通俗点,不严谨的总结一下,就是:
迭代查询是在同一个主体的基础上进行的,而递归查询每次都在变更查询主体.

当然这是我个人琢磨出来的一种理解思路,目的是为了更好的区分这两种查询方式.不是很严谨.希望可以给大家提供一种说人话的理解方法,可以帮到大家.

查看原文

赞 0 收藏 0 评论 0

user_name 赞了回答 · 4月13日

解决js 一个对象数组,如何根据id得到name?

很多时候会先处理一次方便使用

let listRel = list_bank.reduce((result, v) => {
    return {...result, [v.id]:v};
}, {});

listRel[value_bank].name; // 使用的时候

犀利一笑^_^

关注 3 回答 3

user_name 回答了问题 · 4月13日

解决js 一个对象数组,如何根据id得到name?

目前的方法只有遍历,逐个遍历,匹配id.

list_bank.find(item => {return item.id == value_bank} )

关注 3 回答 3

user_name 发布了文章 · 3月29日

vim添加/删除多行注释最佳实践

写在前面

有些知识点或者技能老是忘记,每次用到都要去搜,索性自己整理下记录下来,方便日后查找查看.

vim多行注释

  1. 进入vim按ctrl + V(大写)(左下角会提示: -- VISUAL BLOCK --)
  2. j或者k移动选中需要注释的行
  3. 按下I键(这时候你看到只有你选中的第一行才有光标闪动),输入#或者//
  4. 按下esc键,稍等一小会,就ok了

vim取消多行注释

  1. 进入vim按ctrl + V(大写)(左下角会提示: -- VISUAL BLOCK --)
  2. 通过hjkl选中我们要删除的注释内容
  3. 按下x或者d删除选中内容,这个是立即生效的
查看原文

赞 1 收藏 1 评论 0

user_name 发布了文章 · 3月28日

给B站添加自动跳过片头片尾功能

开头有话说

写这篇文章的意义并不在于分享技术,而是让更多的人知道这个方法,使用这个方法.

原文地址: https://segmentfault.com/a/11...

事出必有因

最新在B站刷<夺宝幸运星>这个动画片,动画时长8:30,片头1:30,片尾长1:08.合着中间内容就6分钟左右,我却要看2:30的片头片尾.每次遇到片头片尾都要手动去拉进度条,简直不能忍,我的时间那么宝贵,那竟然让我看片头!而这时候我发现B站竟然么有跳过片头片尾的功能!
好,你没有,为了更愉快的刷我的动画片,我给你写个.

问题咋解决

经过几十集的拉进度条训练,这个业务我已经很熟练了,我发现片头片尾的时长一般都是固定的.那么我们要想自动跳过片头片尾其实可以:

  • 在视频加载完成后跳过指定的时间
  • 在视频播放到还剩指定时间的时候切换到下一集

好了思路有了,那怎么控制视频跳过时间呢?

一开始我想通过控制鼠标来解决.后来发现不可控因素太多,于是我开始翻B站的代码,希望可以得到一些提示,黄天不负无聊人,我在window对象上发现了player这个属性,而这个属性还有一大坨的方法:

play
pause
reload
seek
...

简单试验之后发现,通过这个player属性上带的方法我们就可以控制播放行为.
同时还发现了一些player的事件

video_media_ended
video_media_error
video_media_loaded
...

结合以上所得,我们就可以实现我们想要的功能了.

代码长这样

function skip (start_length, end_length) {
    if (!start_length || !end_length) {
        return console.error('请设置片头和片尾时长')
    }
    let total_time = player.getDuration();
    let skip_point_start = start_length;
    let skip_point_end = total_time - end_length;
    let has_listener = false;
    const interval = 5000;
    window.timer = 0;

    function start () {
        console.log('开搞');
        if (timer) {
            clearInterval(timer);
        }
        timer = setInterval(handler, interval)
    }
    function handler () {
        let current_time = player.getCurrentTime();
        if (current_time < skip_point_start) {
            console.log('跳过片头')
            return window.player.seek(start_length);
        }
        if (current_time >= skip_point_end) {
            console.log('跳过片尾,下一集')
            if (!has_listener) {
                has_listener = true;
                window.player.addEventListener('video_media_loaded', start);
            }
            return window.player.next();
        }
    }
    start();
}

当然,如我们前面所说,要使用这个脚本需要指定两个时间:
片头时长片尾时长,单位都是秒.
然后把这两个参数传给上面这个方法执行就行了

skip(90, 68);

这样就可以自动跳过片头片尾了,珍惜我们宝贵的时间.

效果怎么样

我用了两天时间,恩恩,不错,对于固定片头片尾的剧很好,但是会遇到一些片头规则,片尾不规则的情况,这种情况会出问题,经常是没看完就切换到下一集了.但这个问题不要紧,大家注意就行了.

更多的过程

我把一些更详细的内容放在仓库了,有需要的可以自取,记得转载注明出处就ok了
B站跳过开头结尾脚本 ~ aqiongbei/bilibili_scripts

查看原文

赞 2 收藏 1 评论 0

user_name 关注了用户 · 1月8日

汤青松 @songboy

《PHP Web安全开发实战》 作者

关注 5932

认证与成就

  • 获得 356 次点赞
  • 获得 23 枚徽章 获得 1 枚金徽章, 获得 9 枚银徽章, 获得 13 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

  • 自嗨导航

    清爽又好用的移动端本地导航页 预览地址: https://git.io/Jfen7

  • 百度云资源归并脚本

    通过百度云分享链接和提取码把文件保存到一个文件夹的脚本

注册于 2015-05-28
个人主页被 3.9k 人浏览