Webpack(二十五)：webpack4核心模块tapable

作者: CodeMT | 来源:发表于2020-10-15 14:44 被阅读0次

webpack打包是一种事件流的机制，它的原理是将各个插件串联起来，那么实现这一切的核心就是我们要讲解的tapable. 并且在webpack中负责编译的Compiler和负责创建bundles的Compilation都是tapable构造函数的实列。

WebPack的loader(加载器)和plugin(插件)是由Webpack开发者和社区开发者共同贡献的。如果我们想写加载器和插件的话，我们需要看懂Webpack的基本原理，也就是说要看懂Webpack源码，我们今天要讲解的 tapable 则是webpack依赖的核心库。因此在看懂webpack之前，我们先要把 tapable 这个代码看懂。

我这边讲解的是基于 "webpack": "^4.16.1",这个版本的包的。安装该webpack之后，该webpack会自带 tapable 包。在tapable包下它是由如下js文件组成的。

|---- tapable
|  |--- AsyncParallelBailHook.js 
|  |--- AsyncParallelHook.js
|  |--- AsyncSeriesBailHook.js
|  |--- AsyncSeriesHook.js
|  |--- AsyncSeriesLoopHook.js
|  |--- AsyncSeriesWaterfallHook.js
|  |--- Hook.js
|  |--- HookCodeFactory.js
|  |--- HookMap.js
|  |--- index.js
|  |--- MultiHook.js
|  |--- simpleAsyncCases.js
|  |--- SyncBailHook.js
|  |--- SyncHook.js
|  |--- SyncLoopHook.js
|  |--- SyncWaterfallHook.js
|  |--- Tapable.js

如下图所示：

Tapable的本质是能控制一系列注册事件之间的执行流的机制。如上图我们可以看到，都是以Sync, Async 及 Hook结尾的方法，他们为我们提供了不同的事件流执行机制，我们可以把它叫做 "钩子"。那么这些钩子可以分为2个类别，即 "同步" 和 "异步"，异步又分为两个类别，"并行" 还是 "串行"，同步的钩子它只有 "串行"。

如下图所示：

下面我会把所有的测试demo放在我们的项目结构下的 public/js/main.js 文件代码内，我们可以执行即可看到效果。下面是我们项目中的目录基本结构(很简单，无非就是一个很简单的运行本地demo的框架)：

github中demo框架

可以把该框架下载到本地来，下面的demo可以使用该框架来测试代码了。

|--- tapable项目
| |--- node_modules  
| |--- public
| | |--- js
| | | |--- main.js
| |--- package.json
| |--- webpack.config.js

一：理解Sync类型的钩子

1. SyncHook.js

SyncHook.js 是处理串行同步执行的文件，在触发事件之后，会按照事件注册的先后顺序执行所有的事件处理函数。

如下代码所示：

const { SyncHook } = require('tapable');

// 创建实列
const 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.call("kongzhiEvent-1", 18);

执行的结果如下所示：

如上demo实列可以看到，在我们的tapable中，SyncHook是tapable中的一个类，首先我们需要创建一个实列，注册事件之前需要创建实列，创建实列时需要传入一个数组，该数组的存储的事件是我们在注册事件时，需要传入的参数。实列中的tap方法用于注册事件，该方法支持传入2个参数，第一个参数是 '事件名称', 第二个参数为事件处理函数，函数参数为执行call(触发事件)时传入的参数的形参。

2. SyncBailHook.js

SyncBailHook.js同样为串行同步执行，如果事件处理函数执行时有一个返回值不为空。则跳过剩下未执行的事件处理函数。

如下代码所示：

const { SyncBailHook } = require('tapable');

// 创建实列

const syncBailHook = new SyncBailHook(["name", "age"]);

// 注册事件
syncBailHook.tap("1", (name, age) => {
  console.log("1", name, age);
});

syncBailHook.tap("2", (name, age) => {
  console.log("2", name, age);
  return '2';
});

syncBailHook.tap("3", (name, age) => {
  console.log("3", name, age);
});

// 触发事件，让监听函数执行
syncBailHook.call("kongzhiEvent-1", 18);

如下图所示：

如上代码我们可以看到，第一个注册事件，直接执行打印 console.log(); 打印信息出来，它会继续执行第二个事件，第二个注册事件有 return '2'; 有返回值，且返回值不为undefined，因此它会跳过后面的注册事件。因此如上就打印2条信息了。也就是说 syncBailHook 作用也是同步执行的，只是说如果我们的注册事件的回调函数有返回值，且返回值不为undefined的话，那么它就会跳过后面的注册事件。即立刻停止执行后面的监听函数。

3. SyncWaterfallHook.js

SyncWaterfallHook 为串行同步执行，上一个事件处理函数的返回值作为参数传递给下一个事件处理函数，依次类推。

如下测试代码：

const { SyncWaterfallHook } = require('tapable');

// 创建实列
const syncWaterfallHook = new SyncWaterfallHook(["name", "age"]);

// 注册事件
syncWaterfallHook.tap("1", (name, age) => {
  console.log("第一个函数事件名称", name, age);
  return '1';
});

syncWaterfallHook.tap("2", (data) => {
  console.log("第二个函数事件名称", data);
  return '2';
});

syncWaterfallHook.tap("3", (data) => {
  console.log("第三个函数事件名称", data);
  return '3';
});

// 触发事件，让监听函数执行
const res = syncWaterfallHook.call("kongzhiEvent-1", 18);

console.log(res);

打印信息如下所示：

4. SyncLoopHook.js

SyncLoopHook 为串行同步执行，事件处理函数返回true表示继续循环，如果返回undefined的话，表示结束循环。

如下代码演示：

const { SyncLoopHook } = require('tapable');

// 创建实列
const 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("kongzhiEvent-1", 18);

执行的结果如下所示：

执行结果如上所示，我们来理解下 SyncLoopHook 执行顺序，首先我们知道，SyncLoopHook 的基本原理是：事件处理函数返回true表示继续循环，如果返回undefined的话，表示结束循环。

首先我们出发第一个注册事件函数，total1 依次循环，所以会打印 0, 1, 2 的值，因此打印的值如下所示：

1 kongzhiEvent-1 18 0
1 kongzhiEvent-1 18 1
1 kongzhiEvent-1 18 2

当 total1 = 2 的时候，再去判断 2 < 2 呢？所以最后值返回 undefined, 因此就执行第二个回调函数，但是此时由于 total1++; 因此 total1 = 3了。所以执行完成第二个函数的时候，会打印信息如下：

2 kongzhiEvent-1 18 0

但是由于等于true，所以会继续循环函数，因此又会从第一个函数内部训话，因此第一个函数就会打印如下信息：

1 kongzhiEvent-1 18 3

但是由于 total1 = 3了，因此又返回undefined了，因此又会执行第二个函数，这个时候 total2 = 1了，因此会打印:

2 kongzhiEvent-1 18 1

然后返回true，继续从第一个函数循环执行，此时的 total1 = 4; 因为在上次 total1=3 虽然条件不满足，但是还是会自增1的，因此会继续循环打印如下信息：

1 kongzhiEvent-1 18 4

此时又不满足，因此会执行第二个函数，此时的 total2=2了，因为在上一次执行完成后，total2会自增1. 因此先打印如下信息：

2 kongzhiEvent-1 18 2

由于此时 total2 = 2; 因此最后返回undefined，因此会执行第三个函数，但是此时的 total2 = 3了，因为执行了 total2++; 所以最后一个函数会打印如下信息：

3 kongzhiEvent-1 18

如上就是 SyncLoopHook.js 函数的作用。

二：理解Async类型的钩子

Async类型可以使用tap, tapSync 和 tapPromise 注册不同类型的插件钩子，我们分别可以通过 call, callAsync， promise 方法调用。

1. AsyncParallelHook

