【Angular】eventDispatcher详解

news/2024/11/27 3:48:50/

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

1. 基本概念

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

2. 示例代码

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

// 定义事件类型
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 事件，此时不会有输出。