当前位置：首页 > JavaScript

js 实现 eventbus

2026-02-02 09:37:25JavaScript

实现 EventBus 的基本结构

EventBus 是一种发布/订阅模式，用于组件或模块间的通信。以下是一个简单的 JavaScript 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 onceWrapper = (...args) => {
      callback(...args);
      this.off(eventName, onceWrapper);
    };
    this.on(eventName, onceWrapper);
  }
}

错误处理

添加事件触发时的错误处理机制：

class EventBus {
  // ... 原有代码

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

支持异步事件

如果需要支持异步事件处理：

class EventBus {
  // ... 原有代码

  async emitAsync(eventName, ...args) {
    const callbacks = this.events[eventName];
    if (callbacks) {
      await Promise.all(callbacks.map(callback => callback(...args)));
    }
  }
}

完整实现

结合以上特性的完整实现：

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

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

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

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

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

  async emitAsync(eventName, ...args) {
    const callbacks = this.events[eventName];
    if (callbacks) {
      await Promise.all(callbacks.map(callback => callback(...args)));
    }
  }
}

这个实现提供了基本的 EventBus 功能，可以根据需要进一步扩展。

js 实现 eventbus