AsyncParallelHook 为异步并行执行，如果是通过 tapAsync 注册的事件，那么我们需要通过callAsync触发，如果我们通过tapPromise注册的事件，那么我们需要promise触发。

1）tapAsync/callAsync

如下代码所示：

const { AsyncParallelHook } = require('tapable');

// 创建实列
const asyncParallelHook = new AsyncParallelHook(["name", "age"]);

// 注册事件
asyncParallelHook.tapAsync("1", (name, age, done) => {
  setTimeout(() => {
    console.log("1", name, age, new Date());
    done();
  }, 1000);
});

asyncParallelHook.tapAsync("2", (name, age, done) => {
  setTimeout(() => {
    console.log("2", name, age, new Date());
    done();
  }, 2000);
});

asyncParallelHook.tapAsync("3", (name, age, done) => {
  setTimeout(() => {
    console.log("3", name, age, new Date());
    done();
  }, 3000);
});

// 触发事件，让监听函数执行
asyncParallelHook.callAsync("kongzhiEvent-1", 18, () => {
  console.log('函数执行完毕');
});

执行结果如下所示：

如上我们可以看到，该三个函数，第一个函数是 2019 17:10:55，第二个函数是 2019 17:10:56，第三个函数是 2019 17:10:57 执行完成了，上面三个函数定时器操作最长的时间也是3秒，我们把这三个函数执行完成总共也是使用了3秒的时间，说明了该三个事件处理函数是异步执行的了。不需要等待上一个函数结束后再执行下一个函数。

tapAsync注册的事件函数最后一个参数为回调函数done，每个事件处理函数在异步代码执行完成后都会调用该done函数。因此就能保证我们的 callAsync会在所有异步函数执行完毕后就执行该回调函数。

2）tapPromise/promise

使用tapPromise注册的事件，必须返回一个Promise实列，promise方法也会返回一个Promise实列。

如下代码演示：

const { AsyncParallelHook } = require('tapable');

// 创建实列
const asyncParallelHook = new AsyncParallelHook(["name", "age"]);

// 注册事件
asyncParallelHook.tapPromise("1", (name, age) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("1", name, age, new Date());
    }, 1000);
  });
});

asyncParallelHook.tapPromise("2", (name, age) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("2", name, age, new Date());
    }, 2000);
  });
});

asyncParallelHook.tapPromise("3", (name, age) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("3", name, age, new Date());
    }, 3000);
  });
});

// 触发事件，让监听函数执行
asyncParallelHook.promise("kongzhiEvent-1", 18);

效果如下所示：

如上代码所示，每个tabPromise注册事件的处理函数都会返回一个Promise实列，新版的代码可能改掉了，我们不能再promise函数内部使用 resolve('1') 这样的，在外部不能使用 asyncParallelHook.promise("kongzhiEvent-1", 18).then() 这样的，不支持then，刚看了源码，也没有返回一个新的promise对象。

如上也可以看到，我们的第一个函数需要1秒后执行，第二个函数需要2秒后执行，第三个函数需要三秒后执行，但是我们打印的信息可以看到，总共花费了3秒时间，也就是说我们上面的三个函数也是并行执行的。并不是需要等前一个函数执行完毕后再执行后面的函数。

2. AsyncSeriesHook

AsyncSeriesHook 为异步串行执行的。和我们上面的 AsyncParallelHook一样，通过使用 tapAsync注册事件，通过callAsync触发事件，也可以通过 tapPromise注册事件，使用promise来触发。

1）tapAsync/callAsync

和我们上面的 AsyncParallelHook一样， AsyncParallelHook 的 callAysnc方法也是通过传入回调函数的方式，在所有事件函数处理完成后，我们需要执行 callAsync的回调函数。

如下代码演示：

const { AsyncSeriesHook } = require('tapable');

// 创建实列
const asyncSeriesHook = new AsyncSeriesHook(["name", "age"]);

// 注册事件
asyncSeriesHook.tapAsync("1", (name, age, done) => {
  setTimeout(() => {
    console.log("1", name, age, new Date());
    done();
  }, 1000);
});

asyncSeriesHook.tapAsync("2", (name, age, done) => {
  setTimeout(() => {
    console.log("2", name, age, new Date());
    done();
  }, 2000);
});

asyncSeriesHook.tapAsync("3", (name, age, done) => {
  setTimeout(() => {
    console.log("3", name, age, new Date());
    done();
  }, 3000);
});

// 触发事件，让监听函数执行
asyncSeriesHook.callAsync("kongzhiEvent-1", 18, () => {
  console.log('执行完成');
});

执行结果如下所示：

从上面打印信息我们可以看到，我们第一次打印 1 kongzhiEvent-1 18 Mon Aug 05 2019 17:58:09 GMT+0800 (中国标准时间) 这个信息，然后当我们执行第二个函数的时候，是2000毫秒后执行，因此打印第二条信息如下所示：

2 kongzhiEvent-1 18 Mon Aug 05 2019 17:58:11 GMT+0800 (中国标准时间)

接着我们执行第三个函数，隔了3000毫秒后执行，因此可以看到打印信息如下：

3 kongzhiEvent-1 18 Mon Aug 05 2019 17:58:14 GMT+0800 (中国标准时间)

因此我们可以看到该方法是串行执行的。

2）tapPromise/promise

和上面的 AsyncParallelHook 一样，使用tapPromise来注册事件函数，然后需要返回一个Promise实列，然后我们使用 promise 来触发该事件。

如下代码所示：

const { AsyncSeriesHook } = require('tapable');

// 创建实列
const asyncSeriesHook = new AsyncSeriesHook(["name", "age"]);

// 注册事件
asyncSeriesHook.tapPromise("1", (name, age) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("1", name, age, new Date());
      resolve();
    }, 1000);
  })
});

asyncSeriesHook.tapPromise("2", (name, age) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("2", name, age, new Date());
      resolve();
    }, 2000);
  });
});

asyncSeriesHook.tapPromise("3", (name, age) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("3", name, age, new Date());
      resolve();
    }, 3000);
  });
});

// 触发事件，让监听函数执行
asyncSeriesHook.promise("kongzhiEvent-1", 18);

如上代码执行效果如下所示：

如上代码，我们对比 AsyncParallelHook 代码可以看到，唯一不同的是该asyncSeriesHook的Promsie内部需要调用 resolve() 函数才会执行到下一个函数，否则的话，只会执行第一个函数，但是 AsyncParallelHook 不调用 resolve()方法会依次执行下面的函数。

三：tapable源码分析

先以SyncHook.js 源码分析：

源码如下：

/*
  MIT License http://www.opensource.org/licenses/mit-license.php
  Author Tobias Koppers @sokra
*/
"use strict";

const Hook = require("./Hook");
const HookCodeFactory = require("./HookCodeFactory");

class SyncHookCodeFactory extends HookCodeFactory {
  content({ onError, onResult, onDone, rethrowIfPossible }) {
    return this.callTapsSeries({
      onError: (i, err) => onError(err),
      onDone,
      rethrowIfPossible
    });
  }
}

const factory = new SyncHookCodeFactory();

class SyncHook extends Hook {
  tapAsync() {
    throw new Error("tapAsync is not supported on a SyncHook");
  }

  tapPromise() {
    throw new Error("tapPromise is not supported on a SyncHook");
  }

  compile(options) {
    factory.setup(this, options);
    return factory.create(options);
  }
}

module.exports = SyncHook;

如上代码我们可以看到 SyncHook 类它继承了 Hook 类，然后定义了 SyncHookCodeFactory 类继承了 HookCodeFactory 类，我们先来看看 Hook.js 相关的代码如下：

