不满足于只会使用系列: tapable

jiezi

6 年前

全方位的, 零死角的, 分析 tapable 源码
上一遍博文中, 我们谈到了 tapable 的用法, 现在我们来深入一下 tap 究竟是怎么运行的, 怎么处理, 控制 tap 进去的钩子函数, 拦截器又是怎么运行的.
俺们先从同步函数说起, 异步就留给你们做练习把 (哈哈哈);
tap
这里有一个例子
let SyncHook = require(‘./lib/SyncHook.js’)

let h1 = new SyncHook([‘options’]);

h1.tap(‘A’, function (arg) {
console.log(‘A’,arg);
return ‘b’; // 除非你在拦截器上的 register 上调用这个函数, 不然这个返回值你拿不到.
})

h1.tap(‘B’, function () {
console.log(‘b’)
})
h1.tap(‘C’, function () {
console.log(‘c’)
})
h1.tap(‘D’, function () {
console.log(‘d’)
})

h1.intercept({
call: (…args) => {
console.log(…args, ‘————-intercept call’);
},
//
register: (tap) => {
console.log(tap, ‘——————intercept register’);

return tap;
},
loop: (…args) => {
console.log(…args, ‘————-intercept loop’)
},
tap: (tap) => {
console.log(tap, ‘——————-intercept tap’)

}
})
h1.call(6);
new SyncHook([‘synchook’])
首先先创建一个同步钩子对象, 那这一步会干什么呢?
这一步会先执行超类 Hook 的初始化工作
// 初始化
constructor(args) {
// 参数必须是数组
if (!Array.isArray(args)) args = [];
// 把数组参数赋值给 _args 内部属性, new 的时候传进来的一系列参数.
this._args = args;
// 绑定 taps, 应该是事件
this.taps = [];
// 拦截器数组
this.interceptors = [];
// 暴露出去用于调用同步钩子的函数
this.call = this._call;
// 暴露出去的用于调用异步 promise 函数
this.promise = this._promise;
// 暴露出去的用于调用异步钩子函数
this.callAsync = this._callAsync;
// 用于生存调用函数的时候, 保存钩子数组的变量, 现在暂时先不管.
this._x = undefined;
}
第二部 .tap()

