【Angular】eventDispatcher详解

eventDispatcher 是一种设计模式，用于在对象之间传递事件。它允许对象订阅和发布事件，从而实现松耦合的通信机制。以下是一个详细的解释和示例代码。

1. 基本概念

事件（Event）：一个动作或状态变化，可以被触发和监听。
发布者（Publisher）：触发事件的对象。
订阅者（Subscriber）：监听并响应事件的对象。
事件分发器（Event Dispatcher）：管理事件的发布和订阅，确保事件从发布者传递到订阅者。

2. 示例代码

假设我们有一个简单的事件分发器，用于在对象之间传递消息。

typescript 复制代码

// 定义事件类型
type EventType = 'message';

// 定义事件数据类型
interface EventData {
  message: string;
}

// 定义事件处理函数类型
type EventHandler = (data: EventData) => void;

// 事件分发器类
class EventDispatcher {
  private listeners: { [key in EventType]?: EventHandler[] } = {};

  // 订阅事件
  on(event: EventType, handler: EventHandler): void {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    this.listeners[event]?.push(handler);
  }

  // 取消订阅事件
  off(event: EventType, handler: EventHandler): void {
    if (this.listeners[event]) {
      this.listeners[event] = this.listeners[event]?.filter(h => h !== handler);
    }
  }

  // 触发事件
  emit(event: EventType, data: EventData): void {
    if (this.listeners[event]) {
      this.listeners[event]?.forEach(handler => handler(data));
    }
  }
}

// 使用示例
const eventDispatcher = new EventDispatcher();

// 定义一个事件处理函数
const handleMessage = (data: EventData) => {
  console.log(`Received message: ${data.message}`);
};

// 订阅事件
eventDispatcher.on('message', handleMessage);

// 触发事件
eventDispatcher.emit('message', { message: 'Hello, World!' });

// 取消订阅事件
eventDispatcher.off('message', handleMessage);

// 再次触发事件，此时不会有任何输出
eventDispatcher.emit('message', { message: 'Another message' });

3. 解释

定义事件类型和数据类型：
- EventType：定义了事件的类型。
- EventData：定义了事件的数据类型。
定义事件处理函数类型：
- EventHandler：定义了事件处理函数的类型。
事件分发器类：
- listeners：存储事件及其对应的处理函数列表。
- on：订阅事件，将处理函数添加到事件的处理函数列表中。
- off：取消订阅事件，从事件的处理函数列表中移除处理函数。
- emit：触发事件，调用所有订阅该事件的处理函数。
使用示例：
- 创建一个 EventDispatcher 实例。
- 定义一个事件处理函数 handleMessage。
- 订阅 message 事件。
- 触发 message 事件，打印消息。
- 取消订阅 message 事件。
- 再次触发 message 事件，此时不会有输出。

通过这种方式，你可以轻松地在对象之间传递事件，并且可以灵活地添加和移除事件处理函数。