组件通信: EventBus 的原理解析与应用

作者 anran758

2022年1月22日 10:40

在开发复杂的单页面应用时，我们经常会遇到一个问题：如何高效地在组件或模块之间进行通信？这里，EventBus（事件总线）就派上了用场。简单来说，EventBus 是一种设计模式，它允许不同组件或模块之间通过事件来通信，而无需直接引用彼此。

EventBus 是传统的组件通信解决方案，下面我们将讲解 EventBus 跨组件通信的原理、实现方式以及该如何使用。

原理解析

EventBus 的核心在于提供一个中央机制，允许不同的组件或模块相互通信，而不必直接引用对方。它是一种典型的发布-订阅（pub-sub）模式，这是一种广泛使用的设计模式，用于解耦发送者和接收者。

在这个模式中，EventBus 充当了一个中介的角色：它允许组件订阅那些它们感兴趣的事件，并在这些事件发生时接收通知。同样，当某个事件发生时，比如用户的一个动作或者数据的变化，EventBus 负责将这一消息广播给所有订阅了该事件的组件。

它基于三个核心操作：注册事件（on(event, callback)）、触发事件（emit(event, ...args)）、以及移除事件（off(event, callback)）。因此，EventBus 的基本代码可以看到：

class EventBus {
  on(event, callback) {
    // 注册事件监听器
  }

  emit(event, ...args) {
    // 触发事件
  }

  off(event, callback) {
    // 移除事件监听器
  }
}

显然，我们需要有一个私有变量来储存用户的函数，此时为类添加 events 属性。events 属性是一个对象映射，其中每个属性表示一个事件名称，对应的值是一个回调函数的数组，这个数组存储了所有订阅了该事件的回调函数。

class EventBus {
  private events: Record<string, Function[]> = {};
  // ...
}

当用户执行订阅事件 on 时，回调函数会被添加到相应事件名称的数组中。这样，同一个事件可以被不同组件或模块订阅，而每个订阅者的回调函数都会被正确地保存在事件队列中。最后，当触发事件 emit 时，事件队列中的每个回调函数都会被执行，实现了事件的触发和通知功能。若已经没有订阅需求，则可以通过 off 移除已经订阅的事件。

代码实现

接下来我们按照前文所述完善我们的代码实现：

class EventBus {
  // 事件存储对象，用于保存不同事件的回调函数
  private events: Record<string, Function[]> = {};

  /**
   * 注册事件监听器
   * @param eventName - 事件名称
   * @param callback - 回调函数，当事件触发时执行
   * @returns this - 返回 EventBus 实例，支持链式调用
   */
  public on(eventName: string, callback: Function): this {
    // 检查回调函数是否为函数类型
    if (typeof callback !== "function") {
      throw new Error("EventBus 'on' method expects a callback function.");
    }

    // 如果事件不存在，创建一个空数组用于存储回调函数
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }

    // 将回调函数添加到事件的回调函数列表中
    this.events[eventName].push(callback);

    // 支持链式调用
    return this;
  }

  /**
   * 触发事件
   * @param eventName - 要触发的事件名称
   * @param args - 传递给回调函数的参数
   * @returns this - 返回 EventBus 实例，支持链式调用
   */
  public emit(eventName: string, ...args: any[]): this {
    // 获取事件对应的回调函数列表
    const callbacks = this.events[eventName];
    if (callbacks) {
      // 遍历执行每个回调函数，并传递参数
      callbacks.forEach((callback) => callback(...args));
    }

    // 支持链式调用
    return this;
  }

  /**
   * 移除事件监听器
   * @param event - 要移除的事件名称或事件名称数组
   * @param callback - 要移除的回调函数（可选）
   * @returns this - 返回 EventBus 实例，支持链式调用
   */
  public off(event?: string | string[], callback?: Function): this {
    // 清空所有事件监听器
    if (!event || (Array.isArray(event) && !event.length)) {
      this.events = {};
      return this;
    }

    // 处理事件数组
    if (Array.isArray(event)) {
      event.forEach((e) => this.off(e, callback));
      return this;
    }

    // 如果没有提供回调函数，则删除该事件的所有监听器
    if (!callback) {
      delete this.events[event];
      return this;
    }

    // 移除特定的回调函数
    const callbacks = this.events[event];
    if (callbacks) {
      const index = callbacks.indexOf(callback);
      if (index > -1) {
        callbacks.splice(index, 1);
      }
    }

    // 支持链式调用
    return this;
  }
}

当涉及到一次性的事件监听需求时，我们可以进一步扩展 EventBus，以支持一次性事件监听。允许用户在某个事件触发后，自动移除事件监听器，以确保回调函数只执行一次：

class EventBus {
  // other code ...
  public once(eventName: string, callback: Function): this {
    const onceWrapper = (...args: any[]) => {
      this.off(eventName, onceWrapper);
      callback(...args);
    };

    this.on(eventName, onceWrapper);

    return this;
  }
}

使用方式

我们将类的封装到 event-bus.ts 中，通过模块的来管理：

1
2
3

export class EventBus {
  // ...
}

我们现在已经封装好了一个类，若我们像使用则需要实例化。此处再文件内直接实例化一个类：

1 2	// 创建 EventBus 实例并导出 export const eventBus = new EventBus();

这样使用时可以提供两种方式：

引入已经实例化的 eventBus

import { eventBus } from './event-bus';

// 订阅事件
eventBus.on('eventName', callback);

// 触发事件
eventBus.emit('eventName', data);

// 移除事件
eventBus.off('eventName', callback);

需要多个独立的事件总线实例时，或者希望在不同模块或组件之间使用不同的事件总线时，可以选择额外实例化 eventBus。这样做的目的可能是为了隔离命名的冲突、组件与模块逻辑隔离等原因。

// events.ts
import { EventBus } from './event-bus';

// 创建独立的事件总线实例
export const eventBusA = new EventBus();
export const eventBusB = new EventBus();

import {eventBusA, eventBusB} from './events'

// 在不同模块或组件中使用不同的事件总线
eventBusA.on('eventA', callbackA);
eventBusB.on('eventB', callbackB);

// 触发不同事件总线上的事件
eventBusA.emit('eventA', dataA);
eventBusB.emit('eventB', dataB);

以下是 CodeSandbox 的演示代码：

总结

在本文中，我们深入探讨了 EventBus 的原理，了解了它是如何工作的。我们学习了它的核心操作。除了本文所提及的实现方式，有时候在生产项目中，为了确保代码的可靠性，我们可以考虑使用成熟的第三方库，例如 mitt 或 tiny-emitter。

这些库已经经过广泛的测试和使用，可以提供稳定和可靠的 EventBus 功能。

普通视图

原理解析

代码实现

使用方式

总结