js 实现 eventbus

实现 EventBus 的基本结构

EventBus 是一种发布-订阅模式的核心实现，用于组件或模块间的通信。以下是 JavaScript 中实现 EventBus 的核心代码框架：

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

订阅事件（on 方法）

通过 on 方法订阅事件，将回调函数存储在事件对应的数组中：

on(eventName, callback) {
  if (!this.events[eventName]) {
    this.events[eventName] = [];
  }
  this.events[eventName].push(callback);
}

发布事件（emit 方法）

通过 emit 方法触发事件，执行所有订阅的回调函数：

emit(eventName, ...args) {
  const callbacks = this.events[eventName];
  if (callbacks) {
    callbacks.forEach(callback => {
      callback(...args);
    });
  }
}

取消订阅（off 方法）

通过 off 方法移除指定事件的回调函数：

off(eventName, callback) {
  const callbacks = this.events[eventName];
  if (callbacks) {
    this.events[eventName] = callbacks.filter(cb => cb !== callback);
  }
}

一次性订阅（once 方法）

通过 once 方法实现仅触发一次的事件订阅：

once(eventName, callback) {
  const wrapper = (...args) => {
    callback(...args);
    this.off(eventName, wrapper);
  };
  this.on(eventName, wrapper);
}

完整代码示例

整合上述方法后的完整 EventBus 实现：

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

  on(eventName, callback) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(callback);
  }

  emit(eventName, ...args) {
    const callbacks = this.events[eventName];
    if (callbacks) {
      callbacks.forEach(callback => {
        callback(...args);
      });
    }
  }

  off(eventName, callback) {
    const callbacks = this.events[eventName];
    if (callbacks) {
      this.events[eventName] = callbacks.filter(cb => cb !== callback);
    }
  }

  once(eventName, callback) {
    const wrapper = (...args) => {
      callback(...args);
      this.off(eventName, wrapper);
    };
    this.on(eventName, wrapper);
  }
}

使用示例

以下是如何使用 EventBus 的简单示例：

const bus = new EventBus();

// 订阅事件
bus.on('message', (text) => {
  console.log(`Received: ${text}`);
});

// 发布事件
bus.emit('message', 'Hello EventBus!');

// 一次性订阅
bus.once('alert', (text) => {
  console.log(`Alert: ${text}`);
});

bus.emit('alert', 'This will only fire once.');
bus.emit('alert', 'This will not fire.');

注意事项

• 事件名建议使用字符串常量，避免硬编码。
• 在大型应用中，需注意内存泄漏问题，及时调用 off 清理无用订阅。
• 可通过扩展支持异步事件或优先级机制增强功能。