手写Mitt实现事件订阅、发布和取消订阅

• Mitt类设计

1. emitter属性：用于存储事件和对应的处理器

2. on方法：订阅事件

3. off方法：取消订阅事件

4. emit方法：触发事件

export class Mitt<T> {

  private readonly emitter: Record<string, Array<(value: T[keyof T]) => void>> = {};

  /**
   * 订阅事件
   * @param eventName 事件名称，应为T的属性名
   * @param cb 事件处理函数
   */
  on(eventName : string, cb : ( value : T[keyof T]) => void ) {
    this.emitter[eventName] ? this.emitter[eventName].push(cb) : this.emitter[eventName] = [cb];
  }


  /**
   * 取消订阅事件
   * @param eventName 事件名称，应为T的属性名
   * @param cb 事件成功回调
   */
  off(eventName: string, cb?: () => void): void {
    delete this.emitter[eventName];
    if (cb) { cb(); }
  }

   /**
    * 取消所有订阅事件
    */
  offAll() {
    Object.keys(this.emitter).forEach(key => {
      delete this.emitter[key];
    });
  }


  /**
   * 发布事件
   * @param eventName 事件名称，应为T的属性名
   * @param value 事件参数
   */
  emit(eventName : string, value : any) {
    if (this.emitter[eventName]) {
      this.emitter[eventName].forEach(cb => cb(value));
    }
  }

}

•  使用Mitt实例

1. 创建Mitt实例：实例化Mitt类

2. 订阅事件：调用on方法订阅事件

3. 触发事件：调用emit方法触发事件

4. 取消订阅：调用off方法取消订阅 

    import  { Mitt } from "@/utils/Mitt";

    let mitt = new Mitt();

    mitt.emit("test", [1,2,3,4]);

    mitt.on("test", (data: []) => {
      console.log(data);
    });

   setTimeout(() => {
     mitt.off("test", () => {
       console.log("取消了");
     });
   },30000);

 提示：off方法的回调参数是可选的，如果提供，会在取消订阅后执行。