手写eventBus

// 发布订阅模式
const cb = ()=>{
  console.log('触发了')
}

// 监听器
document.addEventListener('aa', cb,{
  once: true // 只执行一次
})

// 删除监听器
document.removeEventListener('aa', cb)

// 订阅中心
const e = new Event('aa')

// 发布
document.dispatchEvent(e)

// eventBus实现
interface I {
  events: Map<string,Function[]>
  once: (event: string, callback: Function)=> void // 触发一次订阅
  on: (event: string, callback: Function)=> void // 订阅
  emit: (event: string, ...args: any[])=> void // 派发
  off: (event: string, callback: Function)=> void // 删除监听器
}

class Emitter implements I {
  events: Map<string,Function[]>;

  constructor() {
    this.events = new Map()
  }

   //只执行一次
  once(event: string, callback: Function) {
    // 创建一个自定义函数，通过on触发，触发完成之后立刻off回收掉
    const cb = (...args: any[]) => {
      callback(...args)
      this.off(event, cb)
    }
    this.on(event, cb)
  }

  off(event: string, callback: Function) {
    const callbackList = this.events.get(event)
    if(callbackList) {
      callbackList.splice(callbackList.indexOf(callback), 1)
    }
  }

  emit(event: string, ...args: any[]) {
    const callbackList = this.events.get(event)
    if(callbackList) {
      callbackList.forEach(fn=> {
        fn(...args)
      })
    }
  }

  on(event: string, callback: Function) {
    if (this.events.has(event)) {
      const callbackList = this.events.get(event)
      callbackList && callbackList.push(callback)
    } else {
      this.events.set(event, [callback])
    }
  }
}

const bus = new Emitter()

const fn = (b) => {
  console.log(b)
}

bus.on('message', fn)
// bus.off('message', fn)
// bus.once('message', fn)

bus.emit('message',123)