现在我们来看看调用了 tap() 方法后发生了什么
tap(options, fn) {
// 下面是一些参数的限制, 第一个参数必须是字符串或者是带 name 属性的对象,
// 用于标明钩子, 并把钩子和名字都整合到 options 对象里面
if (typeof options === “string”) options = {name: options};
if (typeof options !== “object” || options === null)
throw new Error(
“Invalid arguments to tap(options: Object, fn: function)”
);
options = Object.assign({type: “sync”, fn: fn}, options);
if (typeof options.name !== “string” || options.name === “”)
throw new Error(“Missing name for tap”);
// 注册拦截器
options = this._runRegisterInterceptors(options);
// 插入钩子
this._insert(options);
}
现在我们来看看如何注册拦截器
_runRegisterInterceptors(options) {
// 现在这个参数应该是这个样子的 {fn: function…, type: sync,name: ‘A’}
// 遍历拦截器, 有就应用, 没有就把配置返还回去
for (const interceptor of this.interceptors) {
if (interceptor.register) {
// 把选项传入拦截器注册, 从这里可以看出, 拦截器的 register 可以返回一个新的 options 选项, 并且替换掉原来的 options 选项, 也就是说可以在执行了一次 register 之后改变你当初 tap 进去的方法
const newOptions = interceptor.register(options);
if (newOptions !== undefined) options = newOptions;
}
}
return options;
}
注意: 这里执行的 register 拦截器是有顺序问题的, 这个执行在 tap() 里面, 也就是说, 你这个拦截器要在调用 tap(), 之前就调用 intercept() 添加的.
那拦截器是怎么添加进去的呢, 来看下 intercept()
intercept(interceptor) {
// 重置所有的调用方法, 在教程中我们提到了编译出来的调用方法依赖的其中一点就是拦截器. 所有每添加一个拦截器都要重置一次调用方法, 在下一次编译的时候, 重新生成.
this._resetCompilation();
// 保存拦截器而且是复制一份, 保留原本的引用
this.interceptors.push(Object.assign({}, interceptor));
// 运行所有的拦截器的 register 函数并且把 taps[i],(tap 对象) 传进去.
// 在 intercept 的时候也会遍历执行一次当前所有的 taps, 把他们作为参数调用拦截器的 register, 并且把返回的 tap 对象 (tap 对象就是指 tap 函数里面把 fn 和 name 这些信息整合起来的那个对象) 替换了原来的 tap 对象, 所以 register 最好返回一个 tap, 在例子中我返回了原来的 tap, 但是其实最好返回一个全新的 tap
if (interceptor.register) {
for (let i = 0; i < this.taps.length; i++)
this.taps[i] = interceptor.register(this.taps[i]);
}
}
注意: 也就是在调用 tap() 之后再传入的拦截器, 会在传入的时候就为每一个 tap 调用 register 方法
现在我们来看看_insert
_insert(item) {
// 重置资源, 因为每一个插件都会有一个新的 Compilation
this._resetCompilation();
// 顺序标记, 这里联合 __test__ 包里的 Hook.js 一起使用
// 看源码不懂, 可以看他的测试代码, 就知道他写的是什么目的.
// 从测试代码可以看到, 这个 {before} 是插件的名字.
let before;
// before 可以是单个字符串插件名称, 也可以是一个字符串数组插件.
if (typeof item.before === “string”) {
before = new Set([item.before]);
}
else if (Array.isArray(item.before)) {
before = new Set(item.before);
}
// 阶段
// 从测试代码可以知道这个也是一个控制顺序的属性, 值越小, 执行得就越在前面
// 而且优先级低于 before
let stage = 0;
if (typeof item.stage === “number”) stage = item.stage;
let i = this.taps.length;
// 遍历所有 `tap` 了的函数, 然后根据 stage 和 before 进行重新排序.
// 假设现在 tap 了两个钩子 A B `B` 的配置是 {name: ‘B’, before: ‘A’}
while (i > 0) {// i = 1, taps = [A]
i–;// i = 0 首先 – 是因为要从最后一个开始
const x = this.taps[i];// x = A
this.taps[i + 1] = x;// i = 0, taps[1] = A i+1 把当前元素往后移位, 把位置让出来
const xStage = x.stage || 0;// xStage = 0
if (before) {// 如果有这个属性就会进入这个判断
if (before.has(x.name)) {// 如果 before 有 x.name 就会把这个插件名称从 before 这个列表里删除, 代表这个钩子位置已经在当前的钩子之前
before.delete(x.name);
continue;// 如果 before 还有元素, 继续循环, 执行上面的操作
}
if (before.size > 0) {
continue;// 如果 before 还有元素, 那就一直循环, 直到第一位.
}
}
if (xStage > stage) {// 如果 stage 比当前钩子的 stage 大, 继续往前挪
continue;
}
i++;
break;
}
this.taps[i] = item;// 把挪出来的位置插入传进来的钩子
}
这其实就是一个排序算法, 根据 before, stage 的值来排序, 也就是说你可以这样 tap 进来一个插件
h1.tap({
name: ‘B’,
before: ‘A’
}, () => {
console.log(‘i am B’)
})
发布订阅模式
发布订阅模式是一个在前后端都盛行的一个模式, 前端的 promise, 事件, 等等都基于发布订阅模式, 其实 tapable 也是一种发布订阅模式, 上面的 tap 只是订阅了钩子函数, 我们还需要发布他, 接下来我们谈谈 h1.call(), 跟紧了, 这里面才是重点.
我们可以在初始化中看到 this.call = this._call, 那我们来看一下 this._call() 是个啥
Object.defineProperties(Hook.prototype, {
_call: {
value: createCompileDelegate(“call”, “sync”),
configurable: true,
writable: true
},
_promise: {
value: createCompileDelegate(“promise”, “promise”),
configurable: true,
writable: true
},
_callAsync: {
value: createCompileDelegate(“callAsync”, “async”),
configurable: true,
writable: true
}
});
结果很明显, 这个函数是由 createCompileDelegate(), 这个函数返回的, 依赖于, 函数的名字以及钩子的类型.
createCompileDelegate(name, type)
function createCompileDelegate(name, type) {
return function lazyCompileHook(…args) {
// 子类调用时,this 默认绑定到子类
// (不明白的可以了解 js this 指向, 一个函数的 this 指向调用他的对象, 没有就是全局, 除非使用 call apply bind 等改变指向)
// 在我们的例子中, 这个 this 是 SyncHook
this[name] = this._createCall(type);
// 用 args 去调用 Call
return this[name](…args);
};
}
在上面的注释上可以加到, 他通过闭包保存了 name 跟 type 的值, 在我们这个例子中, 这里就是 this.call = this._createCall(‘sync’); 然后把我们外部调用 call(666) 时传入的参数给到他编译生成的方法中.
注意, 在我们这个例子当中我在 call 的时候并没有传入参数.
这时候这个 call 方法的重点就在_createCall 方法里面了.
_createCall()
_createCall(type) {

// 传递一个整合了各个依赖条件的对象给子类的 compile 方法
return this.compile({
taps: this.taps,
interceptors: this.interceptors,
args: this._args,
type: type
});
}