class Hook {
  constructor(args) {
    // args 参数必须是一个数组，比如我们上面的demo 传递值为 ["name", "age"]
    if(!Array.isArray(args)) args = [];

    // 把数组args赋值给 _args的内部属性
    this._args = args;

    // 保存所有的tap事件
    this.taps = [];

    // 拦截器数组
    this.interceptors = [];

    // 调用 内部方法 _createCompileDelegate 然后把返回值赋值给内部属性 _call， 并且暴露给外部属性 call
    this.call = this._call = this._createCompileDelegate("call", "sync");

    /* 调用 内部方法 _createCompileDelegate ，然后把返回值赋值给内部属性 _promise，并且暴露外部属性 promise
    */
    this.promise = this._promise = this._createCompileDelegate("promise", "promise");

    /*
     调用 内部方法 _createCompileDelegate，然后把返回值赋值给内部属性 _callAsync， 并且暴露外部属性
     callAsync
    */
    this.callAsync = this._callAsync = this._createCompileDelegate("callAsync", "async");

    // 用于调用函数的时候，保存钩子数组的变量
    this._x = undefined;
  }
}

如上类 Hook 是代码的初始化工作；对于上面的 _createCompileDelegate 这个方法，我们先不用管，该方法在我们的这个SyncHook 类暂时还用不上，因为这个是处理异步的操作，下面我们会讲解到的。下面我们需要看注册事件 tap 方法.

代码如下：

tap(options, fn) {
  if(typeof options === "string")
    options = { name: options };
  if(typeof options !== "object" || options === null)
    throw new Error("Invalid arguments to tap(options: Object, fn: function)");
  options = Object.assign({ type: "sync", fn: fn }, options);
  if(typeof options.name !== "string" || options.name === "")
    throw new Error("Missing name for tap");
  // 注册拦截器
  options = this._runRegisterInterceptors(options);
  // 插入钩子
  this._insert(options);
}

如上该方法接收2个参数，第一个参数必须是一个字符串，如果它是字符串的话，那么 options = {name: options}, options 就返回了一个带name属性的对象了。然后使用 Object.assign()方法对对象合并，如下代码：options = Object.assign({ type: "sync", fn: fn }, options); 因此最后options就返回如下了：
options = { type: "sync", fn: fn, name: options };

然后就是调用如下方法，来注册一个拦截器；如下代码：

options = this._runRegisterInterceptors(options);

现在我们来看下 _runRegisterInterceptors 代码如下所示：

_runRegisterInterceptors(options) {
  for(const interceptor of this.interceptors) {
    if(interceptor.register) {
      const newOptions = interceptor.register(options);
      if(newOptions !== undefined)
        options = newOptions;
    }
  }
  return options;
}

如上_runRegisterInterceptors() 方法是注册拦截器的方法，该方法有一个options参数，该options的值是：

options = { type: "sync", fn: fn, name: '这是一个字符串' };

在该函数内部我们遍历拦截器this.interceptors，然后拦截器 this.interceptors会有一个属性register，如果有该属性的话，就调用该属性来注册一个新的 newOptions 对象，如果 newOptions 对象不等于 undefined的话，就把options = newOptions; 赋值给 options的最后返回 options，当然如果没有该拦截器的话，就直接返回该 options对象。

如上代码我们知道，我们在调用 tap()方法来注册事件之前，我们就需要使用注册拦截器，来添加拦截器的，因为在调用_runRegisterInterceptors 方法时，它内部代码会遍历该拦截器，因此我们就可以判定在我们使用 tap 事件之前，我们就需要使用添加拦截器. 下面我们来看看我们添加拦截器的代码如下：

intercept(interceptor) {
  // 重置所有的调用方法
  this._resetCompilation();
  // 保存拦截器到全局属性 interceptors内部，我们使用 Object.assign方法复制了一份
  this.interceptors.push(Object.assign({}, interceptor));
  /*
   如果该拦截器有register属性的话，我们就遍历所有的taps, 把他们作为参数调用拦截器的register，并且把返回的tap对象
   (该tap对象指tap函数里面把fn和name这些信息组合起来的新对象)。然后赋值给 当前的某一项tap
  */
  if(interceptor.register) {
    for(let i = 0; i < this.taps.length; i++)
      this.taps[i] = interceptor.register(this.taps[i]);
  }
}

下面我们看下如下demo来继续理解下 intercept 方法的含义：如下demo所示：

const { SyncHook } = require('tapable');

const h1 = new SyncHook(['xxx']);

h1.tap('A', function(args) {
  console.log('A', args);
  return 'b';
});

h1.tap('B', function() {
  console.log('b');
});

h1.tap('C', function() {
  console.log('c');
});

h1.tap('D', function() {
  console.log('d');
});

h1.intercept({
  call: (...args) => {
    console.log(...args, '11111111');
  },
  register: (tap) => {
    console.log(tap, '222222');
    return tap;
  },
  loop: (...args) => {
    console.log(...args, '33333');
  },
  tap: (tap) => {
    console.log(tap, '444444');
  }
});

运行效果如下所示：

如上demo代码我们可以看到，我们在调用 tap 来注册我们的事件的时候，我们先会执行我们的拦截器，也就是调用我们的SyncHook类的实列对象 h1, 会调用 h1.intercept 方法的 register 函数，所以我们注册了多少次，就使用拦截器拦截了多少次，并且返回了一个新的对象, 比如返回了 {type: "sync", fn: fn, name: 'A'} 这样的新对象。

我们可以在返回看下我们的 Hook.js 中的 tap(options, fn) {} 这个方法内部，该方法内部注册事件的时候，会先调用

options = this._runRegisterInterceptors(options);

这个函数代码，该函数代码的作用是注册拦截器，然后返回新的对象回来，如下代码所示：

_runRegisterInterceptors(options) {
  for(const interceptor of this.interceptors) {
    if(interceptor.register) {
      const newOptions = interceptor.register(options);
      if(newOptions !== undefined)
        options = newOptions;
    }
  }
  return options;
}

如上我们可以看到，它会返回了一个新对象，就是我们上面打印出来的对象。该值会保存到我们的 options 参数中，接着我们继续执行 taps函数中的最后一句代码：

this._insert(options);

该函数的代码，就是把所有的事件对象保存到 this.taps 中。保存完成后，那么 this.taps 就有该值了，然后这个时候我们就会调用我们上面的 intercept 中的 register 这个函数。下面我们继续来看下 _insert(options) 中的代码吧，代码如下所示：

_insert(item) {
  // 重置资源，因为每一个插件都会有一个新的 Compilation
  this._resetCompilation();
  // 该item.before 是插件的名称
  let before;

  // 打印item
  console.log(item);

  /*
   before 可以是单个字符串插件的名称，也可以是一个字符串数组的插件
   new Set 是ES6新增的，它的作用是去掉数组里面重复的值
  */
  if(typeof item.before === "string")
    before = new Set([item.before]);
  else if(Array.isArray(item.before)) {
    before = new Set(item.before);
  }

  let stage = 0;
  if(typeof item.stage === "number")
    stage = item.stage;
  let i = this.taps.length;
  while(i > 0) {
    console.log('----', i);
    i--;
    const x = this.taps[i];
    this.taps[i+1] = x;
    const xStage = x.stage || 0;
    if(before) {
      if(before.has(x.name)) {
        before.delete(x.name);
        continue;
      }
      if(before.size > 0) {
        continue;
      }
    }
    if(xStage > stage) {
      continue;
    }
    i++;
    break;
  }
  // 打印i的值
  console.log(i);
  this.taps[i] = item;
}

如上代码使用while循环，遍历所有的taps的函数，然后会根据stage和before进行重新排序，stage的优先级低于before。如下demo，我们也可以如下调用 tap, 比如tap是一个数组。如下所示：

const { SyncHook } = require('tapable');

const h1 = new SyncHook(['xxx']);

h1.tap('A', function(args) {
  console.log('A', args);
  return 'b';
});

