tapable
![tapable事件流插件-LMLPHP]( "tapable事件流插件-LMLPHP")
const {
SyncHook,
SyncBailHook,
SyncWaterfallHook,
SyncLoopHook,
AsyncParallelHook,
AsyncParallelBailHook,
AsyncSeriesHook,
AsyncSeriesBailHook,
AsyncSeriesWaterfallHook
} = require("tapable");
SyncHook
//钩子可以在stage和其他钩子之间穿插钩子
const hook = new SyncHook()
const calls = [];
hook.tap("A",() => calls.push("A"))
hook.tap({
name:"B",
before:"A"
},() => calls.push("B"))
calls.length = 0
hook.call()
hook.tap({
name:"C",
before:["A","B"]
},() => calls.push("C"))
calls.length = 0
hook.call()
hook.tap({
name:"D",
before:"B"
},() => calls.push("D"))
calls.length = 0;
hook.call()
hook.tap({
name:"E",
stage:3
},() => calls.push("E"))
hook.tap({
name:"F",
stage:1
},() => calls.push("F"))
calls.length = 0;
hook.call()
console.log(calls)
//创建同步钩子
const h0 = new SyncHook(["arg1"]);
h0.tap("A",(name) => {
console.log(name)
})
h0.tap("B",(name) => {
console.log(name)
})
h0.call('plus',24)
SyncBailHook
const h1 = new SyncBailHook(["a"]);
h1.tap("A",a => {console.log(a) ;return a})
h1.tap("B",a => console.log(a))
h1.call(1)
SyncWaterfallHook
const h1 = new SyncWaterfallHook(['name'])
h1.tap("A",(name) => {
console.log(name,1)
})
h1.tap("B",(data) => {
console.log(data,2)
return 2
})
h1.tap("C",(data) => {
console.log(data,3)
return 3
})
h1.call('plus',24)
SyncLoopHook
const h1 = new SyncLoopHook(['name'])
let count = 0
h1.tap('A',name => (
count < 3 ?
(count++,console.log(name),true)
:undefined
))
h1.call(
'plus'
)
AsyncParallelHook
const h1 = new AsyncParallelHook(['name'])
h1.tap('A',() => console.log(1))
h1.tap('B',() => console.log(2))
h1.tap('C',() => console.log(3))
h1.callAsync('test',err => {
console.log(err)
})
const h1 = new AsyncParallelHook(['name'])
console.time('count')
h1.tapAsync('A',(name,callback) => {
setTimeout(() => (console.log(1),callback()),2000)
})
h1.tapAsync('B',(name,callback) => {
setTimeout(() => (console.log(2),callback()),1000)
})
h1.tapAsync('C',(name,callback) => {
setTimeout(() => (console.log(3),callback()),3000)
})
h1.callAsync('test',err => {
console.log(err)
console.timeEnd('count')
})
const h1 = new AsyncParallelHook(['name'])
console.time('count')
h1.tapPromise('A',(name,callback) => (
new Promise((resolve,reject) => {
setTimeout(() => (console.log(1),resolve()),2000)
})
))
h1.tapPromise('B',(name,callback) => (
new Promise((resolve,reject) => {
setTimeout(() => (console.log(2),resolve()),1000)
})
))
h1.tapPromise('C',(name,callback) => (
new Promise((resolve,reject) => {
setTimeout(() => (console.log(3),resolve()),3000)
})
))
h1.callAsync('test',err => {
console.log(err)
console.timeEnd('count')
})
AsyncParallelBailHook
let h1=new AsyncParallelBailHook(['name']);
console.time('count');
h1.tap('A',function(name){
console.log(1);
return "Wrong";
});
h1.tap('B',function(name){
console.log(2);
});
h1.tap('C',function(name){
console.log(3);
});
h1.callAsync('test',err=>{
console.log(err);
console.timeEnd('count');
});
let h1=new AsyncParallelBailHook(['name']);
console.time('count');
h1.tapAsync('A',function(name,callback){
console.log(1);
return "Wrong";
});
h1.tapAsync('B',function(name,callback){
console.log(2);
});
h1.tapAsync('C',function(name.callback){
console.log(3);
});
h1.callAsync('test',err=>{
console.log(err);
console.timeEnd('count');
});
const h1 = new AsyncParallelBailHook(['name'])
console.time('count')
h1.tapPromise('A',(name,callback) => (
new Promise((resolve,reject) => {
setTimeout(() => (console.log(1),resolve()),2000)
})
))
h1.tapPromise('B',(name,callback) => (
new Promise((resolve,reject) => {
setTimeout(() => (console.log(2),resolve()),1000)
})
))
h1.tapPromise('C',(name,callback) => (
new Promise((resolve,reject) => {
setTimeout(() => (console.log(3),resolve()),3000)
})
))
h1.callAsync('test',err => {
console.log(err)
console.timeEnd('count')
})
AsyncSeriesHook
let h1 = new AsyncSeriesHook(['name']);
console.time('cost');
h1.tap('A',function(name){
console.log(1);
});
h1.tap('B',function(name){
console.log(2);
});
h1.tap('C',function(name){
console.log(3);
});
h1.callAsync('test',err=>{
console.log(err);
console.timeEnd('cost');
});
let h1 = new AsyncSeriesHook(['name']);
console.time('cost');
h1.tapAsync('A',function(name,callback){
setTimeout(function(){
console.log(1);
callback()
},1000)
});
h1.tapAsync('B',function(name,callback){
setTimeout(function(){
console.log(2);
callback()
},2000)
});
h1.tapAsync('C',function(name,callback){
setTimeout(function(){
console.log(3);
callback()
},3000)
});
h1.callAsync('test',err=>{
console.log(err);
console.timeEnd('cost');
});
let h1=new AsyncSeriesHook(['name']);
console.time('cost');
h1.tapPromise('A',function(name){
return new Promise(function(resolve){
setTimeout(function(){
console.log(1);
resolve();
},1000)
});
});
h1.tapPromise('B',function(name,callback){
return new Promise(function(resolve){
setTimeout(function(){
console.log(2);
resolve();
},2000)
});
});
h1.tapPromise('C',function(name,callback){
return new Promise(function(resolve){
setTimeout(function(){
console.log(3);
resolve();
},3000)
});
});
h1.promise('test').then(data=>{
console.log(data);
console.timeEnd('cost');
});
AsyncSeriesBailHook
let h1 = new AsyncSeriesBailHook(['name']);
console.time('cost');
h1.tap('A',function(name){
console.log(1);
return "Wrong";
});
h1.tap('B',function(name){
console.log(2);
});
h1.tap('C',function(name){
console.log(3);
});
h1.callAsync('test',err=>{
console.log(err);
console.timeEnd('cost');
});
let h1 = new AsyncSeriesBailHook(['name']);
console.time('cost');
h1.tapAsync('A',function(name,callback){
setTimeout(function(){
console.log(1);
callback('wrong')
},1000)
});
h1.tapAsync('B',function(name,callback){
setTimeout(function(){
console.log(2);
callback()
},2000)
});
h1.tapAsync('C',function(name,callback){
setTimeout(function(){
console.log(3);
callback()
},3000)
});
h1.callAsync('test',err=>{
console.log(err);
console.timeEnd('cost');
});
const h1 = new AsyncSeriesBailHook(['name'])
console.time('count')
h1.tapPromise('A',(name,callback) => (
new Promise((resolve,reject) => {
setTimeout(() => (console.log(1),reject()),2000)
})
))
h1.tapPromise('B',(name,callback) => (
new Promise((resolve,reject) => {
setTimeout(() => (console.log(2),resolve()),1000)
})
))
h1.tapPromise('C',(name,callback) => (
new Promise((resolve,reject) => {
setTimeout(() => (console.log(3),resolve()),3000)
})
))
h1.promise('test',err => {
console.log(err)
console.timeEnd('count')
},err => {
console.log(err);
console.timeEnd('cost');
})
AsyncSeriesWaterfallHook
let {AsyncSeriesWaterfallHook} = require('tapable');
let h1 = new AsyncSeriesWaterfallHook(['name']);
console.time('cost');
h1.tap('1',function(name,callback){
console.log(1);
});
h1.tap('2',function(data){
console.log(2,data);
});
h1.tap('3',function(data){
console.log(3,data);
});
queue.callAsync('test',err=>{
console.log(err);
console.timeEnd('cost');
});
let h1 = new AsyncSeriesWaterfallHook(['name']);
console.time('cost');
h1.tapAsync('1',function(name,callback){
setTimeout(function(){
console.log(1);
callback(null,1);
},1000)
});
h1.tapAsync('2',function(data,callback){
setTimeout(function(){
console.log(2);
callback(null,2);
},2000)
});
h1.tapAsync('3',function(data,callback){
setTimeout(function(){
console.log(3);
callback(null,3);
},3000)
});
h1.callAsync('test',(err,data)=>{
console.log(err,data);
console.timeEnd('cost');
});
let h1 = new AsyncSeriesWaterfallHook(['name']);
console.time('cost');
h1.tapPromise('1', function (name) {
return new Promise(function (resolve) {
setTimeout(function () {
console.log(name, 1);
resolve(1);
}, 1000);
});
});
h1.tapPromise('2', function (data) {
return new Promise(function (resolve) {
setTimeout(function () {
console.log(data, 2);
resolve(2);
}, 2000);
});
});
h1.tapPromise('3', function (data) {
return new Promise(function (resolve) {
setTimeout(function () {
console.log(data, 3);
resolve(3);
}, 3000);
});
});
h1.promise('test').then(err => {
console.timeEnd('cost');
});
tapable
class MyPlugin {
constructor(){
this.hooks = {
add:new SyncHook(['name'])
}
}
}
const myPlugin = new MyPlugin()
myPlugin.hooks.add.tap('add',(name) => {
console.log(name)
})
myPlugin.hooks.add.tap('minus',(name) => {
console.log(name)
})
myPlugin.hooks.add.call('plus')