也可以使用现有的第三方库来实现: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实现自定义事件