用typescript实现IEventDispatcher 接口

38 阅读1分钟
  • 首先,定义一个 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 的类,实现事件的订阅、取消订阅和触发等功能。