使用TypeScript实现一个浏览器事件的集中管理

// 定义事件管理器接口
interface EventManager {
  on(event: string, handler: Function): void;
  off(event: string, handler: Function): void;
  trigger(event: string, ...args: any[]): void;
}
 
// 实现事件管理器
class BrowserEventManager implements EventManager {
  private events: { [key: string]: Function[] } = {};
 
  on(event: string, handler: Function): void {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(handler);
  }
 
  off(event: string, handler: Function): void {
    if (this.events[event]) {
      this.events[event] = this.events[event].filter(h => h !== handler);
    }
  }
 
  trigger(event: string, ...args: any[]): void {
    if (this.events[event]) {
      this.events[event].forEach(handler => handler.apply(this, args));
    }
  }
}
 
// 使用事件管理器
const eventManager = new BrowserEventManager();
 
const handler = (message: string) => {
  console.log(`Event triggered with message: ${message}`);
};
 
eventManager.on('myEvent', handler);
eventManager.trigger('myEvent', 'Hello, World!');  // 输出: Event triggered with message: Hello, World!
 
eventManager.off('myEvent', handler);

这段代码定义了一个EventManager接口，并实现了BrowserEventManager类来管理浏览器中的事件。on方法用于注册事件处理器，off方法用于注销，而trigger方法用于触发事件，调用所有注册的处理器。这是一个简单的事件管理示例，适用于学习和教育目的。