參考?EventEmitter實現一個簡單的訂閱發(fā)布功能函數

更新時間：2023年02月12日 15:21:18 作者：拾光者

這篇文章主要為大家介紹了參考?EventEmitter實現一個簡單的訂閱發(fā)布功能函數示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

目的

訂閱發(fā)布模式應該是 JS 最常用的設計模式，也可稱之為觀察者模式，前端各個方面都會涉及到它，比如：瀏覽器中的事件監(jiān)聽機制、nodejs 中的 EventEmitter 、redux 數據傳遞實現等等。

不管是瀏覽器中的事件監(jiān)聽機制還是 nodejs 中的 EventEmitter，都只能在各自的環(huán)境進行運行。因此我們需要用一份代碼來讓多端都可以調用，EventEmitter 功能更全面，我們借鑒它來實現一個完整的 PubSub。

實現

主要參考 EventEmitter 的功能來，本篇文章提供簡單實現，下一篇提供了完整實現，點擊即可去查看，代碼有問題歡迎評論區(qū)指出。

實現常用功能：

on : 用于添加訂閱
off : 用于取消訂閱
once : 用于添加一次性訂閱
emit : 用于發(fā)布事件，讓訂閱者收到通知

完整代碼實現：

type Listener = (...args: any[]) => void;
type EventInfo = {
  // 監(jiān)聽器
  listener: Listener;
  // 備份，需要改變 listener 時，則需要備份，比如 once
  bak?: Listener;
};
// 創(chuàng)建一次性監(jiān)聽器
function createOnceListener(pub: PubSub, eventName: string | symbol, listener: Listener) {
  const onceListener = (...args: any[]) => {
    // 執(zhí)行一次后直接取消訂閱
    listener(...args);
    pub.off(eventName, listener);
  };
  return onceListener;
}
export class PubSub {
  private eventMap: Record<string | symbol, EventInfo[]> = {};
  // 訂閱
  on = (eventName: string | symbol, listener: Listener) => {
    if (!this.eventMap[eventName]) {
      this.eventMap[eventName] = [];
    }
    this.eventMap[eventName].push({ listener });
    return this;
  };
  // 取消訂閱
  off = (eventName: string | symbol, listener: Listener) => {
    if (this.eventMap[eventName]) {
      this.eventMap[eventName] = this.eventMap[eventName].filter((item) => {
        // once listener 取消訂閱
        if (item.bak) {
          return item.bak !== listener;
        }
        // 正常 listener 取消訂閱
        return item.listener !== listener;
      });
    }
    return this;
  };
  // 類似 EventEmitter 中的 emit 函數
  emit = (eventName: string | symbol, ...args: any[]) => {
    this.eventMap[eventName]?.forEach((item) => {
      item.listener(...args);
    });
    return this;
  };
  // 只訂閱一次
  once = (eventName: string | symbol, listener: Listener) => {
    const onceListener = createOnceListener(this, eventName, listener);
    this.on(eventName, onceListener);
    return this;
  };
}
// 不需要有全局訂閱功能的，可以去掉這個
export const pubSub = new PubSub();

實現說明：