【前端工程解耦】使用事件中心实现系统解耦，注册，触发，删除事件

前言

事件中心提供了一种灵活且可扩展的方式来管理事件和处理函数之间的关系，同时保持它们之间的解耦，可以降低系统耦合度，将视图和逻辑拆分出来，还是那句话，如果一个中间件解决不了问题，那就再加一个

---

废话不多说，直接贴代码

type EventHandler = (...args: any[]) => void;

class EventCenter {
  private listeners: Map<string, EventHandler> = new Map();

  $on(event: string, callback: EventHandler) {
    
    if (this.listeners.has(event)) {
      console.error(`事件异常注册:事件 "${event}" 已存在，如需重新注册请调用 $delete(${event}) 移除事件`);
      return ;
    }
    
    this.listeners.set(event, callback);
  }

  $delete(event: string) {
    this.listeners.delete(event);
  }

  $emit(event: string, ...args: any[]) {
    const callback = this.listeners.get(event);
    if (callback) {
      callback(...args);
    }
  }
}

export const eventCenter = new EventCenter();

---

注册事件

eventCenter.$on(event: string, callback: EventHandler) 

订阅事件

eventCenter.$emit(event: string, ...args: any[])

移除事件

eventCenter.$delete(event: string)

---