淞南网站建设,找人网站 优帮云,云盘网站如何做,网页程序开发基础知识webpack plugin
webpack完成的复杂炫酷的功能依赖于插件机制#xff0c;webpack的插件机制依赖于核心的库#xff0c; tapable tapable是一个类似于nodejs的eventEmitter的库#xff0c; 主要是控制钩子函数的发布喝定于#xff0c;当时#xff0c;tapable提供您的hook机…webpack plugin
webpack完成的复杂炫酷的功能依赖于插件机制webpack的插件机制依赖于核心的库 tapable tapable是一个类似于nodejs的eventEmitter的库 主要是控制钩子函数的发布喝定于当时tapable提供您的hook机制比较全面分为同步和异步两个大类 根据事件执行的终止条件的不同
const {SyncHook} require(tapable)
const hook new SyncHook([arg1, arg2])
hook.tap(a, function(arg1, arg2) {console.log(ar)
})
hook.tap(b,function(arg1, arg2) {console.log(b)
})
hook.call(1, 2)BasicHook: 执行每一个不关心函数的返回值有SyncHook, AsyncParallelHook, AsyncSeriesHook BailHook: 顺序执行hook遇到第一个结果result!undefined则返回不在执行 SyncBailHook, AsyncSeriesBailHook, AsyncParallelBailHook
tapable sync SyncHook SyncBailHook SyncWaterfallHook SyncLoopHook Async AsyncParallel AsyncParallelHook AsyncParallelBailHook AsyncSeries AsyncSeriesHook AsyncParallelBailHook AsyncSeriesLoopHook AsyncSeriesWaterfallHook每个Hook的用法 Basic: 不关心回调函数返回值[SyncHook, AsyncParallelHook, AsyncSeriesHook] Bail: 只要其中一个监听函数的返回值不为undefined则终止执行。 [SyncBailHook, AsyncParallelHook, AsyncSeriesBailHook] waterfall: 前一个监听函数的返回值部位undefined则作为下一个监听函数的第一个参数 [SyncWaterfallHook, AsyncSeriesWaterfallHook] Loop: 如果有一个监听函数的返回值不为undefined 则终止向下执行从头开始执行直到所有监听函数的返回值为undefined。[SyncLoopHook, AsyncSeriesLoopHook]~
javascript
const {SyncHook} require(tapable)
let hook new SyncHook([name])
hook.tap(demo, function(params) {console.log(demo, params)
})
hook.tap(demo2, function(params) {console.log(demo2, params)return true
})
hook.tap(demo3, function(params) {console.log(demo3, params)
})
hook.call(hello SyncHook)class SyncHook {constructor(args []) {this._args argsthis.tasks []}tap(name, task) {this.tasks.push(task)}call(...args) {const params args.slice(0, this._args.length)this.tasks.forEash(task task(...params))}
}const {SyncBailHook} require(tapable)
let hook new SyncBailHook([name])
hook.tap(demo, function(params) {console.log(demo, params)
})
hook.tap(demo2, function(params) {console.log(demo2, params)return true
})
hook.tap(demo3, function(params) {console.log(demo3, params)
})
hook.call(hello SyncBailHook)SyncBailHook钩子遇到回调函数中返回结果不为undefined的时候则跳过下面所有的逻辑
class SyncBailHook {constructor(args) {this._args _argsthis.tasks []}tap(name, task) {this.tasks.push(task)}call() {const args Array.from(arguments).slice(0, this._args.length)for(let i 0; i this.tasks.length; i) {if(result ! undefiend) {break}}}
}SyncWaterfallHook
const {SyncWaterfallHook} require(tapable)
const hook new SyncWaterfallHook([author, age])
hook.tap(测试1, (params1, params2) {console.log(测试1接受的参数, params1, params2)
})
hook.tap(测试2, (params1, params2) {console.log(测试2接受的参数, params1, params2)
})
hook.tap(测试3,(params1, params2) {console.log(测试3接受的参数, params1, params2)
})
hook.call(嘎嘎嘎, 99)syncWaterfallHook是一个同步的瀑布类型的hook瀑布类型的钩子就是如果前一个事件的函数结果部位undefined则result会作为后一个事件函数的第一个参数也就是上一个函数的执行结果会成为下一个函数的参数
const {SyncLoopHook} require(tapable)
const hook new SyncLoopHook([])
let count 5
hook.tap(测试1, () {console.log(测试1里面的count, count)if([1, 2, 3].includes(count) {return undefiend} else {count--return 123})
})
hook.tap(测试2, () {console.log(测试2里面的count, count)if([1, 2].includes(count) {return undefiend} else {count--return 123})
})
hook.tap(测试3, () {console.log(测试3里面的count,count)if([1].includes(count) {return undefiend} else {count--return 123})
})
hook.call()syncLoophookasyncparallelHook是一个异步并行基本类型的Hook 与同步不同的地方在于
会同时开启多个异步任务而且需要通过tapSaync
const {AsyncParallelHook} require(tapable)
const hook new AsyncParallelHook([author, age])
console.log(time)
hook.tapAsync(测试1, (params1, params2) {setTimeout(() {console.log(测试1接受的参数 params1, params2)callback()}, 2000)
})
hook.tapAsync(测试2, (params1, params2, callback) {console.log(测试2接受的参数, params1, params2)callback()
})
hook.tapAsync(测试3,(params1, params2,callback) {console.log(测试3接受的参数, params1, params2)callback()
})
hook.callAsync(嘎嘎嘎, 99,(err, result) {console.log(这个是成功的回调,err, result)console.timeEnd(time)
})AsyncParallelBailHook是一个异步并行保险类型的hook只要其中一个有返回值 就会执行callAsync中的回调
const {AsyncParallelHook} require(tapable)
const hook new AsyncParallelBailHook([author, age])
console.time(time)
hook.tapAsync(测试1, (params1, params2, callback) {console.log(测试1接受的参数,params1, params2)setTimeout(() {callback()},1000)
})
hook.tapAsync(测试2, (params1,params2,callback) {console.log(测试2接受的参数,params1, params2) setTimeout(() {callback(null, 测试2有返回值)}, 2000)
})
hook.tapAsync(测试3, (params1, params2, callback) {console.log(测试3接受的参数,params1, params2)setTimeout(() {callback(null, 测试3有返回值)}, 3000)
})
hook.callAsync(嘎嘎嘎, 99, (err, result) {//等全部都完成了才会走到这里来console.log(这是成功后的回调, result);console.timeEnd(time);
});AsyncSeriesHook是一个异步的串行的类型的hook只有前面的执行完成了后面的才会执行
const {AsyncSeriesHook} require(tapable)
const hook new AsyncSeriesHook([author, age])
console.time(time)
hook.tapAsync(测试1 (params1, params2, callback) {console.log(测试1接受的参数, params1, params2)setTimeout(() {callback()}, 1000)
})
hook.tapAsync(测试2 (params1, params2, callback) {console.log(测试2接受的参数, params1, params2)setTimeout(() {callback()}, 2000)
})
hook.tapAsync(测试3 (params1, params2, callback) {console.log(测试3接受的参数, params1, params2)setTimeout(() {callback()}, 3000)
})
console.timeEnd()AsyncSeriesBailHook 是一个异步串行保险类型的hook在串行的执行过程中只要其中一个有返回值后面就不会执行
const {AsyncSeriesBailHook} require(tapable)
const hook new AsyncParallelHook([author, age])
hook.tapAsync(测试1,(params1, params2, callback) {console.log(测试1接受的参数,params1, params2)setTimeout(() {callback()}, 1000)
})
hook.tapAsync(测试2,(params1, params2,callback) {console.log(测试2接受的参数,params1, params2)setTimeout(() {callback()}, 2000)
})
hook.tapAsync(测试3,(params1, params2,callback) {console.log(测试3接受的参数,params1, params2)setTimeout(() {callback()}, 3000)
})
hook.callAsync(嘎嘎嘎, 99, (err, result) {//等全部都完成了才会走到这里来console.log(这是成功后的回调, result);console.timeEnd(time);
});AsyncSeriesWaterfallHook是一个异步串行瀑布类型的hook 如果前一个事件函数的结果result!undefined,则result会作为后一个事件函数的第一个参数也就是上一个函数的执行结果会称为下一个函数的参数
const {AsyncSeriesWaterfallHook} require(tapable)
const hook new AsyncSeriesWaterfallHook([author, age])
console.time(time)
hook.tapAsync(测试1, (params1, params2, callback) {console.log(测试1接受的参数, params1, params2)setTimeout(() {callback(() {callback(null, 2)}, 1000)})
})
hook.tapAsync(测试2, (params1, params2, callback) {console.log(测试2接受的参数, params1, params2)setTimeout(() {callback(null, 3)},2000)
})
hook.tapAsync(测试3, (param1, param2, callback) {console.log(测试3接收的参数, param1, param2);setTimeout(() {callback(null, 4);}, 3000);
});hook.callAsync(嘎嘎嘎, 99, (err, result) {//等全部都完成了才会走到这里来console.log(这是成功后的回调, err, result);console.timeEnd(time);
});Tapable拦截器 Tapable提供的所有的hook都支持注入Interception它和Axios的拦截器的效果非常类似,可以通过拦截器对整个Tapable发布/订阅流程进行监听从而触发对应的逻辑
const hook new SyncHook([arg1, arg2, arg3])
hook.intercept({// 每次调用hook实例的tap方法注册回调函数的时候就会调用该方法// 并且接受tap作为参数还可以对tap进行修改register: (tapInfo) {console.log(${tapInfo.name} is doing its job)return tapInfo},// 通过hook实例对象上的call方法时候触发拦截器call: (arg1, arg2, arg3) {console.log(starting to calculate routes)}// 在调用被注册的每一个事件函数之前执行tap: (tap) {console.log(tap, tap))}// loop类型钩子中每个事件函数被调用前触发拦截器方法 loop:(...args) {console.log(args, loop)}
})
