语法

2024年04月06日

柏拉文

越努力，越幸运

一、SyncHook

---

SyncHook 是最基础的同步钩子：

import { SyncHook } from "tapable";

// 初始化 syncHook 钩子
const syncHook = new SyncHook(["arg1","arg2","arg3"]);

// 注册 syncHook 钩子
syncHook.tap("syncHook1", (arg1,arg2,arg3)=>{
    console.log("syncHook1",arg1,arg2,arg3);
});

syncHook.tap("syncHook2", (arg1,arg2,arg3)=>{
    console.log("syncHook2",arg1,arg2,arg3);
});


// 触发 syncHook 钩子
setTimeout(()=>{
    syncHook.call(1,2,3);
},3000);

二、SyncBailHook

---

SyncBailHook 中如果任何事件函数存在返回值，那么会立即中断后续事件函数的调用：

import { SyncBailHook } from "tapable"

// 初始化 SyncBailHook 钩子
const syncBailHook = new SyncBailHook(['arg1','arg2','arg3']);


// 注册 SyncBailHook 钩子
syncBailHook.tap('syncBailHook1',(arg1,arg2,arg3)=>{
    console.log('syncBailHook1',arg1,arg2,arg3);
});
syncBailHook.tap('syncBailHook2',(arg1,arg2,arg3)=>{
    console.log('syncBailHook2',arg1,arg2,arg3);
    // 存在返回值，后续的钩子不再执行
    return true;
});
syncBailHook.tap('syncBailHook3',(arg1,arg2,arg3)=>{
    console.log('syncBailHook3',arg1,arg2,arg3);
});

// 触发 SyncBailHook 钩子
setTimeout(()=>{
    syncBailHook.call(1,2,3);
},3000);

三、SyncWaterfallHook

---

SyncWaterfallHook 瀑布钩子会将上一个函数的返回值传递给下一个函数作为参数：

import { SyncWaterfallHook } from "tapable";

// 初始化 SyncWaterfallHook 钩子
const syncWaterfallHook = new SyncWaterfallHook(['arg1','arg2','arg3']);

// 注册 SyncWaterfallHook 钩子
syncWaterfallHook.tap('syncWaterfallHook1',(arg1,arg2,arg3)=>{
    console.log('syncWaterfallHook1',arg1,arg2,arg3);
    return 1;
});
syncWaterfallHook.tap('syncWaterfallHook2',(arg1,arg2,arg3)=>{
    console.log('syncWaterfallHook2',arg1,arg2,arg3);
    return 2;
});
syncWaterfallHook.tap('syncWaterfallHook3',(arg1,arg2,arg3)=>{
    console.log('syncWaterfallHook3',arg1,arg2,arg3);
});

// 触发 SyncWaterfallHook 钩子
setTimeout(()=>{
    syncWaterfallHook.call(1,2,3);
});

四、SyncLoopHook

---

SyncLoopHook 会在任意一个被监听的函数存在非 undefined 返回值时返回重头开始执行：

import { SyncLoopHook } from "tapable";

let flag1 = 2;
let flag2 = 1;

// 初始化 SyncLoopHook 钩子
const syncLoopHook = new SyncLoopHook(['arg1','arg2','arg3']);

// 注册 SyncLoopHook 钩子
syncLoopHook.tap('syncLoopHook1',(arg1,arg2,arg3)=>{
    console.log('syncLoopHook1',arg1,arg2,arg3);
    if(flag1 !== 3){
        return flag1++;
    }
});
syncLoopHook.tap('syncLoopHook2',(arg1,arg2,arg3)=>{
    console.log('syncLoopHook2',arg1,arg2,arg3);
    if(flag2 !== 3){
        return flag2++;
    }
});

// 触发 SyncLoopHook 钩子
setTimeout(()=>{
    syncLoopHook.call(1,2,3);
});

五、AsyncSeriesHook

---

AsyncSeriesHook 表示异步串联执行:

