一.SyncHook

前言

同步执行全部，队列顺序

• 所有的构造函数都接收一个可选参数，参数是一个参数名的字符串数组
• 参数的名字可以任意填写，但是参数数组的长度必须要跟实际接受的参数个数一致
• 如果回调函数不接受参数，可以传入空数组
• 在实例化的时候传入的数组长度长度有用，值没有用途
• 执行 call 时，参数个数和实例化时的数组长度有关
• 回调的时候是按先入先出的顺序执行的，先放的先执行

1.使用方式

1.安装

yarn add tapable -D

2.新建 1.start.js 文件

let { SyncHook } = require("tapable")

class Lesson {
  constructor() {
    this.hooks = {
      arch: new SyncHook(["name"]),
    }
  }
  tap() {
    //注册监听函数
    this.hooks.arch.tap("node", function (name) {
      console.log("node", name)
    })
    this.hooks.arch.tap("react", function (name) {
      console.log("react", name)
    })
  }
  statr() {
    this.hooks.arch.call("123")
  }
}
let l = new Lesson()
l.tap() //注册这两个事件
l.statr() //启动钩子

运行得到：

node 123
react 123

2.实现原理

class SyncHook {
  //同步方法
  constructor(args) {
    //args => ['name']
    this.tasks = []
  }
  tap() {
    this.tasks.push(task)
  }
  call(...args) {
    this.tasks.forEach((element) => {
      element(...args)
    })
  }
}
let hook = new SyncHook(["name"])
hook.tap("node", function (name) {
  console.log("node", name)
})
hook.tap("react", function (name) {
  console.log("react", name)
})
hook.call("123")