h1.tap('B', function() {
  console.log('b');
});

h1.tap('C', function() {
  console.log('c');
});
h1.tap({
  name: 'F',
  before: 'D'
}, function() {
  
});
h1.tap({
  name: 'E',
  before: 'C'
}, function() {

});
h1.tap('D', function() {
  console.log('d');
});

h1.intercept({
  call: (...args) => {
    console.log(...args, '11111111');
  },
  register: (tap) => {
    console.log(tap, '222222');
    return tap;
  },
  loop: (...args) => {
    console.log(...args, '33333');
  },
  tap: (tap) => {
    console.log(tap, '444444');
  }
});

打印后的效果如下所示：

如上我们可以看到我们的 _insert(item); 方法中打印的console.log(item);项的值及打印console.log(i)的值及console.log('----', i); 我们可以看下如上的 _insert(item)方法中的算法如下理解：

1. 首先在我们的代码demo里面使用 tap 注册一个A事件，h1.tap('A', function(args) {}), 因此最后会把该函数返回的对象传递进来，对象为 {type: 'sync', fn: fn, name: 'A'}; 因此打印的 console.log(item); 就是该对象值，初始化第一步i的值为0. 因为 this.taps.length 的长度为0. 所以第一次不会进入 while循环内部，执行到最后我们就把 console.log(i) 的值打印出来。

2. 当我们使用 tap注册一个B事件的时候， h1.tap('B', function(args) {}); console.log(item); 就会打印出对象的值为：
{type: 'sync', fn:fn, name: 'B'}; 然后判断是否有before或state这个属性，如果没有的话，直接跳过，while (i > 0); 进入该while循环内部，打印 console.log('----', i); 因此会打印 '---- 1' 这样的，i--, 执行完后 i 的值会减一. const x = this.taps[i]; 因此 x = this.taps[0] = {type: 'sync', fn: fn, name: 'A'}, this.taps[i+1] = x; 因此 this.taps[1] = {type: 'sync', fn: fn, name: 'A'}; 这样的。const xStage = x.stage || 0; 因此 xStage = 0; 因为我们没有stage这个属性，也没有before属性，所以也不会进入上面的if语句，最后我们会进行如下判断：

if(xStage > stage) {
   continue;
}

也不会进入if语句，然后 i++; 因此此时 i = 1 了；因此会打印1. 此时我们的 this.taps = [{type: 'sync', fn: fn, name: 'A'}, {type: 'sync', fn: fn, name: 'B'}];

3. 当我们使用tap注册一个C事件的时候，h1.tap('C', function() {}); 同理，打印出我们的 console.log(item) 的值变为如下：
{type: "sync", fn: ƒ, name: "C"}，一样也没有before和state属性，如果没有，直接跳过，接着就打印 ---2 然后此时 i=2了，最后我们的

this.taps = [{type: 'sync', fn: fn, name: 'A'}, {type: 'sync', fn: fn, name: 'B'}, {type: "sync", fn: ƒ, name: "C"}];

4. 当我们注册F事件的时候，如代码：h1.tap({name: 'F', before: 'D'}, function() {}), 此时 i = this.taps.length = 3; 因此第一次会打印 '---- 3';
const x = this.taps[i]; const x = this.taps[2] = {type: "sync", fn: ƒ, name: "C"}; this.taps[i+1] = x; 因此 this.taps[3] = {type: "sync", fn: ƒ, name: "C"}; 然后会判断是否有before或state这个属性，我们注册F事件的时候可以看到，它有before这个属性了，因此在内部i的值会从3依次循环，直接0为止，每次循环内部自己减少1. 因此最后我们的i的值就变为0了，因此我们的 this.tabs值就变成这样的了:

this.tabs = [
  {type: 'sync', name: 'F', before:'D', fn: fn},   
  {type: 'sync', fn: fn, name: 'A'}, 
  {type: 'sync', fn: fn, name: 'B'}, 
  {type: "sync", fn: ƒ, name: "C"}
];

5. 当我们注册事件E的时候，如代码 h1.tap({name: 'E', before: 'C'}, function(){}); 此时我们的i = 4了，因此会打印 '---- 4'，
const x = this.taps[i]; const x = this.taps[3] = {type: "sync", fn: ƒ, name: "C"}; this.taps[i+1] = this.taps[4] = {type: "sync", fn: ƒ, name: "C"}; 然后会判断是否有before或state这个属性，我们注册E事件的时候可以看到，它有before这个属性了，
后面逻辑依次类推....

上面代码分析的优点烦，我们再来整理下思路，理解下上面的算法：

1. 假如我们注册了如下代码：

h1.tap('A', function(args) {}); 
h1.tap('B', function(args) {});
h1.tap('C', function(args) {});
h1.tap({name: 'F', before: 'D'}, function(args) {}); 
h1.tap({ name: 'E', before: 'C'}, function() {}); 
h1.tap('D', function() { console.log('d'); });

如上注册了这么多函数，也就是说，我们每次注册一个函数都会传递一个对象进来，

比如类似这样的:

{type: 'sync', fn: fn, name: 'A'}, 
{type: 'sync', fn: fn, name: 'B'}, 
{type: 'sync', fn: fn, name: 'C'}, 
{type: 'sync', fn: fn, name: 'F', before: 'D'}, 
{type: 'sync', fn: fn, name: 'E', before: 'C'}, 
{type: 'sync', fn: fn, name: 'D'}.

会依次调用我们的 _insert(item) 这个函数，item的值就是上面我们的依次循环的每个对象的值。

2. 第一次传递 {type: 'sync', fn: fn, name: 'A'} 这个对象进来后，由于第一次我们的 let i = this.taps.length; 的长度为0；因此就不会进行代码的while内部循环，因此我们的 this.taps = [{type: 'sync', fn: fn, name: 'A'}]; 这样的值。

3. 第二次传递 {type: 'sync', fn: fn, name: 'B'} 这个对象进来的时候，这次我们的 let i = this.taps.length; 的长度为1了，因此
就会进入while循环，const x = this.taps[i]; const x = {type: 'sync', fn: fn, name: 'A'}; this.taps[i+1] = {type: 'sync', fn: fn, name: 'A'}; 因此这个时候我们的 this.taps = [{type: 'sync', fn: fn, name: 'A'},{type: 'sync', fn: fn, name: 'A'}] 了。由于该对象事件没有 stage 或 before 这个参数，因此最后执行 i++; 因此i的值变为1，最后一句代码：this.taps[i] = item; item的值就是我们的这个对象 {type: 'sync', fn: fn, name: 'B'}; 因此此时的 this.taps 的值，变为如下：

this.taps = [{type: 'sync', fn: fn, name: 'A'}, {type: 'sync', fn: fn, name: 'B'}];

4. 第三次传递 {type: 'sync', fn: fn, name: 'C'} 这个对象进来的时候，和我们的第三步骤一样，依次类推，因此最后我们的 this.taps 的值变为如下：

this.taps = [{type: 'sync', fn: fn, name: 'A'}, {type: 'sync', fn: fn, name: 'B'}, {type: 'sync', fn: fn, name: 'C'}];

5. 第四次传递 {type: 'sync', fn: fn, name: 'F', before: 'D'} 这个对象进来的时候，此时我们的 let i = this.taps.length = 3 了; 因此就会进入while循环，执行如下代码：i--; const x = this.taps[i]; this.taps[i+1] = x; 因此

const x = this.taps[2]
= {type: 'sync', fn: fn, name: 'C'}; this.taps[i+1] = this.taps[3] = {type: 'sync', fn: fn, name: 'C'};

因此此时我们的 this.taps 对象的值变为如下：

this.taps = [
{type: 'sync', fn: fn, name: 'A'}, 
{type: 'sync', fn: fn, name: 'B'}, 
{type: 'sync', fn: fn, name: 'C'}, 
{type: 'sync', fn: fn, name: 'C'}
];

