手写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');