当前位置：首页 > JavaScript

js 实现eventbus

2026-04-06 14:55:47JavaScript

实现 EventBus 的基本结构

EventBus 是一种发布/订阅模式，用于组件或模块间的通信。以下是一个简单的 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);
    }
  }
}

使用示例

const bus = new EventBus();

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

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

// 取消订阅
const handler = (text) => console.log(`Handler: ${text}`);
bus.on('message', handler);
bus.off('message', handler);

支持一次性事件

可以扩展 EventBus 以支持一次性事件监听：

class EventBus {
  // ... 其他方法同上

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

支持异步事件

如果需要异步触发事件，可以使用 Promise 或 setTimeout：

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

错误处理

为事件回调添加错误处理逻辑：

emit(eventName, ...args) {
  const callbacks = this.events[eventName];
  if (callbacks) {
    callbacks.forEach(callback => {
      try {
        callback(...args);
      } catch (error) {
        console.error(`Event "${eventName}" error:`, error);
      }
    });
  }
}

支持命名空间

为事件添加命名空间支持，避免事件名冲突：

js 实现eventbus

on(namespace, eventName, callback) {
  const fullEventName = `${namespace}:${eventName}`;
  this.on(fullEventName, callback);
}

emit(namespace, eventName, ...args) {
  const fullEventName = `${namespace}:${eventName}`;
  this.emit(fullEventName, ...args);
}