最后我们就会执行下面的代码：

if(before) {
  if(before.has(x.name)) {
    before.delete(x.name);
    continue;
  }
  if(before.size > 0) {
    continue;
  }
}

因为事件F有before这个参数，因此会进入if条件判断语句了，接着就判断 before.has(x.name)；判断该对象是否有 before 该值，比如我们上面的的before为字符串 'D', 判断我们之前保存的 this.taps 数组内部的每项对象的name属性是否有 'D' 这个字符串。如果有的话，就直接删除该对象。所以一直没有找到 'D' 字符，因此会一直判断 if(before.size > 0) { continue; } 进行对内部i循环，因此i = 3；就循环了3次，依次是3, 2, 1 这样的，最后 i-- ；i = 0的时候，就不会进入while循环内部了，因此我们在第一个位置会插入 F事件了，比如:

this.taps[0] = {type: 'sync', fn: fn, name: 'F', before: 'D'};

注意：上面再内部依次循环 3, 2, 1 的时候，我们的this.taps的值数组会发生改变的，比如等于3的时候，我们的数组是如下这个样子，因为执行了如下代码：

i--;
const x = this.taps[i];
this.taps[i+1] = x;

i = 3 时，this.taps的值为 = [{type: 'sync', fn: fn, name: 'A'}, {type: 'sync', fn: fn, name: 'B'}, {type: 'sync', fn: fn, name: 'C'}, {type: 'sync', fn: fn, name: 'C'}];

i = 2 时，this.taps的值为 = [{type: 'sync', fn: fn, name: 'A'}, {type: 'sync', fn: fn, name: 'B'}, {type: 'sync', fn: fn, name: 'B'}, {type: 'sync', fn: fn, name: 'C'}];

i = 1时，this.taps的值为 = [{type: 'sync', fn: fn, name: 'A'}, {type: 'sync', fn: fn, name: 'A'}, {type: 'sync', fn: fn, name: 'B'}, {type: 'sync', fn: fn, name: 'C'}];

最后也就是我们上面的 i = 0的时候，因此我们会把 {type: 'sync', fn: fn, name: 'F', before: 'D'}; 对象值插入到我们的 taps数组的第一个位置上了，因此 this.taps的值最终变为：[{type: 'sync', fn: fn, name: 'F', before: 'D'}, {type: 'sync', fn: fn, name: 'A'}, {type: 'sync', fn: fn, name: 'B'}, {type: 'sync', fn: fn, name: 'C'}];

6. 第五次传递 {type: 'sync', fn: fn, name: 'E', before: 'C'} 的时候，也是同样的道理，此时我们的 let i = this.taps.length = 4 了; 因此就会进入while循环，执行如下代码：i--; const x = this.taps[i]; this.taps[i+1] = x; 因此我们的 const x = this.taps[3] = {type: 'sync', fn: fn, name: 'C'}; this.taps[i+1] = this.taps[4] = {type: 'sync', fn: fn, name: 'C'};

在while内部循环，同样的道理也会执行如下代码：

if(before) {
  if(before.has(x.name)) {
    before.delete(x.name);
    continue;
  }
  if(before.size > 0) {
    continue;
  }
}
if(xStage > stage) {
  continue;
}
i++;
break;

首先是有before这个参数的，因此会进入if语句内部，然后判断该before是否有该 x.name 属性吗？before的属性值为 'C'; 因此判断该有没有x.name 呢，我们从上面知道我们的 this.taps 的值为 =

[
{type: 'sync', fn: fn, name: 'F', before: 'D'}, 
{type: 'sync', fn: fn, name: 'A'}, 
{type: 'sync', fn: fn, name: 'B'}, 
{type: 'sync', fn: fn, name: 'C'}, 
{type: 'sync', fn: fn, name: 'C'}
];

从上面 i-- 可知，我们此时i的值为3，因此我们需要把该值插入到 this.taps[3] = {type: 'sync', fn: fn, name: 'E', before: 'C'} 了; 因此此时 this.taps的值就变为如下了；

this.taps = [
{type: 'sync', fn: fn, name: 'F', before: 'D'}, 
{type: 'sync', fn: fn, name: 'A'}, 
{type: 'sync', fn: fn, name: 'B'}, 
{type: 'sync', fn: fn, name: 'E', before: 'C'}, 
{type: 'sync', fn: fn, name: 'C'}
];

7. 第六次传递的D事件，也是一个意思，这里就不再分析了，因此我们的 this.taps的值最终变为如下：

this.taps = [
{type: 'sync', fn: fn, name: 'F', before: 'D'}, 
{type: 'sync', fn: fn, name: 'A'}, 
{type: 'sync', fn: fn, name: 'B'}, 
{type: 'sync', fn: fn, name: 'E', before: 'C'}, 
{type: 'sync', fn: fn, name: 'C'}, 
{type: 'sync', fn: fn, name: 'D'}
];

如上就是一个排序算法; 大家可以理解下。至于stage属性也是一样的，只是before属性的优先级相对于stage会更高。

理解 _createCompileDelegate() 函数代码

我们再回到我们的 Hook.js 中的构造函数内部有如下几句代码：

class Hook {
  constructor(args) {
    this.call = this._call = this._createCompileDelegate("call", "sync");
    this.promise = this._promise = this._createCompileDelegate("promise", "promise");
    this.callAsync = this._callAsync = this._createCompileDelegate("callAsync", "async");
  }
}

如上代码，我们可以看到我们的 this.call, this.promise, this.callAsync 都会调用内部函数 _createCompileDelegate, 我们来看看该内部函数的代码如下所示：

_createCompileDelegate(name, type) {
  const lazyCompileHook = (...args) => {
    this[name] = this._createCall(type);
    return this[name](...args);
  };
  return lazyCompileHook;
}

如上可以看到，_createCompileDelegate 函数接收2个参数，name 和 type，就是我们上面调用该函数的时候传递进来的。然后在内部使用闭包的形式返回了 lazyCompileHook 函数，因此 this.call, this.promise, this.callAsync 都返回了该函数 lazyCompileHook 。

我们再来看下如上demo，加上如下测试代码如下所示：

const { SyncHook } = require('tapable');

const h1 = new SyncHook(['xxx']);

h1.tap('A', function(args) {
  console.log('A', args);
  return 'b';
});

h1.tap('B', function() {
  console.log('b');
});

h1.tap('C', function() {
  console.log('c');
});
h1.tap({
  name: 'F',
  before: 'D'
}, function() {
  
});
h1.tap({
  name: 'E',
  before: 'C'
}, function() {

});
h1.tap('D', function() {
  console.log('d');
});
h1.call(7777);

如上我们打印的结果如下所示：

如上我们调用call方法后，会因此执行如上面的注册事件的回调函数，我们再来看下_createCompileDelegate函数内部代码

_createCompileDelegate(name, type) {
  const lazyCompileHook = (...args) => {
    this[name] = this._createCall(type);
    return this[name](...args);
  };
  return lazyCompileHook;
}

该函数内部代码，返回了lazyCompileHook函数给我们的call对象，然后当我们的 this.call(7777)的时候就会调用lazyCompileHook函数，传递了一个参数，因此 ...args = 7777; 内部代码：

this[name] = this._createCall(type); 也就是说这边的this对象指向了 SyncHook 的实列了，也就是我们外面的实列 h1对象了，this['call'] = this._createCall('sync'); 我们下面看下 _createCall 函数代码如下：

_createCall(type) {
  return this.compile({
    taps: this.taps,
    interceptors: this.interceptors,
    args: this._args,
    type: type
  });
}

compile(options) {
  throw new Error("Abstract: should be overriden");
}

