自定义事件总线

知识回顾

事件总线属于一种观察者模式，其中包括三个角色：

• 发布者（Publisher）：发出事件（Event）；
• 订阅者（Subscriber）：订阅事件（Event），并且会进行响应（Handler）；
• 事件总线（EventBus）：无论是发布者还是订阅者都是通过事件总线作为中台的；

当然我们可以选择一些第三方的库：

• Vue2默认是带有事件总线的功能；
• Vue3中推荐一些第三方库，比如mitt；
  

自定义事件总线

:::info
实现功能：事件的监听方法on； 事件的发射方法emit； 事件的取消监听off；
:::
大体框架

class HYEventBus {
  constructor() {
    this.eventBus = {}
  }

  // 监听
  on() {
    
  }

  // 取消
  off() {
   
  }

  // 发送
  emit() {
  
  }
}

事件的监听方法on

 on(eventName, eventCallback, thisArg) {
    let handlers = this.eventBus[eventName]
    if (!handlers) {
      handlers = []
      this.eventBus[eventName] = handlers
    }
    handlers.push({
      eventCallback,
      thisArg
    })
  }

事件的取消监听off

 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

emit(eventName, ...payload) {
    const handlers = this.eventBus[eventName]
    if (!handlers) return
    handlers.forEach(handler => {
      handler.eventCallback.apply(handler.thisArg, payload)
    })
  }

使用

const eventBus = new HYEventBus()

// main.js
eventBus.on("abc", function() {
  console.log("监听abc1", this)
}, {name: "玛卡巴卡"})

const handleCallback = function() {
  console.log("监听abc2", this)
}
eventBus.on("abc", handleCallback, {name: "玛卡巴卡"})

// utils.js
eventBus.emit("abc", 123)

// 移除监听
eventBus.off("abc", handleCallback)
eventBus.emit("abc", 123)