js实现自定义事件

也可以使用现有的第三方库来实现：EventEmitter3

JS的事件是基于“监听和回调”机制的，回调函数负责对事件的处理。通过自定义触发事件，并且声明回调函数，在恰当的时候对自定义事件进行触发。

跟观察者模式是相似的。

1、定义一个事件处理类

// EventEmitter.ts
export enum EventName {
  NavigationStart,
  NavigationError,
  GuardNotExecuted,
  GuardRedirected,
  GuardRejected,
  GuardPassed,
}
 
class EventEmitter {
  // 保存事件的回调函数
  listeners: {
    [key in EventName]: Set<(event: EventName, data: any) => unknown>;
  } = {
    [EventName.NavigationStart]: new Set(),
    [EventName.NavigationError]: new Set(),
    [EventName.GuardNotExecuted]: new Set(),
    [EventName.GuardRedirected]: new Set(), 
    [EventName.GuardRejected]: new Set(),
    [EventName.GuardPassed]: new Set(), 
  };
 
  // 触发
  emit(event: EventName, data?: any) {
    const listeners = this.listeners[event];
    if (listeners) {
      for (const listener of listeners) {
        listener(event, data);
      }
    }
  } 
    
  // 监听
  addListener(event: EventName, callback: (event: EventName, data: any) => unknown) {
    const listeners = this.listeners[event];
    if (listeners) {
      listeners.add(callback);
    }
    return {
      remove: () => {
        if (listeners) {
          listeners.delete(callback);
        }
      },
    };
  } }

2、实例化事件对象，监听，并触发

class RouteCenter extends EventEmitter {
  constructor() {
    super();
  }
}

export routeCenter = new RouteCenter();

一定要让代码先 addListener 再 emit ！！！

import 'routeCenter' from '../../RouteCenter'

// 监听
routeCenter.addListener(Event.NavigationStart, exportTracingAndMetrics); 

// 触发
routeCenter.emit(EventName.NavigationStart,{
   method: 'xxx',
   from: 'xxx',
   to: 'xxx',
})

参考：JavaScript自定义事件封装与应用，原生js实现自定义事件