如上代码，我们是不是萌了？compile方法直接抛出一个对象？当然不是，我们在 SyncHook 这个类中(其他的类也是一样)，会对该方法进行重写的，我们可以看下我们的 SyncHook中的类代码，如下所示：

const HookCodeFactory = require("./HookCodeFactory");
const factory = new SyncHookCodeFactory();

class SyncHook extends Hook {
  tapAsync() {
    throw new Error("tapAsync is not supported on a SyncHook");
  }

  tapPromise() {
    throw new Error("tapPromise is not supported on a SyncHook");
  }

  compile(options) {
    factory.setup(this, options);
    return factory.create(options);
  }
}

如上我们可以看到我们的 compile 方法会进行重写该方法。如上的compile方法中的options的参数值就是我们上面传递进来的，如下所示

options = {
  taps: this.taps,
  interceptors: this.interceptors,
  args: this._args,
  type: type
}

如上看到，我们引用了 HookCodeFactory 类进来，并且使用了该类的实列 factory 中的 setUp()方法及 create()方法，我们看下该 HookCodeFactory 类代码如下所示：

class HookCodeFactory {
  constructor(config) {
    this.config = config;
    this.options = undefined;
  }
  setup(instance, options) {
    instance._x = options.taps.map(t => t.fn);
  }
  create(options) {

  }
}

如上 setup 中的参数 instance 就是调用该实列对象了，options的参数值就是我们在 SyncHook.js 的参数如下值：

options =  {
  taps: this.taps,
  interceptors: this.interceptors,
  args: this._args,
  type: type
}

其中 this.taps 值就是我们的上面的那个数组。比如 :

this.taps = [
{type: 'sync', fn: fn, name: 'F', before: 'D'}, 
{type: 'sync', fn: fn, name: 'A'}, 
{type: 'sync', fn: fn, name: 'B'}, 
{type: 'sync', fn: fn, name: 'E', before: 'C'}, 
{type: 'sync', fn: fn, name: 'C'}, 
{type: 'sync', fn: fn, name: 'D'}
];

这样的, 然后每个事件对象的实列都绑定到 instance._x = fn. 这里面的fn就是我们this.taps数组里面遍历的fn函数。
每个注册事件对应一个函数。会把该对应的事件函数绑定到 instance._x 上面来。我们接下来再看下我们的 create()函数。

create()函数代码如下所示：

create(options) {
  this.init(options);
  switch(this.options.type) {
    case "sync":
      return new Function(this.args(), "\"use strict\";\n" + this.header() + this.content({
        onError: err => `throw ${err};\n`,
        onResult: result => `return ${result};\n`,
        onDone: () => "",
        rethrowIfPossible: true
      }));
    case "async":
      return new Function(this.args({
        after: "_callback"
      }), "\"use strict\";\n" + this.header() + this.content({
        onError: err => `_callback(${err});\n`,
        onResult: result => `_callback(null, ${result});\n`,
        onDone: () => "_callback();\n"
      }));
    case "promise":
      let code = "";
      code += "\"use strict\";\n";
      code += "return new Promise((_resolve, _reject) => {\n";
      code += "var _sync = true;\n";
      code += this.header();
      code += this.content({
        onError: err => {
          let code = "";
          code += "if(_sync)\n";
          code += `_resolve(Promise.resolve().then(() => { throw ${err}; }));\n`;
          code += "else\n";
          code += `_reject(${err});\n`;
          return code;
        },
        onResult: result => `_resolve(${result});\n`,
        onDone: () => "_resolve();\n"
      });
      code += "_sync = false;\n";
      code += "});\n";
      return new Function(this.args(), code);
  }
}

/**
 * @param {{ type: "sync" | "promise" | "async", taps: Array<Tap>, interceptors: Array<Interceptor> }} options
 */
init(options) {
  this.options = options;
  this._args = options.args.slice();
}

如上代码，其中我们的 create(options) 函数中的参数 options 的值为如下：

options = {
  taps: this.taps,
  interceptors: this.interceptors,
  args: this._args,
  type: type
}

而我们的type值为 'sync', 因此会进入case语句中的第一个case，该create函数内部，判断三种类型的情况，分别为 'sync', 'async', 'promise'.

如上代码 options 对象中的参数：taps 是我们的注册事件对象的数组，interceptors 是过滤器，目前是 []; 我们的demo里面没有使用过滤器，当然我们也可以使用过滤器，args 参数值为 ['xxx']; 我们初始化实列的时候传递了该值；比如如下初始化该类代码：const h1 = new SyncHook(['xxx']); 然后我们的type为 'sync' 了。因为我们 h1实列调用的是call这个方法。搞清楚了上面各个参数的含义，我们接下来往下看。

在create()方法内部，我们首先会调用 init() 方法，如下代码所示：this.init(options); 在init内部代码中，

init(options) {
  this.options = options;
  this._args = options.args.slice();
}

this.options = options, 保存了该对象的引用。this._args = options.args.slice(); 保存了该数组传递进来的参数。

现在就会直接 case 'sync' 的情况了，如下代码所示：

case "sync":
return new Function(this.args(), "\"use strict\";\n" + this.header() + this.content({
  onError: err => `throw ${err};\n`,
  onResult: result => `return ${result};\n`,
  onDone: () => "",
  rethrowIfPossible: true
}));

就会依次调用 this.args(); this.header(); this.content() 方法; 在 new Function(); 中如何调用方法看如下代码来理解，如下图所示：

下面我们来看下 header() 方法如下代码所示：

header() {
  let code = "";
  // this.needContext() 判断数组this.taps的某一项是否有 context属性，任意一项有的话，就返回true
  if(this.needContext()) {
    // 如果为true的话，var _context = {};
    code += "var _context = {};\n";
  } else {
    // 否则的话， var _context; 值为undefined
    code += "var _context;\n";
  }
  /*
   在setup()中，我们把所有的tap对象都给到了 instance, 因此这里的 this._x 就是我们之前说的 instance._x;
  */
  code += "var _x = this._x;\n";
  // 如果有拦截器的话，保存拦截器数组到局部变量 _interceptors 中，且数组保存到 _taps中。
  if(this.options.interceptors.length > 0) {
    code += "var _taps = this.taps;\n";
    code += "var _interceptors = this.interceptors;\n";
  }
  /*
   如果有拦截器的话，遍历。
   获取到某一个拦截器 const interceptor = this.options.interceptors[i];
   如果该拦截器有call这个方法的话，就拼接字符串。因此如果有过滤器的话，最终会拼接成如下字符串：

   "use strict";
    function(options) {
      var _context;
      var _x = this._x;
      var _taps = this.taps;
      var _interceptors = this.interceptors;
      // 下面就是循环拦截器，如果有一个拦截器的话
      _interceptors[0].call(options);
    }
  */
  for(let i = 0; i < this.options.interceptors.length; i++) {
    const interceptor = this.options.interceptors[i];
    if(interceptor.call) {
      code += `${this.getInterceptor(i)}.call(${this.args({
        before: interceptor.context ? "_context" : undefined
      })});\n`;
    }
  }
  return code;
}

needContext() {
  for(const tap of this.options.taps)
    if(tap.context) return true;
  return false;
}
getInterceptor(idx) {
  return `_interceptors[${idx}]`;
}

首先我们来看下 needContext() 函数，该函数遍历 this.options.taps；它是我们传进来的对象。this.options.taps 值如下：

this.options.taps = [
{type: 'sync', fn: fn, name: 'F', before: 'D'}, 
{type: 'sync', fn: fn, name: 'A'}, 
{type: 'sync', fn: fn, name: 'B'}, 
{type: 'sync', fn: fn, name: 'E', before: 'C'},
 {type: 'sync', fn: fn, name: 'C'}, 
{type: 'sync', fn: fn, name: 'D'}
];

如果该数组中的某一个对象有 context 属性的话(该数组中任意一项)，否则都没有context属性的话，会返回false。

