React 封装全局事件监听 GlobalEvent(发布订阅者)

类似于vue的$root和$on，可以全局触发和监听事件，采用发布订阅者模式实现，支持单事件多响应，简单易懂。

globalEvent.ts

// globalEvent.ts
class GlobalEvent {
  private static instance: GlobalEvent;
  public eventObject: any;
  constructor() {
    this.eventObject = {};
  }
  public subscribe(eventKey: string, callBack: Function) {
    if (this.eventObject[eventKey]) {
      this.eventObject[eventKey] = [...this.eventObject[eventKey], callBack];
    } else {
      this.eventObject[eventKey] = [callBack];
    }
  }
  public submit(eventKey: string, ...params: any) {
    const callBack = this.eventObject[eventKey];
    if (callBack && callBack.length) {
      callBack.forEach((cb: Function) => {
        cb(...params);
      });
    }
  }
  static getInstance(): GlobalEvent {
    if (!this.instance) {
      this.instance = new GlobalEvent();
    }
    return this.instance;
  }
}
export default GlobalEvent;

使用：

import GlobalEvent from '@/utils/globalEvent';

// 触发
globalEvent.submit('search');

// 监听
const globalEvent = GlobalEvent.getInstance();
globalEvent.subscribe('search', (params: any) => {
  // do something
});

---

码字不易，觉得有帮助的小伙伴点个赞支持下~

---

关注我的订阅号AIQ999~