import { AsyncSeriesHook } from 'tapable';

// 初始化 AsyncSeriesHook 钩子
const asyncSeriesHook = new AsyncSeriesHook(['arg1', 'arg2', 'arg3']);

// 注册 AsyncSeriesHook 钩子
asyncSeriesHook.tapAsync('asyncSeriesHook1', (arg1, arg2, arg3, callback) => {
  console.log('asyncSeriesHook1', arg1, arg2, arg3);
  setTimeout(() => {
    // 调用 callback 表示当前注册的函数执行完毕
    callback();
  }, 1000);
});

asyncSeriesHook.tapPromise('asyncSeriesHook2', (arg1, arg2, arg3) => {
  console.log('asyncSeriesHook2', arg1, arg2, arg3);
  return new Promise(resolve => {
    setTimeout(() => {
      resolve();
    }, 2000);
  });
});

asyncSeriesHook.tapAsync('asyncSeriesHook3', (arg1, arg2, arg3, callback) => {
  console.log('asyncSeriesHook3', arg1, arg2, arg3);
  setTimeout(() => {
    //  callback 函数调用时, 第一个参数表示错误对象，如果传递第一个参数的话那么就表示本次执行出现错误会中断执行
    callback('error');
  }, 1000);
});

asyncSeriesHook.tapPromise('asyncSeriesHook4', (arg1, arg2, arg3) => {
  console.log('asyncSeriesHook4', arg1, arg2, arg3);
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // 如果 Promise 返回的结果是 reject 状态，那么和 callback 传递错误参数同样效果，也会中断后续的执行
      reject('error');
    }, 2000);
  });
});

asyncSeriesHook.tapAsync('asyncSeriesHook5', (arg1, arg2, arg3, callback) => {
  console.log('asyncSeriesHook5', arg1, arg2, arg3);
  setTimeout(() => {
    callback();
  }, 1000);
});

// 触发 AsyncSeriesHook 钩子
console.time('timer');
asyncSeriesHook.callAsync('1', '2', '3', () => {
  console.log('全部执行完毕');
  console.timeEnd('timer');
});

六、AsyncSeriesBailHook

---

AsyncSeriesBailHook 表示异步串行保险钩子:

import { AsyncSeriesBailHook } from 'tapable';

// 初始化 AsyncSeriesBailHook 实例
const asyncSeriesBailHook = new AsyncSeriesBailHook(['arg1', 'arg2', 'arg3']);

// 注册 AsyncSeriesBailHook 钩子
asyncSeriesBailHook.tapAsync(
  'asyncSeriesBailHook1',
  (arg1, arg2, arg3, callback) => {
    console.log('asyncSeriesBailHook1', arg1, arg2, arg3);
    setTimeout(() => {
      // callback 第一个参数表示错误信息, 为null表示没有错误; 第二个参数表示 callback 的返回值
      // 存在返回值 bail 保险打开 中断后续执行
      callback(null,true);
    }, 1000);
  }
);
asyncSeriesBailHook.tapPromise('asyncSeriesBailHook2', (arg1, arg2, arg3) => {
  console.log('asyncSeriesBailHook2', arg1, arg2, arg3);
  return new Promise(resolve => {
    setTimeout(() => {
      // resolve函数存在任何值表示存在返回值
      // 存在返回值 bail 保险打开 中断后续执行
      resolve(true);
    }, 2000);
  });
});
asyncSeriesBailHook.tapAsync(
  'asyncSeriesBailHook3',
  (arg1, arg2, arg3, callback) => {
    console.log('asyncSeriesBailHook3', arg1, arg2, arg3);
    setTimeout(() => {
      callback();
    }, 3000);
  }
);

// 触发 AsyncSeriesBailHook 钩子
console.time('timer');
asyncSeriesBailHook.callAsync('arg1', 'arg2', 'arg3', () => {
  console.log('全部执行完毕');
  console.timeEnd('timer');
});

