当前位置：首页 > JavaScript

js eventbus实现

2026-02-01 15:07:30JavaScript

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

  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 EventBus!');

// 一次性订阅
bus.once('greet', (name) => {
  console.log(`Hello ${name}, this will only fire once!`);
});

bus.emit('greet', 'Alice'); // 触发
bus.emit('greet', 'Bob');   // 不触发

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

支持异步事件处理

如果需要支持异步事件处理，可以修改 emit 方法：

async emitAsync(eventName, ...args) {
  const callbacks = this.events[eventName];
  if (callbacks) {
    for (const callback of callbacks) {
      await callback(...args);
    }
  }
}

支持事件优先级

可以通过扩展实现带优先级的事件监听：

on(eventName, callback, priority = 0) {
  if (!this.events[eventName]) {
    this.events[eventName] = [];
  }
  this.events[eventName].push({ callback, priority });
  this.events[eventName].sort((a, b) => b.priority - a.priority);
}

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

防止内存泄漏

在大型应用中，建议添加清除机制：

clear() {
  this.events = {};
}

在 Vue 中的使用

Vue 本身提供了 $emit 和 $on 方法，但全局 EventBus 可以这样实现：

// eventBus.js
import Vue from 'vue';
export default new Vue();

// 组件A
import eventBus from './eventBus';
eventBus.$on('event', handler);

// 组件B
import eventBus from './eventBus';
eventBus.$emit('event', data);