如上代码：

if(this.needContext()) {
  code += "var _context = {};\n";
} else {
  code += "var _context;\n";
}
code += "var _x = this._x;\n";

如果 this.needContext() 为true的话，var _context = {}; 否则的话 var _context; 值为undefined; 因此如果this.needContext() 返回true的话，code的值变为如下所示：

如果this.needContext()方法返回false的话，就返回如下所示的值：

我们现在再来看看 this.content() 方法，content()方法并不在我们的HookCodeFactory类中，它是子类自己实现的，因此我们到 SyncHook类中去看代码如下所示：

class SyncHookCodeFactory extends HookCodeFactory {
  content({ onError, onResult, onDone, rethrowIfPossible }) {
    return this.callTapsSeries({
      onError: (i, err) => onError(err),
      onDone,
      rethrowIfPossible
    });
  }
}

我们再结合 HookCodeFactory.js类中，看create()函数的代码：

case "sync":
return new Function(this.args(), "\"use strict\";\n" + this.header() + this.content({
  onError: err => `throw ${err};\n`,
  onResult: result => `return ${result};\n`,
  onDone: () => "",
  rethrowIfPossible: true
}));

如上代码，我们的content方法中传的参数为一个对象;

{
  onError: err => `throw ${err};\n`,
  onResult: result => `return ${result};\n`,
  onDone: () => "",
  rethrowIfPossible: true
}

因此上面的 SyncHookCodeFactory 类继承了 HookCodeFactory 中对应的参数为：

onError =  err => `throw ${err};\n`; 
onResult = result => `return ${result};\n`;
onDone = () => "";
rethrowIfPossible = true;

如上 onError， onResult， onDone 都是一个函数，然后返回不同的值。最后我们调用 callTapsSeries 方法来执行; 下面我们来看下该 callTapsSeries 方法；方法在 HookCodeFactory 类中，代码如下所示：

callTapsSeries({ onError, onResult, onDone, rethrowIfPossible }) {
  if(this.options.taps.length === 0)
    return onDone();
  const firstAsync = this.options.taps.findIndex(t => t.type !== "sync");
  const next = i => {
    if(i >= this.options.taps.length) {
      return onDone();
    }
    const done = () => next(i + 1);
    const doneBreak = (skipDone) => {
      if(skipDone) return "";
      return onDone();
    }
    return this.callTap(i, {
      onError: error => onError(i, error, done, doneBreak),
      onResult: onResult && ((result) => {
        return onResult(i, result, done, doneBreak);
      }),
      onDone: !onResult && (() => {
        return done();
      }),
      rethrowIfPossible: rethrowIfPossible && (firstAsync < 0 || i < firstAsync)
    });
  };
  return next(0);
}

如上代码：if(this.options.taps.length === 0) { return onDone(); } 的含义：如果 taps 处理完毕后或一个taps的长度都没有的话，就执行 onDone 方法，返回一个空字符串。

const firstAsync = this.options.taps.findIndex(t => t.type !== "sync"); 如果第一个异步的下标index. 通过t.type !== 'sync' 来判断，如果没有异步的话，就返回 -1; findIndex的使用方式如下所示：

下面我们来看这个函数调用，如下next方法如下所示：

const next = i => {
  if(i >= this.options.taps.length) {
    return onDone();
  }
  const done = () => next(i + 1);
  const doneBreak = (skipDone) => {
    if(skipDone) return "";
    return onDone();
  }
  return this.callTap(i, {
    onError: error => onError(i, error, done, doneBreak),
    onResult: onResult && ((result) => {
      return onResult(i, result, done, doneBreak);
    }),
    onDone: !onResult && (() => {
      return done();
    }),
    rethrowIfPossible: rethrowIfPossible && (firstAsync < 0 || i < firstAsync)
  });
};
return next(0);

默认情况下，我们看到 i = 0; 开始传递参数进去，如果 i 大于我们的注册事件函数的 this.taps的数组的话，就直接返回我们上面的 onDone()方法。如果不大于，就定义 done 函数，依次递归调用该next()函数，注意我们这边的 done 函数目前还没有被执行到。只是定义了一个 done函数方法放在这里，接下来就是我们的 doneBreak 函数了，它接收一个参数为 skipDone；如果有该参数的话，直接返回空字符串，否则的话，返回调用 onDone() 方法。最关键的一步在最后，最后我们返回了 this.callTap 这个函数，也就是说，我们的 callTapsSeries 函数方法的返回值决定于 callTap 这个方法的返回值。之前我们定义了 done() 函数递归调用及定义了 doneBreak 函数都是为 callTap 函数做准备的。callTap函数接收2个参数，第一个参数为 i 值，第二个参数为一个对象，该对象定义了 onError，onResult 及 onDone，rethrowIfPossible 函数。

callTap 函数变成如下：

this.callTap(i, {
  onError: function(error) {
    onError(i, error, done, doneBreak);
  },
  onResult: onResult && function(result) {
    return onResult(i, result, done, doneBreak);
  },
  onDone: !onResult && function() {
    return done();
  },
  rethrowIfPossible: rethrowIfPossible && (firstAsync < 0 || i < firstAsync)
});

如上就是callTap函数的最终形式了，如果有onResult的话，就会返回一个匿名函数function, 然后我们调用该函数onResult即可。
如果我们没有 onResult 函数话，那么我们可以调用 done函数，该done函数我们上面定义了如下代码：const done = () => next(i + 1); 因此如果我们没有传递onResult函数的话，它会依次循环我们之前使用 this.taps保存的所有事件，然后依次循环该事件对应的回调函数。就好比我们下面的demo一样当我们调用 call 方法后，它会依次调用该回调函数，然后输出信息出来，如下demo：

const { SyncHook } = require('tapable');

const h1 = new SyncHook(['xxx']);

h1.tap('A', function(args) {
  console.log('A', args);
  return 'b';
});

h1.tap('B', function() {
  console.log('b');
});

h1.tap('C', function() {
  console.log('c');
});
h1.tap({
  name: 'F',
  before: 'D'
}, function() {
  
});
h1.tap({
  name: 'E',
  before: 'C'
}, function() {

});
h1.tap('D', function() {
  console.log('d');
});
h1.call(7777);

如上依次输出 A 7777 b c d

我们再看看 rethrowIfPossible: rethrowIfPossible && (firstAsync < 0 || i < firstAsync) rethrowIfPossible 默认返回true，因此会执行后面的语句，如果我们的注册事件中有异步函数的话，那么我们的 firstAsync 参数就会返回该异步函数的索引值，因为我们上面的demo，注册事件没有异步函数，因此我们的 firstAsync 返回的值是 -1; 因此 -1 < 0; 因此返回true；后面的 i < firstAsync; 看不看无所谓，因为这里使用了 || 这个语句符。当然如果我们注册事件中有异步函数的话，那么我们就会继续判断 i < firstAsync 这个语句了。如果rethrowIfPossible 是false的话，那么当前的钩子函数的类型就不是 sync，可能是Async或promise类型了。

下面我们来看下 callTap 函数，代码如下所示：