七、AsyncSeriesWaterfallHook

---

AsyncSeriesWaterfallHook 异步串行瀑布钩子：

import { AsyncSeriesWaterfallHook } from 'tapable';

// 初始化 AsyncSeriesWaterfallHook 实例
const asyncSeriesWaterfallHook = new AsyncSeriesWaterfallHook([
  'arg1',
  'arg2',
  'arg3'
]);

// 注册 AsyncSeriesWaterfallHook 钩子
asyncSeriesWaterfallHook.tapAsync(
  'asyncSeriesWaterfallHook1',
  (arg1, arg2, arg3, callback) => {
    console.log('asyncSeriesWaterfallHook1', arg1, arg2, arg3);
    setTimeout(() => {
      callback(null, 1);
    }, 1000);
  }
);

asyncSeriesWaterfallHook.tapPromise(
  'asyncSeriesWaterfallHook2',
  (arg1, arg2, arg3) => {
    console.log('asyncSeriesWaterfallHook2', arg1, arg2, arg3);
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(2);
      }, 2000);
    });
  }
);

asyncSeriesWaterfallHook.tapAsync(
  'asyncSeriesWaterfallHook3',
  (arg1, arg2, arg3, callback) => {
    console.log('asyncSeriesWaterfallHook3', arg1, arg2, arg3);
    setTimeout(() => {
      callback();
    }, 3000);
  }
);

// 触发 AsyncSeriesWaterfallHook 钩子
console.time('timer');
asyncSeriesWaterfallHook.callAsync(1, 2, 2, () => {
  console.log('全部执行完毕');
  console.timeEnd('timer');
});

八、AsyncParallelHook

---

AsyncParallelHook 异步并行钩子，会并发执行所有异步钩子：

import { AsyncParallelHook } from "tapable";

// 初始化 AsyncParallelHook 实例
const asyncParallelHook = new AsyncParallelHook(["arg1", "arg2", "arg3"]);

// 注册 AsyncParallelHook 钩子
asyncParallelHook.tapAsync("asyncParallelHook1", (arg1, arg2, arg3, callback) => {
    console.log("asyncParallelHook1", arg1, arg2, arg3);
    setTimeout(() => {
        callback();
    }, 1000);
});
asyncParallelHook.tapPromise("asyncParallelHook2", (arg1, arg2, arg3) => {
    console.log("asyncParallelHook2", arg1, arg2, arg3);
    return new Promise(resolve => {
        setTimeout(() => {
            resolve();
        }, 2000);
    });
});

// 触发 AsyncParallelHook 钩子
console.time("timer");
asyncParallelHook.callAsync("arg1", "arg2", "arg3", () => {
    console.log("全部执行完毕");
    console.timeEnd("timer");
});

九、AsyncParallelBailHook

---

AsyncParallelBailHook 异步并行保险钩子。

import { AsyncParallelBailHook } from 'tapable';

// 初始化 AsyncParallelBailHook 实例
const asyncParallelBailHook = new AsyncParallelBailHook([
  'arg1',
  'arg2',
  'arg3'
]);

// 注册 AsyncParallelBailHook 钩子
asyncParallelBailHook.tapAsync(
  'asyncParallelBailHook1',
  (arg1, arg2, arg3, callback) => {
    console.log('asyncParallelBailHook1', arg1, arg2, arg3);
    setTimeout(() => {
      callback(null, true);
    }, 1000);
  }
);
asyncParallelBailHook.tapPromise(
  'asyncParallelBailHook2',
  (arg1, arg2, arg3) => {
    console.log('asyncParallelBailHook2', arg1, arg2, arg3);
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(true);
      }, 2000);
    });
  }
);

// 触发 AsyncParallelBailHook 钩子
console.time('timer');
asyncParallelBailHook.callAsync('arg1', 'arg2', 'arg3', () => {
  console.log('全部执行完毕');
  console.timeEnd('timer');
});