Home JavaScript JavaScript 手写原理

# 自定义事件总线

  • 自定义事件总线属于一种观察者模式，其中包括三个角色：
    • 发布者（Publisher）：发出事件（Event）
    • 订阅者（Subscriber）：订阅事件（Event），并且会进行响应（Handler）
    • 事件总线（EventBus）：无论是发布者还是订阅者都是通过事件总线作为中台的
  • 当然我们可以选择一些第三方的库：
    • Vue2 默认是带有事件总线的功能
    • Vue3 中推荐一些第三方库，比如 mitt
  • 当然我们也可以实现自己的事件总线：
    • 事件的监听方法 on
    • 事件的发射方法 emit
    • 事件的取消监听 off

# _EventBus 实现

class _EventBus {
  constructor() {
    this.eventBus = {}
  }
  on(eventName, eventCallback, thisArg) {
    // 根据 eventName 取 eventBus 里面的函数
    let handlers = this.eventBus[eventName]
    if (!handlers) {
      handlers = []
      this.eventBus[eventName] = handlers
    }
    // 将函数与参数添加进数组
    handlers.push({
      eventCallback,
      thisArg
    })
  }
  off(eventName, eventCallback) {
    const handlers = this.eventBus[eventName]
    if (!handlers) return
    const newHandlers = [...handlers]
    
    for (let i = 0; i < newHandlers.length; i++){
      const handler = newHandlers[i]
      if (handler.eventCallback === eventCallback) {
        const index = handlers.indexOf(handler)
        handlers.splice(index, 1)
      }
    }
  }
  emit(eventName, ...payload) {
    const handlers = this.eventBus[eventName]
    if (!handlers) return
    handlers.forEach(handler => {
      handler.eventCallback.apply(handler.thisArg, payload)
    })
  }
}