手寫tapable事件函數,有助於理解tapable

最近看珠峯培訓的視頻,找到了一個好用的事件函數工具,tapable工具類;寫下筆記,下次方便用在項目中;  

//SyncHook 原生使用
let {SyncHook} = require('tapable')
class Lesson{
  constructor(){
    this.hooks = new SyncHook(['name'])
  }

  tap(){
    this.hooks.tap('node',function(name){
      console.log('node',name)
    })
    this.hooks.tap('javascript',function(name){
      console.log('javascript',name)
  })
  }
  start(...args){
    this.hooks.call(...args)
  }
}

let l = new Lesson()
l.tap();
l.start('1');
l.start('2');

//SyncHook 模擬-------------------------------------
class Lesson{
  constructor(){
    this.hooks = []
  }

  tap(){
    this.hooks.push(function(name){
      console.log('node',name)
    })

    this.hooks.push(function(name){
      console.log('javascript',name)
    })
  }

  start(...args){
    this.hooks.forEach(fn=>{
      fn(...args)
    })
  }
}
// 模擬同步事件
let l = new Lesson()
l.tap();
l.start('11');
l.start('22');

//SyncWaterfallHook原生-------------------------------------

let {SyncWaterfallHook} = require('tapable')
class Lesson{
  constructor(){
    this.hooks = new SyncWaterfallHook(['name'])
  }

  tap(){
    this.hooks.tap('node',function(name){
      console.log('node',name)
      return 'node'+name
    })
    this.hooks.tap('javascript',function(name){
      console.log('javascript',name)
  })
  }

  start(...args){
    this.hooks.call(...args)
  }
}

let l = new Lesson()
l.tap();
l.start('1');

//SyncWaterfallHook模擬-------------------------------------
class Lesson{
  constructor(){
    this.hooks = []
  }

  tap(){
    this.hooks.push(function(name){
      console.log('node',name)
      return 'node'+name
    })

    this.hooks.push(function(name){
      console.log('javascript',name)
    })
  }

  start(...args){
    this.hooks.reduce( (ret, fn) =>{
      return  fn( ret )
    }, ...args)
  }
}
// 模擬瀑布流事件
let l = new Lesson()
l.tap();
l.start('11');

//SyncBailHook-------------------------------------
let {SyncBailHook} = require('tapable')
class Lesson{
  constructor(){
    this.hooks = new SyncWaterfallHook(['name'])
  }

  tap(){
    this.hooks.tap('node',function(name){
      console.log('node',name)
      return 'node 中斷'
    })
    this.hooks.tap('javascript',function(name){
      console.log('javascript',name)
  })
  }

  start(...args){
    this.hooks.call(...args)
  }
}

let l = new Lesson()
l.tap();
l.start('1');

//SyncBailHook模擬-------------------------------------

class Lesson{
  constructor(){
    this.hooks = []
  }
  tap(){
    this.hooks.push(function(name){
      console.log('node',name)
    })
    this.hooks.push(function(name){
      console.log('javascript',name)
    })
  }

  start(...args){
    let index = 0;
    let ret 
    do{
      ret = this.hooks[index++](...args)
    }while(index<this.hooks.length && ret == undefined )
  }
}
// 模擬保險事件流
let l = new Lesson()
l.tap();
l.start('11');

//SyncLoopHook-------------------------------------
let {SyncLoopHook} = require('tapable')
class Lesson{
  constructor(){
    this.hooks = new SyncLoopHook(['name'])
    this.count = 1
  }

  tap(){
    this.hooks.tap('node',(name)=>{
      console.log('node',name)
      return this.count++ == 3 ? undefined:'node'+name
    })
    this.hooks.tap('javascript',(name)=>{
      console.log('javascript',name)
  })
  }

  start(...args){
    this.hooks.call(...args)
  }
}
// 循環執行,如果函數返回的非undefined,繼續執行,知道返回undefined
let l = new Lesson()
l.tap();
l.start('1');
//SyncLoopHook模擬-------------------------------------
class Lesson{
  constructor(){
    this.hooks = []
    this.count = 1
  }

  tap(){
    this.hooks.push((name)=>{
      console.log('node',name)
      return this.count++ == 3 ? undefined:'node'+name
    })

    this.hooks.push((name)=>{
      console.log('javascript',name)
    })
  }

  start(...args){
    this.hooks.forEach( fn => {
      let ret
      do{
          ret = fn(...args)
       }while( ret !== undefined )
    })
  }
}
// 模擬循環流事件
let l = new Lesson()
l.tap();
l.start('11');