tapable · 前端筆記

[TOC] # 同步 ## SyncHook ~~~ // SyncHook 鉤子的使用 const { SyncHook } = require('tapable') // 創建實例 let syncHook = new SyncHook(['name', 'age']) // 注冊事件 syncHook.tap('1', (name, age) => console.log('1', name, age)) syncHook.tap('2', (name, age) => console.log('2', name, age)) syncHook.tap('3', (name, age) => console.log('3', name, age)) // 注冊一個攔截器 syncHook.intercept({ // 當你的鉤子觸發之前,(就是call()之前),就會觸發這個函數,你可以訪問鉤子的參數 // 多個鉤子執行一次 call: (name, age) => { console.log('---------------call start---------------') console.log(name, age); console.log('---------------call end-----------------\n\n') }, // 每個鉤子執行之前(多個鉤子執行多個),就會觸發這個函數 tap: (tap) => { console.log('---------------tap start---------------') console.log(tap) console.log('---------------tap end---------------\n\n') }, // 每添加一個Tap都會觸發你interceptor上的register,你下一個攔截器的register 函數得到的參數取決于你上一個register返回的值 // 所以你最好返回一個 tap 鉤子 register: (tapInfo) => { console.log('---------------register start---------------') console.log(tapInfo); console.log('---------------register end---------------\n\n') return tapInfo; // may return a new tapInfo object } }) // 觸發事件，讓監聽函數執行 syncHook.call('panda', 18) // 1 panda 18 // 2 panda 18 // 3 panda 18 ~~~ ## SyncBailHook ~~~ const { SyncBailHook } = require("tapable"); // 接收一個可選的字符串數組參數 // complier.hooks let queue = new SyncBailHook(['name', 'age']) queue.tap('2', function(name, age) { console.log(name, age) }) queue.tap('2', function(name, age) { console.log(name, age) return 2 }) queue.tap('2', function(name, age) { console.log(name, age) return 3 }) queue.call('suwa', 5) // suwa 4 // suwa 6 ~~~ ## SyncLoopHook ~~~ // SyncLoopHook 鉤子的使用 const { SyncLoopHook } = require("tapable"); // 創建實例 let syncLoopHook = new SyncLoopHook(["name", "age"]); // 定義輔助變量 let total1 = 0; let total2 = 0; // 注冊事件 syncLoopHook.tap("1", (name, age) => { console.log("1", name, age, total1); return total1++ < 2 ? true : undefined; }); syncLoopHook.tap("2", (name, age) => { console.log("2", name, age, total2); return total2++ < 2 ? true : undefined; }); syncLoopHook.tap("3", (name, age) => console.log("3", name, age)); // 觸發事件，讓監聽函數執行 syncLoopHook.call("panda", 18); // 1 panda 18 0 // 1 panda 18 1 // 1 panda 18 2 // 2 panda 18 0 // 2 panda 18 1 // 2 panda 18 2 // 3 panda 18 ~~~ ## SyncWaterfallHook ~~~ // SyncLoopHook 鉤子的使用 const { SyncLoopHook } = require("tapable"); // 創建實例 let syncLoopHook = new SyncLoopHook(["name", "age"]); // 定義輔助變量 let total1 = 0; let total2 = 0; // 注冊事件 syncLoopHook.tap("1", (name, age) => { console.log("1", name, age, total1); return total1++ < 2 ? true : undefined; }); syncLoopHook.tap("2", (name, age) => { console.log("2", name, age, total2); return total2++ < 2 ? true : undefined; }); syncLoopHook.tap("3", (name, age) => console.log("3", name, age)); // 觸發事件，讓監聽函數執行 syncLoopHook.call("panda", 18); // 1 panda 18 0 // 1 panda 18 1 // 1 panda 18 2 // 2 panda 18 0 // 2 panda 18 1 // 2 panda 18 2 // 3 panda 18 ~~~ # 異步 ## AsyncParallelHook ~~~ // AsyncParallelHook 鉤子：tapAsync/callAsync 的使用 const { AsyncParallelHook } = require("tapable"); // 創建實例 let asyncParallelHook = new AsyncParallelHook(["name", "age"]); /** * * promise * */ // 注冊事件 console.time("time"); asyncParallelHook.tapPromise("1", (name, age) => { return new Promise((resolve, reject) => { setTimeout(() => { console.log("1", name, age, new Date()); resolve("1"); }, 1000); }); }); asyncParallelHook.tapPromise("2", (name, age) => { return new Promise((resolve, reject) => { setTimeout(() => { console.log("2", name, age, new Date()); resolve("2"); }, 2000); }); }); asyncParallelHook.tapPromise("3", (name, age) => { return new Promise((resolve, reject) => { setTimeout(() => { console.log("3", name, age, new Date()); resolve("3"); console.timeEnd("time"); }, 3000); }); }); // 觸發事件，讓監聽函數執行 asyncParallelHook.promise("panda", 18).then(ret => { console.log(ret); }); ~~~ ## AsyncSeriesHook ~~~ const { AsyncSeriesHook } = require("tapable"); // 創建實例 let asyncSeriesHook = new AsyncSeriesHook(["name", "age"]); // 注冊事件 console.time("time"); asyncSeriesHook.tapPromise("1", (name, age) => { return new Promise((resolve, reject) => { setTimeout(() => { console.log("1", name, age, new Date()); resolve("1"); }, 1000); }); }); asyncSeriesHook.tapPromise("2", (name, age) => { return new Promise((resolve, reject) => { setTimeout(() => { console.log("2", name, age, new Date()); resolve("2"); }, 2000); }); }); asyncSeriesHook.tapPromise("3", (name, age) => { return new Promise((resolve, reject) => { setTimeout(() => { console.log("3", name, age, new Date()); resolve("3"); console.timeEnd("time"); }, 3000); }); }); // 觸發事件，讓監聽函數執行 asyncSeriesHook.promise("panda", 18).then(ret => { console.log(ret); }); // 1 panda 18 2019-05-19T15:21:44.485Z // 2 panda 18 2019-05-19T15:21:46.504Z // 3 panda 18 2019-05-19T15:21:49.506Z // time: 6025.957ms // undefined ~~~