/*
  tapIndex 是下标索引。
  onError： onError(i, error, done, doneBreak);
  onResult：undefined, 因为上面调用的时候 没有 onResult 这个参数，所以返回undefined
  onDone: done(); 会递归调用我们上面的 next() 函数。
  rethrowIfPossible：默认为true.
   如果为false的话，说明当前的钩子不是 sync，如果为true的话，说明当前的钩子函数是 Async 或 Promise
 */
 callTap(tapIndex, { onError, onResult, onDone, rethrowIfPossible }) {
  let code = "";
  let hasTapCached = false;
  // 遍历拦截器，如果有拦截器的话，如果有就执行拦截器的tap函数
  for(let i = 0; i < this.options.interceptors.length; i++) {
    const interceptor = this.options.interceptors[i];
    if(interceptor.tap) {
      if(!hasTapCached) {
        /*
         如下代码，我们调用 this.getTap(tapIndex)方法后，会生成 `var _tap[0] = _tap[0]` 等这样的字符串。
         生成完成后，我们设置 hasTapCached 为true。如果有多个拦截器的话，我们也会执行一次。
         注意：我们这边获取 _taps 对象的下标是使用我们传进来的参数 tapIndex。在for循环中，我们的tapIndex值不会改变的
         。
        */
        code += `var _tap${tapIndex} = ${this.getTap(tapIndex)};\n`;
        hasTapCached = true;
      }
      /*
        下面的代码返回的是：code += `_interceptors[0].tap(_tap0)`;
        首先会判断该拦截器是否有 context 这个属性，如果有的话就获取 _context 这个属性，否则的话就空字符串。
      */
      code += `${this.getInterceptor(i)}.tap(${interceptor.context ? "_context, " : ""}_tap${tapIndex});\n`;
    }
  }
  /*
   下面的代码返回了：
   code += `var _fn0 = _x[0]`
  */
  code += `var _fn${tapIndex} = ${this.getTapFn(tapIndex)};\n`;
  // 获取 this.taps的索引，获取第一个或第n个
  const tap = this.options.taps[tapIndex];
  // 判断类型，是否是 sync, Async 及 Promise 对象的
  /*
   rethrowIfPossible 默认为true，同步执行，如果有异步的话，rethrowIfPossible 返回false，就执行if语句代码，
   因此代码 code += `var _hasError0 = false`; code += "try { \n" 这样的，如果是异步的话，因为要保证异步顺序的
   问题，因此这边使用了 try catch 这样的语句，防止报错发生。
  */
  switch(tap.type) {
    case "sync":
      if(!rethrowIfPossible) {
        code += `var _hasError${tapIndex} = false;\n`;
        code += "try {\n";
      }
      /*
       判断 onResult 是否为true还是false, 
       如果为true的话，那么 code += `var _result0 = _fn0(options)`
       如果为false的话，code += `_fn0(options)`; 这样的方法调用
      */
      if(onResult) {
        code += `var _result${tapIndex} = _fn${tapIndex}(${this.args({
          before: tap.context ? "_context" : undefined
        })});\n`;
      } else {
        code += `_fn${tapIndex}(${this.args({
          before: tap.context ? "_context" : undefined
        })});\n`;
      }
      // 把catch语句拼接上
      if(!rethrowIfPossible) {
        code += "} catch(_err) {\n";
        code += `_hasError${tapIndex} = true;\n`;
        code += onError("_err");
        code += "}\n";
        code += `if(!_hasError${tapIndex}) {\n`;
      }
      // 有 onResult 的话，code += onResult(`_result0`); 就调用该方法执行。这边是字符串拼接。
      if(onResult) {
        code += onResult(`_result${tapIndex}`);
      }
      // 如果有 onDone() 方法的话，就开始递归调用。我们之前有 next(i+1); 这样的递归。
      if(onDone) {
        code += onDone();
      }
      if(!rethrowIfPossible) {
        code += "}\n";
      }
      /*
       因此如果我们注册的是同步事件的话，那么我们的最终代码就变成如下：
       var _tap[0] = _tap[0];
       _interceptors[0].tap(_tap0);
       var _fn0 = _x[0];
       _fn0(options);

       如果我们的this.taps 有多个同步事件的话，会依次类推... 因此会有如下这样的：
       var _tap[0] = _tap[0];
       _interceptors[0].tap(_tap0);
       var _fn0 = _x[0];
       _fn0(options);

       var _tap[1] = _tap[1];
       _interceptors[1].tap(_tap1);
       var _fn1 = _x[1];
       _fn0(options);
       ..... 依次类推
      */
      break;
    case "async":
      let cbCode = "";
      if(onResult)
        cbCode += `(_err${tapIndex}, _result${tapIndex}) => {\n`;
      else
        cbCode += `_err${tapIndex} => {\n`;
      cbCode += `if(_err${tapIndex}) {\n`;
      cbCode += onError(`_err${tapIndex}`);
      cbCode += "} else {\n";
      if(onResult) {
        cbCode += onResult(`_result${tapIndex}`);
      }
      if(onDone) {
        cbCode += onDone();
      }
      cbCode += "}\n";
      cbCode += "}";
      code += `_fn${tapIndex}(${this.args({
        before: tap.context ? "_context" : undefined,
        after: cbCode
      })});\n`;
      break;
    case "promise":
      code += `var _hasResult${tapIndex} = false;\n`;
      code += `_fn${tapIndex}(${this.args({
        before: tap.context ? "_context" : undefined
      })}).then(_result${tapIndex} => {\n`;
      code += `_hasResult${tapIndex} = true;\n`;
      if(onResult) {
        code += onResult(`_result${tapIndex}`);
      }
      if(onDone) {
        code += onDone();
      }
      code += `}, _err${tapIndex} => {\n`;
      code += `if(_hasResult${tapIndex}) throw _err${tapIndex};\n`;
      code += onError(`_err${tapIndex}`);
      code += "});\n";
      break;
  }
  return code;
}

getTap(idx) {
  return `_taps[${idx}]`;
}

getInterceptor(idx) {
  return `_interceptors[${idx}]`;
}

getTapFn(idx) {
  return `_x[${idx}]`;
}

因此我们这边同步事件在 SyncHook 类中的 compile方法：

compile(options) {
  factory.setup(this, options);
  return factory.create(options);
}

在返回代码之前，我们还是整理下整个思路吧，我们首先在 Hook类中代码如下：

class Hook {
  _createCall(type) {
    return this.compile({
      taps: this.taps,
      interceptors: this.interceptors,
      args: this._args,
      type: type
    });
  }
}

在我们的子类 SyncHook中重写了 compile 该方法，代码如下：

compile(options) {
  factory.setup(this, options);
  return factory.create(options);
}

因此我们会调用 setup该方法，代码如下：

setup(instance, options) {
  instance._x = options.taps.map(t => t.fn);
}

最后我们会调用 factory.create(options); 这句代码，因此会调用 HookCodeFactory.js 代码中的 create()方法。
该方法判断了三种类型，分别为 sync, Async, promise 等。因为我们这边都是同步事件，因此会调用 sync 这个case情况。
因此我们最终代码返回变成如下：

"use strict"
function(options) {
  // 我们首先执行 HookCodeFactory类中的 header() 方法生成代码
  var _context;
  var _x = this._x;

  // 如果我们有拦截器的话，下面代码也会生成的，如果没有就忽略下面三句代码：
  var _taps = this.taps;
  var _interceptors = this.interceptors;
  /* 
    如果我们只有一个拦截器的话，只会生成一个，如果我们有多个的话，就会使用for循环生成多个
  */
  _interceptors[0].call(options); 

  // 下面就是我们的callTap函数返回的代码了
   var _tap[0] = _tap[0];
   _interceptors[0].tap(_tap0);
   var _fn0 = _x[0];
   _fn0(options);

   var _tap[1] = _tap[1];
   _interceptors[1].tap(_tap1);
   var _fn1 = _x[1];
   _fn0(options);
   ..... 依次类推
}

如上差不多就是一整个同步事件的流程了。至于其他的异步Async 和 promise，大家有空可以去折腾一下，里面的逻辑有点多。
按照上面的我们思路也可以简单的折腾下了。我们可以看到，我们上面的同步事件的demo是如何被执行的，及它的回调函数是什么时候被执行的。当然里面还有很多参数判断，我们可以去根据API文档或他们写的测试用例去理解下应该差不多了。

Webpack(二十五)：webpack4核心模块tapable

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

构建工具：Webpack