当前位置：首页 > JavaScript

js 实现eventbus

2026-02-01 21:54:15JavaScript

实现 EventBus 的基本结构

EventBus 是一种发布/订阅模式，允许组件间通过事件通信。以下是核心功能实现：

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

订阅事件（on 方法）

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

js 实现eventbus

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

发布事件（emit 方法）

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

js 实现eventbus

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);
}

完整实现代码

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);
  }
}

使用示例

const bus = new EventBus();

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

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

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

// 只会触发一次
bus.emit('alert', 'First');
bus.emit('alert', 'Second');

// 取消订阅
const handler = (data) => console.log(data);
bus.on('data', handler);
bus.off('data', handler);