五.AsyncParallelHook

• 异步并行执行钩子

1.使用方式

let { AsyncParallelHook } = require("tapable")
//异步的钩子（串行）并行
class Lesson {
  constructor() {
    this.hooks = { arch: new AsyncParallelHook(["name"]) }
  }
  tap() {
    //注册监听函数
    this.hooks.arch.tapAsync("node", (name, cb) => {
      setTimeout(() => {
        console.log("node", name)
        cb()
      }, 1000)
    })
    this.hooks.arch.tapAsync("react", (name, cb) => {
      setTimeout(() => {
        cb()
        console.log("react", name)
      }, 1000)
    })
  }
  statr() {
    this.hooks.arch.callAsync("123", function () {
      console.log("end")
    })
  }
}
let l = new Lesson()
l.tap() //注册这两个事件
l.statr() //启动钩子

运行得到：

node 123
end
react 123

2.原理实现

class AsyncParallelHook {
  //同步方法
  constructor(args) {
    //args => ['name']
    this.tasks = []
  }
  tapAsync(name, task) {
    this.tasks.push(task)
  }
  callAsync(...args) {
    let finalCallback = args.pop()
    let index = 0
    let done = () => {
      index++
      if (index == this.tasks.length) {
        finalCallback()
      }
    }
    this.tasks.forEach((task) => {
      task(...args, done)
    })
  }
}
let hook = new AsyncParallelHook(["name"])
let total = 0
hook.tapAsync("node", (name, cb) => {
  setTimeout(() => {
    console.log("node", name)
    cb()
  }, 1000)
})
hook.tapAsync("react", (name, cb) => {
  setTimeout(() => {
    console.log("react", name)
    cb()
  }, 1000)
})

hook.callAsync("123", function () {
  console.log("end")
})

2.tapPromise 注册

1.使用

let { AsyncParallelHook } = require("tapable")
//异步的钩子（串行）并行
//tapable库中有三种注册方法 tap 同步注册 tapAsync tapPromise
class Lesson {
  constructor() {
    this.index = 0
    this.hooks = { arch: new AsyncParallelHook(["name"]) }
  }
  tap() {
    //注册监听函数
    this.hooks.arch.tapPromise("node", (name) => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log("node", name)
          resolve()
        }, 1000)
      })
    })
    this.hooks.arch.tapPromise("react", (name) => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log("react", name)
          resolve()
        }, 1000)
      })
    })
  }
  statr() {
    this.hooks.arch.promise("123").then(function () {
      console.log("end")
    })
  }
}
let l = new Lesson()
l.tap() //注册这两个事件
l.statr() //启动钩子

2.原理

class AsyncParallelHook {
  //同步方法
  constructor(args) {
    //args => ['name']
    this.tasks = []
  }
  tapPromise(name, task) {
    this.tasks.push(task)
  }
  promise(...args) {
    let tasks = this.tasks.map((task) => task(...args))
    return Promise.all(tasks)
  }
}
let hook = new AsyncParallelHook(["name"])
let total = 0
hook.tapPromise("node", (name) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("node", name)
      resolve()
    }, 1000)
  })
})
hook.tapPromise("react", (name) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("react", name)
      resolve()
    }, 1000)
  })
})

hook.promise("123").then(function () {
  console.log("end")
})