如何创建自己的 JavaScript 事件总线

2023-10-24 13:25:33

理解事件总线

事件总线是一种设计模式，它允许应用程序的不同部分在不直接通信的情况下相互通信。它提供了一个中央中介，协调事件的发布和订阅。

创建 JavaScript 事件总线

创建一个 JavaScript 事件总线涉及以下步骤：

定义事件总线类： 创建一个类来封装事件总线功能。
添加事件监听器： 提供一个方法来注册事件监听器。监听器指定要侦听的事件类型及其处理函数。
触发事件： 提供一个方法来触发事件。这将通知所有已注册的监听器事件的发生。
解除事件监听器： 提供一个方法来取消事件监听器。这将阻止监听器在未来接收事件。
单次监听： 提供一个方法来注册只触发一次的单次监听器。

示例代码

class EventBus {
  constructor() {
    this.listeners = {};
  }

  on(event, listener) {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    this.listeners[event].push(listener);
  }

  emit(event, data) {
    if (this.listeners[event]) {
      this.listeners[event].forEach((listener) => listener(data));
    }
  }

  off(event, listener) {
    if (this.listeners[event]) {
      this.listeners[event] = this.listeners[event].filter(
        (l) => l !== listener
      );
    }
  }

  once(event, listener) {
    const onceListener = (...args) => {
      listener(...args);
      this.off(event, onceListener);
    };
    this.on(event, onceListener);
  }
}