JS/TS事件（订阅）处理机制：EventEmitter

前言

EventEmitter 是一个Node.js 的核心模块中的类，它用于处理事件的机制，常见于各种 JavaScript/TypeScript 应用中，尤其是在前端框架和库中。

简单用法

1. 创建 EventEmitter 实例：

   import { EventEmitter } from 'events';
   const myEventEmitter = new EventEmitter();
   

2. 添加事件监听器：

   myEventEmitter.on('eventName', (arg1, arg2) => {
     console.log('Event received with arguments:', arg1, arg2);
   });
   

3. 触发事件：

   myEventEmitter.emit('eventName', 'arg1', 'arg2');
   

4. 一次性订阅：

   myEventEmitter.once('onceEvent', () => {
     console.log('This listener will be called only once.');
   });

5. 移除事件监听器：

   myEventEmitter.off('eventName', listenerFunction);

简单原理介绍

EventEmitter 的基本原理是使用发布-订阅模式。它维护了一个事件名到事件处理函数列表的映射。当使用 on 方法添加一个事件监听器时，它会将对应事件名的处理函数加入到列表中。当使用 emit 方法触发一个事件时，它会调用对应事件名的所有处理函数。

下面是 EventEmitter 的基本实现思路的简化示例：

type EventMap = Record;

class EventEmitter {
  private events: EventMap = {};

  on(eventName: string, listener: Function) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(listener);
  }

  emit(eventName: string, ...args: any[]) {
    const listeners = this.events[eventName] || [];
    for (const listener of listeners) {
      listener(...args);
    }
  }

  off(eventName: string, listener: Function) {
    const listeners = this.events[eventName];
    if (listeners) {
      const index = listeners.indexOf(listener);
      if (index !== -1) {
        listeners.splice(index, 1);
      }
    }
  }
}

// 使用示例
const myEventEmitter = new EventEmitter();
myEventEmitter.on('myEvent', (arg1, arg2) => {
  console.log('Event received with arguments:', arg1, arg2);
});
myEventEmitter.emit('myEvent', 'arg1', 'arg2');

注意点

建议不要在触发监听的回调listener中去取消监听，可能会有不可预知的问题。