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 ~~~