tapable版本1.3
tabpable可以为插件提供一系列的钩子函数，
const {
SyncHook,
SyncBailHook,
SyncWaterfallHook,
SyncLoopHook,
AsyncParallelHook,
AsyncParallelBailHook,
AsyncSeriesHook,
AsyncSeriesBailHook,
AsyncSeriesWaterfallHook
} = require("tapable");
以SyncHook为例，在tap过程中的调用过程为tap -> _insert
在call过程中的调用过程为call -> lazyCompileHook -> compile -> factory.setup -> factory.create
- tap过程中主要为订阅过程，将function挂载到taps上
- call过程通过factory工厂函数，将同步事件合成code码，执行code从而实现同步事件。
tap
该方法主要是对option进行处理， 如在syncHook中会将type设置为sync;
执行interceptors拦截器register方法， 并将拦截器的返回值作为新的options。
tap(options, fn) {
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) {
for (const interceptor of this.interceptors) {
if (interceptor.register) {
const newOptions = interceptor.register(options);
if (newOptions !== undefined) options = newOptions;
}
}
return options;
}
_insert
按照优先级的方式查到到tap事件所需要插入的位置， 然后进行插入。
_insert(item) {
this._resetCompilation();
let before;
if (typeof item.before === "string") before = new Set([item.before]);
else if (Array.isArray(item.before)) {
before = new Set(item.before);
}
let stage = 0;
if (typeof item.stage === "number") stage = item.stage;
let i = this.taps.length;
while (i > 0) {
i--;
const x = this.taps[i];
this.taps[i + 1] = x;
const xStage = x.stage || 0;
if (before) {
if (before.has(x.name)) {
before.delete(x.name);
continue;
}
if (before.size > 0) {
continue;
}
}
if (xStage > stage) {
continue;
}
i++;
break;
}
this.taps[i] = item;
}
compile
hooks最终通过factory.create实现实时生成code， 并执行。
factory.create是一个比较有意思的过程， 它并不像我当时猜想的通过迭代方案去实现事件的调用， 而是将事件列表进行code拼接而实现。 下面会对几种方法生成的code进行查看解说。
function createCompileDelegate(name, type) {
return function lazyCompileHook(...args) {
this[name] = this._createCall(type);
return this[name](...args);
};
}
...
_createCall(type) {
return this.compile({
taps: this.taps,
interceptors: this.interceptors,
args: this._args,
type: type
});
}
...
compile(options) {
factory.setup(this, options);
return factory.create(options);
}
SyncHook
同步事件， 查看其code码， 它就是将taps列表中的事件顺序执行。
class Car {
constructor() {
this.hooks = {
accelerate: new SyncHook(["newSpeed"]),
brake: new SyncHook(),
calculateRoutes: new AsyncParallelHook(["source", "target", "routesList"]),
seriesWater: new AsyncSeriesWaterfallHook(['haha']),
other: new AsyncSeriesWaterfallHook(['other'])
};
}
/* ... */
}
let myCar = new Car();
myCar.hooks.brake.tap('test', () => {
console.log('sync one')
})
myCar.hooks.brake.tap('test', () => {
console.log('sync tow')
})
myCar.hooks.brake.call();
// 转为函数
ƒ anonymous(
) {
"use strict";
var _context;
var _x = this._x;
var _fn0 = _x[0];
_fn0();
var _fn1 = _x[1];
_fn1();
}
AsyncParallelHook
异步并行事件， 同时执行taps上的包装函数， 使用_counter计数， 完成后执行最后的回调。
myCar.hooks.calculateRoutes.tapAsync('test', (source, target, cb) => {
setTimeout(function () {
console.log('asycn paralle one')
cb()
}, 1000)
})
myCar.hooks.calculateRoutes.tapAsync('test', (source, target, cb) => {
setTimeout(function () {
console.log('asycn paralle two')
cb()
}, 0)
})
myCar.hooks.calculateRoutes.callAsync('async paralle', 'lalal', function () {
console.log('has finished')
})
...
(function anonymous(source, target, _callback
) {
"use strict";
var _context;
var _x = this._x;
do {
var _counter = 2;
var _done = () => {
_callback();
};
if (_counter <= 0) break;
var _fn0 = _x[0];
_fn0(source, target, _err0 => {
if (_err0) {
if (_counter > 0) {
_callback(_err0);
_counter = 0;
}
} else {
if (--_counter === 0) _done();
}
});
if (_counter <= 0) break;
var _fn1 = _x[1];
_fn1(source, target, _err1 => {
if (_err1) {
if (_counter > 0) {
_callback(_err1);
_counter = 0;
}
} else {
if (--_counter === 0) _done();
}
});
} while (false);
})
AsyncParallelHook & promise
异步并行事件， promise方式
myCar.hooks.calculateRoutes.tapPromise('test', () => {
return new Promise(function (resolve, reject){
resolve('promise one')
})
})
myCar.hooks.calculateRoutes.tapPromise('test', () => {
return new Promise(function (resolve, reject){
resolve('promise two')
})
})
myCar.hooks.calculateRoutes.promise('paralle promise').then(function () {
console.log('has finished')
});
(function anonymous(source, target, routesList, _callback
) {
"use strict";
var _context;
var _x = this._x;
do {
var _counter = 2;
var _done = () => {
_callback();
};
if (_counter <= 0) break;
var _fn0 = _x[0];
var _hasResult0 = false;
var _promise0 = _fn0(source, target, routesList);
if (!_promise0 || !_promise0.then)
throw new Error('Tap function (tapPromise) did not return promise (returned ' + _promise0 + ')');
_promise0.then(_result0 => {
_hasResult0 = true;
if (--_counter === 0) _done();
}, _err0 => {
if (_hasResult0) throw _err0;
if (_counter > 0) {
_callback(_err0);
_counter = 0;
}
});
if (_counter <= 0) break;
var _fn1 = _x[1];
var _hasResult1 = false;
var _promise1 = _fn1(source, target, routesList);
if (!_promise1 || !_promise1.then)
throw new Error('Tap function (tapPromise) did not return promise (returned ' + _promise1 + ')');
_promise1.then(_result1 => {
_hasResult1 = true;
if (--_counter === 0) _done();
}, _err1 => {
if (_hasResult1) throw _err1;
if (_counter > 0) {
_callback(_err1);
_counter = 0;
}
});
} while (false);
})
AsyncSeriesHook
异步串行事件， 等一个事件完成后再执行另一个
myCar.hooks.washing.tapPromise('test', (data) => {
return new Promise(function (resolve, reject){
console.log('one ' + data)
resolve('promise one')
})
})
myCar.hooks.washing.tapPromise('test', (data) => {
return new Promise(function (resolve, reject){
console.log('two ' + data)
resolve('promise two')
})
})
myCar.hooks.washing.promise('async series').then(function () {
console.log('has finished');
});
...
(function anonymous(water
) {
"use strict";
return new Promise((_resolve, _reject) => {
var _sync = true;
function _error(_err) {
if (_sync)
_resolve(Promise.resolve().then(() => { throw _err; }));
else
_reject(_err);
};
var _context;
var _x = this._x;
function _next0() {
var _fn1 = _x[1];
var _hasResult1 = false;
var _promise1 = _fn1(water);
if (!_promise1 || !_promise1.then)
throw new Error('Tap function (tapPromise) did not return promise (returned ' + _promise1 + ')');
_promise1.then(_result1 => {
_hasResult1 = true;
_resolve();
}, _err1 => {
if (_hasResult1) throw _err1;
_error(_err1);
});
}
var _fn0 = _x[0];
var _hasResult0 = false;
var _promise0 = _fn0(water);
if (!_promise0 || !_promise0.then)
throw new Error('Tap function (tapPromise) did not return promise (returned ' + _promise0 + ')');
_promise0.then(_result0 => {
_hasResult0 = true;
_next0();
}, _err0 => {
if (_hasResult0) throw _err0;
_error(_err0);
});
_sync = false;
});
})
AsyncSeriesWaterfallHook
异步瀑布流事件， 串行事件， 将事件的结果传入下一个事件。
myCar.hooks.seriesWater.tapAsync('test', (data, cb) => {
console.log(data);
cb(null, 'the first result')
})
myCar.hooks.seriesWater.tapAsync('test', (data, cb) => {
console.log(data);
cb(null, 'the second result')
})
myCar.hooks.seriesWater.callAsync('series', (err, val) => {
console.log('finished ' + val)
})
(function anonymous(haha, _callback
) {
"use strict";
var _context;
var _x = this._x;
function _next0() {
var _fn1 = _x[1];
_fn1(haha, (_err1, _result1) => {
if (_err1) {
_callback(_err1);
} else {
if (_result1 !== undefined) {
haha = _result1;
}
_callback(null, haha);
}
});
}
var _fn0 = _x[0];
_fn0(haha, (_err0, _result0) => {
if (_err0) {
_callback(_err0);
} else {
if (_result0 !== undefined) {
haha = _result0;
}
_next0();
}
});
})
AsyncSeriesWaterfallHook & promise
异步瀑布流事件， promise版本。
myCar.hooks.other.tapPromise('test', (data) => {
return new Promise(function (resolve, reject) {
setTimeout(function () {
console.log(data)
resolve('first')
}, 0)
})
})
myCar.hooks.other.tapPromise('test', (data) => {
return new Promise(function (resolve, reject) {
setTimeout(function () {
console.log(data)
resolve('second')
}, 0)
})
})
myCar.hooks.other.promise('water promise').then(function () {
console.log('finished')
})
....
(function anonymous(other
) {
"use strict";
return new Promise((_resolve, _reject) => {
var _sync = true;
function _error(_err) {
if (_sync)
_resolve(Promise.resolve().then(() => { throw _err; }));
else
_reject(_err);
};
var _context;
var _x = this._x;
function _next0() {
var _fn1 = _x[1];
var _hasResult1 = false;
var _promise1 = _fn1(other);
if (!_promise1 || !_promise1.then)
throw new Error('Tap function (tapPromise) did not return promise (returned ' + _promise1 + ')');
_promise1.then(_result1 => {
_hasResult1 = true;
if (_result1 !== undefined) {
other = _result1;
}
_resolve(other);
}, _err1 => {
if (_hasResult1) throw _err1;
_error(_err1);
});
}
var _fn0 = _x[0];
var _hasResult0 = false;
var _promise0 = _fn0(other);
if (!_promise0 || !_promise0.then)
throw new Error('Tap function (tapPromise) did not return promise (returned ' + _promise0 + ')');
_promise0.then(_result0 => {
_hasResult0 = true;
if (_result0 !== undefined) {
other = _result0;
}
_next0();
}, _err0 => {
if (_hasResult0) throw _err0;
_error(_err0);
});
_sync = false;
});
})