从一开始, 我们就在 Hook.js 上分析, 我们来看看 Hook 上的 compile
compile(options) {
throw new Error(“Abstract: should be overriden”);
}
清晰明了, 这个方法一定要子类复写, 不然报错, 上面的_createCompileDelegate 的注释也写得很清楚, 在当前的上下文中,this 指向的是, 子类, 在我们这个例子中就是 SyncHook
来看看 SyncHook 的 compile
compile(options) {
// 现在 options 是由 Hook 里面传到这里的
// options
// {
// taps: this.taps, tap 对象数组
// interceptors: this.interceptors, 拦截器数组
// args: this._args,
// type: type
// }
// 对应回教程中的编译出来的调用函数依赖于的那几项看看, 是不是这些, 钩子的个数,new SyncHook([‘arg’]) 的参数个数, 拦截器的个数, 钩子的类型.
factory.setup(this, options);

return factory.create(options);
}
好吧现在来看看 setup, 咦? factory 怎么来的, 原来
const factory = new SyncHookCodeFactory();
是 new 出来的
现在来看看 SyncHookCodeFactory 的父类 HookCodeFactory
constructor(config) {

// 这个 config 作用暂定. 因为我看了这个文件, 没看到有引用的地方,
// 应该是其他子类有引用到
this.config = config;
// 这两个不难懂, 往下看就知道了
this.options = undefined;
this._args = undefined;
}
现在可以来看一下 setup 了
setup(instance, options) {
// 这里的 instance 是 syncHook 实例, 其实就是把 tap 进来的钩子数组给到钩子的_x 属性里.
instance._x = options.taps.map(t => t.fn);
}
OK, 到 create 了
这个 create 有点长, 看仔细了, 我们现在分析同步的部分.
create(options) {
// 初始化参数, 保存 options 到本对象 this.options, 保存 new Hook([“options”]) 传入的参数到 this._args
this.init(options);
let fn;
// 动态构建钩子, 这里是抽象层, 分同步, 异步, promise
switch (this.options.type) {
// 先看同步
case “sync”:
// 动态返回一个钩子函数
fn = new Function(
// 生成函数的参数,no before no after 返回参数字符串 xxx,xxx 在
// 注意这里 this.args 返回的是一个字符串,
// 在这个例子中是 options
this.args(),
‘”use strict”;\n’ +
this.header() +
this.content({
onError: err => `throw ${err};\n`,
onResult: result => `return ${result};\n`,
onDone: () => “”,
rethrowIfPossible: true
})
);
break;
case “async”:
fn = new Function(
this.args({
after: “_callback”
}),
‘”use strict”;\n’ +
this.header() +
// 这个 content 调用的是子类类的 content 函数,
// 参数由子类传, 实际返回的是 this.callTapsSeries() 返回的类容
this.content({
onError: err => `_callback(${err});\n`,
onResult: result => `_callback(null, ${result});\n`,
onDone: () => “_callback();\n”
})
);
break;
case “promise”:
let code = “”;
code += ‘”use strict”;\n’;
code += “return new Promise((_resolve, _reject) => {\n”;
code += “var _sync = true;\n”;
code += this.header();
code += this.content({
onError: err => {
let code = “”;
code += “if(_sync)\n”;
code += `_resolve(Promise.resolve().then(() => { throw ${err}; }));\n`;
code += “else\n”;
code += `_reject(${err});\n`;
return code;
},
onResult: result => `_resolve(${result});\n`,
onDone: () => “_resolve();\n”
});
code += “_sync = false;\n”;
code += “});\n”;
fn = new Function(this.args(), code);
break;
}
// 把刚才 init 赋的值初始化为 undefined
// this.options = undefined;
// this._args = undefined;
this.deinit();

return fn;
}
到了这个方法, 一切我们都一目了然了 (看 content 的参数), 在我们的例子中他是通过动态的生成一个 call 方法, 根据的条件有, 钩子是否有 context 属性 (这个是根据 header 的代码才能知道), 钩子的个数, 钩子的类型, 钩子的参数, 钩子的拦截器个数.
注意, 这上面有关于 fn 这个变量的函数, 返回的都是字符串, 不是函数不是方法, 是返回可以转化成代码执行的字符串, 思维要转变过来.
现在我们来看看 header()
header() {
let code = “”;
// this.needContext() 判断 taps[i] 是否有 context 属性, 任意一个 tap 有都会返回 true
if (this.needContext()) {
// 如果有 context 属性, 那_context 这个变量就是一个空的对象.
code += “var _context = {};\n”;
} else {
// 否则就是 undefined
code += “var _context;\n”;
}
// 在 setup() 中把所有 tap 对象的钩子都给到了 instance , 这里的 this 就是 setup 中的 instance _x 就是钩子对象数组
code += “var _x = this._x;\n”;
// 如果有拦截器, 在我们的例子中, 就有一个拦截器
if (this.options.interceptors.length > 0) {
// 保存 taps 数组到_taps 变量, 保存拦截器数组到变量_interceptors
code += “var _taps = this.taps;\n”;
code += “var _interceptors = this.interceptors;\n”;
}
// 如果没有拦截器, 这里也不会执行. 一个拦截器只会生成一次 call
// 在我们的例子中, 就有一个拦截器, 就有 call
for (let i = 0; i < this.options.interceptors.length; i++) {
const interceptor = this.options.interceptors[i];
if (interceptor.call) {
// getInterceptor 返回的是字符串是 `_interceptors[i]`
// 后面的 before 因为我们的拦截器没有 context 所以返回的是 undefined 所以后面没有跟一个空对象
code += `${this.getInterceptor(i)}.call(${this.args({
before: interceptor.context ? “_context” : undefined
})});\n`;
}
}
return code;
// 注意 header 返回的不是代码, 是可以转化成代码的字符串 (这个时候并没有执行).
/**
* 此时 call 函数应该为:
* “use strict”;
* function (options) {
* var _context;
* var _x = this._x;
* var _taps = this.taps;
* var _interterceptors = this.interceptors;
* // 我们只有一个拦截器所以下面的只会生成一个
* _interceptors[0].call(options);
*}
*/
}
现在到我们的 this.content() 了, 仔细一看,this.content() 方法并不在 HookCodeFactory 上, 很明显这个 content 是由子类来实现的, 往回看看这个 create 是由谁调用的? 没错, 是 SuncHookCodeFactory 的石料理, 我们来看看 SyncHook.js 上的 SyncHookCodeFactory 实现的 content
在看这个 content 实现之前, 先来回顾一下父类的 create() 给他传了什么参数.
this.content({
onError: err => `throw ${err};\n`,
onResult: result => `return ${result};\n`,
onDone: () => “”,
rethrowIfPossible: true
})
注意了, 这上面不是抛出错误, 不是返回值. 这里面的回调执行了以后返回的是一个字符串, 不要搞混了代码与可以转化成代码的字符串.
content({onError, onResult, onDone, rethrowIfPossible}) {
return this.callTapsSeries({
// 可以在这改变 onError 但是这里的 i 并没有用到, 这是什么操作 …
// 注意这里并没有传入 onResult
onError: (i, err) => onError(err),
onDone,
// 这个默认为 true
rethrowIfPossible
});
}
这个函数返回什么取决于 this.callTapSeries(), 那接下来我们来看看这个函数 ( 这层层嵌套, 其实也是有可斟酌的地方. 看源码不仅要看实现, 代码的组织也是很重要的编码能力)
刚才函数的头部已经出来了, 头部做了初始化的操作, 与生成执行拦截器代码.content 很明显, 要开始生成执行我们的 tap 对象的代码了 (如果不然, 我们的 tap 进来的函数在哪里执行呢? 滑稽:).
callTapsSeries({onError, onResult, onDone, rethrowIfPossible}) {
// 如果 taps 钩子处理完毕, 执行 onDone, 或者一个 tap 都没有 onDone() 返回的是一个字符串. 看上面的回顾就知道了.
if (this.options.taps.length === 0) return onDone();
// 如果由异步钩子, 把第一个异步钩子的下标, 如果没有这个返回的是 -1
const firstAsync = this.options.taps.findIndex(t => t.type !== “sync”);
// 定义一个函数接受一个 number 类型的参数, i 应该是 taps 的 index
// 从这个函数的命名来看, 这个函数应该会递归的执行
// 我们先开最后的 return 语句, 发现第一个传进来的参数是 0
const next = i => {
// 如果大于等于钩子函数数组长度, 返回并执行 onDone 回调, 就是 tap 对象都处理完了
// 跳出递归的条件
if (i >= this.options.taps.length) {
return onDone();
}
// 这个方法就是递归的关键, 看见没, 逐渐往上遍历
// 注意这里只是定义了方法, 并没有执行
const done = () => next(i + 1);
// 传入一个值如果是 false 就执行 onDone true 返回一个 “”
// 字面意思, 是否跳过 done 应该是增加一个跳出递归的条件
const doneBreak = skipDone => {
if (skipDone) return “”;
return onDone();
};
// 这里就是处理单个 taps 对象的关键, 传入一个下标, 和一系列回调.
return this.callTap(i, {
// 调用的 onError 是 (i, err) => onError(err) , 后面这个 onError(err) 是 () => `throw ${err}`
// 目前 i done doneBreak 都没有用到
onError: error => onError(i, error, done, doneBreak),
// 这里 onResult 同步钩子的情况下在外部是没有传进来的, 刚才也提到了
// 这里 onResult 是 undefined
onResult:
onResult &&
(result => {
return onResult(i, result, done, doneBreak);
}),
// 没有 onResult 一定要有一个 onDone 所以这里就是一个默认的完成回调
// 这里的 done 执行的是 next(i+1), 也就是迭代的处理完所有的 taps
onDone:
!onResult &&
(() => {return done();}),
// rethrowIfPossible 默认是 true 也就是返回后面的
// 因为没有异步函数 firstAsync = -1.
// 所以返回的是 -1 < 0, 也就是 true, 这个可以判断当前的是否是异步的 tap 对象
// 这里挺妙的如果是 false 那么当前的钩子类型就不是 sync, 可能是 promise 或者是 async
// 具体作用要看 callTaps() 如何使用这个.
rethrowIfPossible:
rethrowIfPossible && (firstAsync < 0 || i < firstAsync)
});
};

return next(0);
}
参数搞明白了, 现在, 我们可以进入 callTap() 了.
callTap 挺长的, 因为他也分了 3 种类型分别处理, 像 create() 一样.
/** tapIndex 下标
* onError:() => onError(i,err,done,skipdone) ,
* onReslt: undefined
* onDone: () => {return: done()} // 开启递归的钥匙
* rethrowIfPossible: false 说明当前的钩子不是 sync 的.
*/
callTap(tapIndex, { onError, onResult, onDone, rethrowIfPossible}) {
let code = “”;
// hasTapCached 是否有 tap 的缓存, 这个要看看他是怎么做的缓存了
let hasTapCached = false;
// 这里还是拦截器的用法, 如果有就执行拦截器的 tap 函数
for (let i = 0; i < this.options.interceptors.length; i++) {
const interceptor = this.options.interceptors[i];
if (interceptor.tap) {
if (!hasTapCached) {
// 这里 getTap 返回的是 _taps[0] _taps[1]… 的字符串
// 这里生成的代码就是 `var _tap0 = _taps[0]`
// 注意: _taps 变量我们在 header 那里已经生成了
code += `var _tap${tapIndex} = ${this.getTap(tapIndex)};\n`;
// 可以看到这个变量的作用就是, 如果有多个拦截器. 这里也只会执行一次.
// 注意这句获取_taps 对象的下标用的是 tapIndex, 在一次循环中, 这个 tapIndex 不会变
// 就是说如果这里执行多次, 就会生成多个重复代码, 不稳定, 也影响性能.
// 但是你又要判断拦截器有没有 tap 才可以执行, 或许有更好的写法
// 如果你能想到, 那么你就是 webpack 的贡献者了. 不过这样写, 似乎也没什么不好.
hasTapCached = true;
}
// 这里很明显跟上面的 getTap 一样返回的都是字符串
// 我就直接把这里的 code 分析出来了, 注意这里还是在循坏中.
// code += _interceptor[0].tap(_tap0);
// 由于我们的拦截器没有 context, 所以没传_context 进来.
// 可以看到这里是调用拦截器的 tap 方法然后传入 tap0 对象的地方
code += `${this.getInterceptor(i)}.tap(${
interceptor.context ? “_context, ” : “”
}_tap${tapIndex});\n`;
}
}
// 跑出了循坏
// 这里的 getTapFn 返回的也是字符串 `_x[0]`
// callTap 用到的这些全部在 header() 那里生成了, 忘记的回头看一下.
// 这里的 code 就是: var _fn0 = _x[0]
code += `var _fn${tapIndex} = ${this.getTapFn(tapIndex)};\n`;
const tap = this.options.taps[tapIndex];
// 开始处理 tap 对象
switch (tap.type) {
case “sync”:
// 全是同步的时候, 这里不执行, 如果有异步函数, 那么恭喜, 有可能会报错. 所以他加了个 try…catch
if (!rethrowIfPossible) {
code += `var _hasError${tapIndex} = false;\n`;
code += “try {\n”;
}
// 前面分析了同步的时候 onResult 是 undefined
// 我们也分析一下如果走这里会怎样
// var _result0 = _fn0(option)
// 可以看到是调用 tap 进来的钩子并且接收参数
if (onResult) {
code += `var _result${tapIndex} = _fn${tapIndex}(${this.args({
before: tap.context ? “_context” : undefined
})});\n`;
} else {
// 所以会走这里
// _fn0(options) 额 … 我日有就接受一下结果
code += `_fn${tapIndex}(${this.args({
before: tap.context ? “_context” : undefined
})});\n`;
}
// 把 catch 补上, 在这个例子中没有
if (!rethrowIfPossible) {
code += “} catch(_err) {\n”;
code += `_hasError${tapIndex} = true;\n`;
code += onError(“_err”);
code += “}\n”;
code += `if(!_hasError${tapIndex}) {\n`;
}
// 有 onResult 就把结果给传递出去. 目前没有
if (onResult) {
code += onResult(`_result${tapIndex}`);
}
// 有 onDone() 就调用他开始递归, 还记得上面的 next(i+1) 吗?
if (onDone) {
code += onDone();
}
// 这里是不上上面的 if 的大括号, 在这个例子中没有, 所以这里也不执行
if (!rethrowIfPossible) {
code += “}\n”;
}
// 同步情况下, 这里最终的代码就是
// var _tap0 = _taps[0];
// _interceptors[0].tap(_tap0);
// var _fn0 = _x[0];
// _fn0(options);
// 可以看到, 这里会递归下去
// 因为我们 tap 了 4 个钩子
// 所以这里会从复 4 次
// 最终长这样
// var _tap0 = _taps[0];
// _interceptors[0].tap(_tap0);
// var _fn0 = _x[0];
// _fn0(options);
// var _tap1 = _taps[1];
// _interceptors[1].tap(_tap1);
// var _fn1 = _x[1];
// _fn1(options);
// ……
break;
case “async”:
let cbCode = “”;
if (onResult) cbCode += `(_err${tapIndex}, _result${tapIndex}) => {\n`;
else cbCode += `_err${tapIndex} => {\n`;
cbCode += `if(_err${tapIndex}) {\n`;
cbCode += onError(`_err${tapIndex}`);
cbCode += “} else {\n”;
if (onResult) {
cbCode += onResult(`_result${tapIndex}`);
}
if (onDone) {
cbCode += onDone();
}
cbCode += “}\n”;
cbCode += “}”;
code += `_fn${tapIndex}(${this.args({
before: tap.context ? “_context” : undefined,
after: cbCode
})});\n`;
break;
case “promise”:
code += `var _hasResult${tapIndex} = false;\n`;
code += `var _promise${tapIndex} = _fn${tapIndex}(${this.args({
before: tap.context ? “_context” : undefined
})});\n`;
code += `if (!_promise${tapIndex} || !_promise${tapIndex}.then)\n`;
code += ` throw new Error(‘Tap function (tapPromise) did not return promise (returned ‘ + _promise${tapIndex} + ‘)’);\n`;
code += `_promise${tapIndex}.then(_result${tapIndex} => {\n`;
code += `_hasResult${tapIndex} = true;\n`;
if (onResult) {
code += onResult(`_result${tapIndex}`);
}
if (onDone) {
code += onDone();
}
code += `}, _err${tapIndex} => {\n`;
code += `if(_hasResult${tapIndex}) throw _err${tapIndex};\n`;
code += onError(`_err${tapIndex}`);
code += “});\n”;
break;
}
return code;
}
好了, 到了这里我们可以把 compile 出来的 call 方法输出出来了
“use strict”;
function (options) {
var _context;
var _x = this._x;
var _taps = this.taps;
var _interterceptors = this.interceptors;
// 我们只有一个拦截器所以下面的只会生成一个
_interceptors[0].call(options);

// 下面返回的是字符串,
if (xxx !== undefined) {
// 这里说明, 只要有返回值 (因为不返回默认是 undefined), 就会立即 return;
return result;
} else {
// next(); 这里返回的是一个字符串 ( 因为要生成字符串代码)
// 我在上面的注释中提到了 next 是 done 就是那个开启递归的门
// 所以如果 tap 一直没返回值, 这里就会一直 if…else.. 的嵌套下去

}
回头想想, 我们刚刚是不是分析了 capTap(), 如果我们传了 onResult 会怎样? 如果你还记得就知道, 如果有传了 onResult 这个回调, 他就会接收这个返回值. 并且会调用这个回调把 result 传出去.
而且还要注意的是,onDone 在 callTap() 的时候是处理过的, 我在贴出来一次.
onDone:!onResult && (() => {return done();})
也就是说如果我传了 onResult 那么这个 onDone 就是一个 false.
所以递归的门现在从 sync 的 onDone, 变到 syncBail 的 onResult 了
好, 现在带着这些变化去看 this.capTap(), 你就能推出现在这个 call 函数会变成这样.
“use strict”;
function (options) {
var _context;
var _x = this._x;
var _taps = this.taps;
var _interterceptors = this.interceptors;
// 我们只有一个拦截器所以下面的只会生成一个
_interceptors[0].call(options);

var _tap0 = _taps[0];
_interceptors[0].tap(_tap0);
var _fn0 = _x[0];
var _result0 = _fn0(options);

if (_result0 !== undefined) {
// 这里说明, 只要有返回值 (因为不返回默认是 undefined), 就会立即 return;
return _result0
} else {
var _tap1 = _taps[1];
_interceptors[1].tap(_tap1);
var _fn1 = _x[1];
var _result1 = _fn1(options);
if (_result1 !== undefined) {
return _result1
} else {
var _tap2 = _taps[2];
_interceptors[2].tap(_tap2);
var _fn2 = _x[2];
var _result2 = _fn2(options);
if (_result2 !== undefined) {
return _result2
} else {
var _tap3 = _taps[3];
_interceptors[3].tap(_tap3);
var _fn3 = _x[3];
_fn3(options);
}
}
}
到如今,tapable 库已经删除了 tapable.js 文件 (可能做了一些整合, 更细分了), 只留下了钩子文件. 但不影响功能,webpack 里的 compile compilation 等一众重要插件, 都是基于 tapable 库中的这些钩子.
现在我们 require(‘tapable’) 得到的对象是这样的:
{
SyncHook: function(…){},
SyncBailHook: function(…){},
…
}
到此, 关于 tapable 的大部分我都解剖了一遍, 还有其他类型的 hook 如果你们愿意, 相信你们去研究一下, 也能够游刃有余.
那个, 写得有些随性, 可能会让你们觉得模糊, 但是 … 我真尽力了, 这篇改了几遍, 历时一个星期 …, 不懂就在那个评论区问我. 我看到会回复的. 共勉.
后记: 本来以为会很难, 但是越往下深入的时候发现, 大神之所以成为大神, 不是他的代码写得牛, 是他的思维牛, 没有看不懂的代码, 只有跟不上的思路, 要看懂他如何把 call 函数组织出来不难, 难的是, 他居然能想到这样来生成函数, 还可以考虑到, 拦截器钩子, 和 context 属性, 以及他的 onResult onDone 回调的判断, 架构的设计, 等等, 一步接一步. 先膜拜吧 …