Webpack本质上是一种事件流的机制，它的工作流程就是将各个插件串联起来，而实现这一切的核心就是Tapable，Tapable有点类似于nodejs的events库，核心原理也是依赖发布订阅模式(本节内容旨在为后续文章——手写webpack做基础用，内容略枯燥，可跳过)
const {
SyncHook,
SyncBailHook,
SyncWaterfallHook,
SyncLoopHook,
AsyncParallelHook,
AsyncParallelBailHook,
AsyncSeriesHook,
AsyncSeriesBailHook,
AsyncSeriesWaterfallHook,
} = require('tapable')
1.SyncHook （普通同步钩子）
SyncHook类似发布订阅模式，通俗的来讲，依次注册多个事件，然后触发，注册的事件依次执行
//这是tapable自己的SyncHook
tap.js
let { SyncHook } = require("tapable");
class Lesson {
constructor() {
this.hooks = {
arch: new SyncHook(["name"]) //此处的“name”,只是为了方便开发者阅读，语义化,数组中可以传递多个参数，当然，执行的时候，你就必须传递对应数量的实参
};
}
tap() {
//注册监听事件
this.hooks.arch.tap("aaa", function(a) { // 'aaa'和'bbb'是事件标识，没有别的意义
console.log("aaa", a);
});
this.hooks.arch.tap("bbb", function(a) {
console.log("bbb", a);
});
}
start() {
this.hooks.arch.call("lc"); // 此处的‘lc’就对应了上边的‘name’
}
}
let l = new Lesson();
l.tap(); // 注册这两个事件
l.start(); // 启动钩子
运行
231824.png
现在，我们来模拟SyncHook
//syncHook.js
class SyncHook { // 同步钩子
constructor(args) { args => ['name']
this.tasks = [];
}
tap(name, task) {
this.tasks.push(task);
}
call(...args) { //因为参数是数组，所以此处使用扩展运算符
this.tasks.forEach((task) => task(...args))
}
}
let hook = new SyncHook(['name'])
hook.tap('aaa', function(name){
console.log('aaa', name);
})
hook.tap("bbb", function(name) {
console.log("bbb", name);
});
hook.call('lc') //依次执行tasks中的函数
2.SyncBailHook(同步“熔断”钩子)
执行一个钩子的时候，有一个判断机制，是否执行下一个钩子
//tap.js
let { SyncBailHook } = require("tapable");
class Lesson {
constructor() {
this.hooks = {
arch: new SyncBailHook(["name"]) //此处的“name”,只是为了方便开发者阅读，语义化
};
}
tap() {
//注册监听事件
this.hooks.arch.tap("aaa", function(a) {
// 'aaa'和'bbb'是事件标识，没有别的意义
console.log("aaa", a);
return "我不想往下执行了"; // 当某个钩子返回的不是“undefined”的时候，那么运行将在此处截至，后边的钩子不会执行。
});
this.hooks.arch.tap("bbb", function(a) {
console.log("bbb", a);
});
}
start() {
this.hooks.arch.call("lc");
}
}
let l = new Lesson();
l.tap(); // 注册这两个事件
l.start(); // 启动钩子
运行后
33941.png
模拟
//SyncBailHook.js
class SyncBailHook {
// 同步钩子
constructor(args) {
//args => ["name"];
this.tasks = [];
}
tap(name, task) {
this.tasks.push(task);
}
call(...args) {
let ret; //当前这个函数的返回值
let index = 0; // 当前要执行第一个
do {
ret = this.tasks[index++](...args);
} while (ret === undefined && index < this.tasks.length); //返回undefined或者没有把tasks执行完
}
}
let hook = new SyncBailHook(["name"]);
hook.tap("aaa", function(name) {
console.log("aaa", name);
return "不往后执行了";
});
hook.tap("bbb", function(name) {
console.log("bbb", name);
});
hook.call("lc");
3. SyncWaterfallHook （上一个函数与下一个函数有关联（上一个的返回值会交给下一个））
//tap.js
let { SyncWaterfallHook } = require("tapable");
class Lesson {
constructor() {
this.hooks = {
arch: new SyncWaterfallHook(["name"]) //此处的“name”,只是为了方便开发者阅读，语义化
};
}
tap() {
//注册监听事件
this.hooks.arch.tap("aaa", function(a) {
// 'aaa'和'bbb'是事件标识，没有别的意义
console.log("aaa", a);
return "后边的函数会用到我";
});
this.hooks.arch.tap("bbb", function(data) {
console.log("bbb", data);
});
}
start() {
this.hooks.arch.call("lc");
}
}
let l = new Lesson();
l.tap(); // 注册这两个事件
l.start(); // 启动钩子
结果：
4934.png
可以看到，第二个函数接收到了第一个的返回结果，并且将其打印了出来。mock
//mock.js
class SyncWaterfallHook {
// 同步钩子
constructor(args) {
//args => ["name"];
this.tasks = [];
}
tap(name, task) {
this.tasks.push(task);
}
call(...args) {
let [first, ...others] = this.tasks;
let ret = first(...args);
others.reduce((prev, next) => {
return next(prev);
}, ret);
}
}
let hook = new SyncWaterfallHook(["name"]);
hook.tap("aaa", function(name) {
console.log("aaa", name);
return "我是第一个返回值";
});
hook.tap("bbb", function(data) {
console.log("bbb", data);
return "我是第二个返回值";
});
hook.tap("ccc", function(data) {
console.log("ccc", data);
});
hook.call("lc");
结果
00114.png
4.SyncLoopHook (遇到某个钩子，会循环执行)
//SyncLoopHook.js
let { SyncLoopHook } = require("tapable");
// 同步遇到某个不返回undefined的监听函数会多次执行
class Lesson {
constructor() {
this.index = 0;
this.hooks = {
arch: new SyncLoopHook(["name"]) //此处的“name”,只是为了方便开发者阅读，语义化
};
}
tap() {
//注册监听事件
this.hooks.arch.tap("aaa", a => {
// 'aaa'和'bbb'是事件标识，没有别的意义
console.log("aaa", a);
return ++this.index === 3 ? undefined : "执行后边的";
});
this.hooks.arch.tap("bbb", function(data) {
console.log("bbb", data);
});
}
start() {
this.hooks.arch.call("lc");
}
}
let l = new Lesson();
l.tap(); // 注册这两个事件
l.start(); // 启动钩子
结果：
200643.png
模拟
// mock.js
class SyncLoopHook {
// 同步钩子
constructor(args) {
//args => ["name"];
this.tasks = [];
}
tap(name, task) {
this.tasks.push(task);
}
call(...args) {
this.tasks.forEach(task => {
let ret;
do {
ret = task(...args);
} while (ret !== undefined);
});
}
}
let hook = new SyncLoopHook(["name"]);
let total = 0;
hook.tap("aaa", function(name) {
console.log("aaa", name);
return ++total === 3 ? undefined : "继续执行次函数";
});
hook.tap("bbb", function(name) {
console.log("bbb", name);
});
hook.tap("ccc", function(name) {
console.log("ccc", name);
});
hook.call("lc");
结果：
001351.png
网友评论