快捷導(dǎo)航

參考?EventEmitter實(shí)現(xiàn)一個簡單的訂閱發(fā)布功能函數(shù)

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

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

目的

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

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

實(shí)現(xiàn)

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

實(shí)現(xiàn)常用功能：

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

完整代碼實(shí)現(xiàn)：

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 函數(shù)
  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();

實(shí)現(xiàn)說明：

不管訂閱還是發(fā)布的時候都需要判讀是否有已存在的隊(duì)列。
eventMap 用于存儲訂閱相關(guān)信息。
once 使用 createOnceListener 函數(shù)實(shí)現(xiàn)，給原listener 添加一層包裹，執(zhí)行一次后自動注銷。
off 注銷監(jiān)聽時需要考慮 once 的 listener 被添加了一層包裹，需要用備份的原始 listener 來判斷。
listener 函數(shù)需要考慮有多個參數(shù)。
操作性的函數(shù)的返回值為 this，用于鏈?zhǔn)秸{(diào)用，比如 pubSub.emit("test").off("test")