Tapable 使用时通常需要经历如下步骤:
- 创建钩子实例
- 调用订阅接口注册回调,包括:tap、tapAsync、tapPromise
- 调用发布接口触发回调,包括:call、callAsync、promise
我们可以源码查看下 Tapable 导出的 hooks,包含了以下几种
- SyncHook
- SyncBailHook
- SyncWaterfallHook
- SyncLoopHook
- AsyncParallelHook
- AsyncParallelBailHook
- AsyncSeriesHook
- AsyncSeriesBailHook
- AsyncSeriesLoopHook
- AsyncSeriesWaterfallHook
我们可以将 Tapable 的 hooks 分为同步和异步,
- 以 sync 开头的,是同步的Hook
- 以 asyn开头的,两个事件处理回调,不会等待上一次处理回调结束后再执行下一次回调
我们也可以按其他的类别分类
- bail: 当有返回值时,就不会执行后续的事件触发了
- Loop: 当返回值为true,就会反复执行该事件,当返回值为undefined或者不返回内容,就退出事件
- Waterfall: 当返回值不为undefined时,会将这次返回的结果作为下次事件的第一个参数
- Parallel: 并行,会同时执行此事件处理回调结束,才执行下一次事件处理回调
- Series: 串行,会等待上一是异步的Hook
举个例子:
const { SyncWaterfallHook } = require('tapable')
class MyTapable {
constructor() {
this.hooks = {
syncWaterfallHook: new SyncWaterfallHook(['myName', 'myAge'])
}
this.on()
}
// 注册
on() {
this.hooks.syncWaterfallHook.tap('myTap1', (name, age) => {
console.log('myTap1', name, age)
return '20'
})
this.hooks.syncWaterfallHook.tap('myTap2', (name, age) => {
console.log('myTap2', name, age)
})
}
// 初始化
emit() {
this.hooks.syncWaterfallHook.call('17', 18)
}
}
const tapable = new MyTapable()
tapable.emit()
参考