发布订阅模式

概述

发布-订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发送改变时，所有依赖于它的对象都将得到状态改变的通知。

订阅者（Subscriber）把自己想订阅的事件注册（Subscribe）到调度中心（Event Channel），当发布者（Publisher）发布该事件（Publish Event）到调度中心，也就是该事件触发时，由调度中心统一调度（Fire Event）订阅者注册到调度中心的处理代码。

代码实现

class EventChannel {
  private handles: { [key: string]: Function[] } = {}
  on(event: string, callback: (...args: any[]) => void) {
    if (!this.handles[event]) this.handles[event] = []
    if (!this.handles[event].includes(callback)) this.handles[event].push(callback)
  }

  once(event: string, callback: (...args: any[]) => void) {
    function fn(this: EventChannel, ...args: any[]) {
      callback.apply(this, args)
      this.off(event, fn)
    }
    this.on(event, fn)
  }

  off(event: string, callback: Function) {
    if (this.handles[event]) {
      const index = this.handles[event].findIndex(fn => fn === callback)
      index > -1 && this.handles[event].splice(index, 1)
    }
  }

  emit(event: string, ...args: any[]) {
    if (this.handles[event]) {
      this.handles[event].forEach(fn => {
        fn.apply(this, args)
      })
    }
  }
}

应用场景

• vue组件通信事件总线