如何封装一个 JavaScript 的轻量级事件总线（Event Bus）

未分类

发布于：2022年3月5日

次浏览

1. 引言

在前端开发中，组件之间的通信是一项常见需求。虽然常用的库（如 Redux 或 Vuex）可以解决状态管理问题，但有时我们只需要一个简单的事件总线（Event Bus），来让组件之间交换事件，而不引入复杂的状态管理工具。

接下来我们将一步步实现一个轻量级 JavaScript 事件总线，并介绍其应用场景和最佳实践。

2. 什么是事件总线？

事件总线是一种发布-订阅模式（Publish-Subscribe）的实现。其核心思想是将事件的发布者和订阅者解耦，让它们无需直接相互依赖。事件总线扮演的是一个中央通道的角色，负责协调不同组件之间的事件通知。

3. 实现一个简单的事件总线

下面我们使用 JavaScript 的原生能力来封装一个简单易用的事件总线。

基础实现：

class EventBus {
  constructor() {
    this.events = new Map(); // 使用 Map 存储事件
  }

  // 注册事件监听器
  on(eventName, listener) {
    if (!this.events.has(eventName)) {
      this.events.set(eventName, []);
    }
    this.events.get(eventName).push(listener);
  }

  // 触发事件
  emit(eventName, ...args) {
    if (this.events.has(eventName)) {
      this.events.get(eventName).forEach(listener => listener(...args));
    }
  }

  // 取消注册事件监听器
  off(eventName, listener) {
    if (!this.events.has(eventName)) return;
    const listeners = this.events.get(eventName).filter(fn => fn !== listener);
    this.events.set(eventName, listeners);
  }

  // 清除所有事件监听器
  clear() {
    this.events.clear();
  }
}

// 导出一个单例事件总线
const eventBus = new EventBus();
export default eventBus;

4. 使用方法

4.1 注册事件监听器

import eventBus from './eventBus';

// 注册一个事件监听器
eventBus.on('userLoggedIn', (user) => {
  console.log(`用户 ${user.name} 已登录`);
});

4.2 触发事件

1 2	// 触发 'userLoggedIn' 事件 eventBus.emit('userLoggedIn', { name: 'Alice' });

输出：

1	用户 Alice 已登录

4.3 取消事件监听

const onUserLoggedOut = () => console.log('用户已登出');

// 注册并取消监听器
eventBus.on('userLoggedOut', onUserLoggedOut);
eventBus.off('userLoggedOut', onUserLoggedOut);

// 尝试触发（不会有任何输出）
eventBus.emit('userLoggedOut');

4.4 清除所有事件

1 2	// 清除所有事件监听器 eventBus.clear();

5. 进阶功能：一次性监听（once）

有时候，我们希望某个监听器只响应一次事件，这可以通过扩展 on 方法来实现。

class EventBus {
  // 省略其他方法...

  // 一次性监听事件
  once(eventName, listener) {
    const wrapper = (...args) => {
      listener(...args);
      this.off(eventName, wrapper); // 自动取消监听
    };
    this.on(eventName, wrapper);
  }
}

使用 once 监听事件

eventBus.once('dataLoaded', (data) => {
  console.log('数据已加载:', data);
});

// 第一次触发会响应
eventBus.emit('dataLoaded', [1, 2, 3]); // 输出: 数据已加载: [1, 2, 3]

// 第二次触发不会响应
eventBus.emit('dataLoaded', [4, 5, 6]);