- 首先,定义一个
IEventDispatcher接口,其中包含事件相关的方法。
interface IEventDispatcher {
addEventListener(eventType: string, listener: Function): void;
removeEventListener(eventType: string, listener: Function): void;
dispatchEvent(eventType: string, eventData?: any): void;
}
- 接下来,创建一个实现
IEventDispatcher接口的类,并在该类中实现接口中的方法。
class EventDispatcher implements IEventDispatcher {
private listeners: { [eventType: string]: Function[] } = {};
addEventListener(eventType: string, listener: Function): void {
if (!(eventType in this.listeners)) {
this.listeners[eventType] = [];
}
this.listeners[eventType].push(listener);
}
removeEventListener(eventType: string, listener: Function): void {
if (eventType in this.listeners) {
const index = this.listeners[eventType].indexOf(listener);
if (index !== -1) {
this.listeners[eventType].splice(index, 1);
}
}
}
dispatchEvent(eventType: string, eventData?: any): void {
if (eventType in this.listeners) {
const eventListeners = this.listeners[eventType].slice();
eventListeners.forEach((listener) => {
listener(eventData);
});
}
}
}
在上述代码中,我们使用一个字典 listeners 来存储不同类型的事件对应的监听器数组。addEventListener 方法用于将监听器添加到相应的事件类型中,removeEventListener 方法用于从事件类型中移除监听器,dispatchEvent 方法用于触发相应类型的事件并调用对应的监听器。
现在,创建一个 EventDispatcher 的实例,并使用它来处理事件。
const eventDispatcher = new EventDispatcher();
function eventHandler(data: any) {
console.log('Event received:', data);
}
eventDispatcher.addEventListener('myEvent', eventHandler);
eventDispatcher.dispatchEvent('myEvent', 'Hello, Event!');
// 输出: Event received: Hello, Event!
eventDispatcher.removeEventListener('myEvent', eventHandler);
eventDispatcher.dispatchEvent('myEvent', 'This event handler should not be called.');
通过实现 IEventDispatcher 接口的 EventDispatcher 类,我们可以在 TypeScript 中创建一个类似 ActionScript 3 中 IEventDispatcher 的类,实现事件的订阅、取消订阅和触发等功能。