一個簡易的SubScribe類

来源:https://www.cnblogs.com/shapeY/archive/2023/11/20/17843505.html
-Advertisement-
Play Games

SubScribe即發佈訂閱模式,在工作中有著廣泛的應用,比如跨組件通信,微前端系統中跨子應用通信等等。 以下是一個簡易的實現: 訂閱 初始化時可限制類型 發佈 限制類型是為了讓訂閱者和發佈者知道預製了哪些類型,避免使用了一些對方不知道的類型。 type Subscriber<T> = (param ...


SubScribe即發佈訂閱模式,在工作中有著廣泛的應用,比如跨組件通信,微前端系統中跨子應用通信等等。

以下是一個簡易的實現:

  • 訂閱
  • 初始化時可限制類型
  • 發佈

限制類型是為了讓訂閱者和發佈者知道預製了哪些類型,避免使用了一些對方不知道的類型。

type Subscriber<T> = (param?: T) => void

export default class SubScribe<P> {
  // 訂閱數據倉庫
  public subscribers: Record<string, Subscriber<P>[]> = {};
  // 可允許的事件類型
  public types: undefined | string[] = undefined;

  constructor (types?: string []) {
    this.types = types;
  }

  // 訂閱
  subscribe (type: string, subscriber: Subscriber<P>) {
    const _types = this.types;

    if (_types && !_types.includes(type)) {
      console.warn(`創建訂閱 ${type} 失敗 ,訂閱類型只允許 ${_types.join(',')} 這幾種...`);
      return;
    }

    if (typeof subscriber !== 'function') {
      console.warn('創建訂閱失敗,第二個參數必須為函數類型');
      return;
    }

    if (!this.subscribers[type]) {
      this.subscribers[type] = [];
    }

    this.subscribers[type].push(subscriber);
  }

  // 訂閱一次,觸發後自動取消訂閱
  subscribeOnce (type: string, subscriber: Subscriber<P>) {
    if (typeof subscriber !== 'function') {
      console.warn('創建訂閱失敗,第二個參數必須為函數類型');
      return;
    }

    const wrap = (param?: P) => {
      subscriber(param);
      this.unSubscribe(type, wrap);
    };

    this.subscribe(type, wrap);
  }

  // 取消訂閱
  unSubscribe (type: string, subscriber: Subscriber<P>) {
    if (this.subscribers[type]) {
      this.subscribers[type] = this.subscribers[type].filter(f => f !== subscriber);
    }
  }

  // 發佈事件,觸發訂閱函數執行
  publish (type: string, param?: P) {
    const _types = this.types;

    if (_types && !_types.includes(type)) {
      console.warn(`發佈 ${type} 失敗,發佈類型只允許 ${_types.join(',')} 這幾種...`);
      return;
    }

    if (this.subscribers[type]) {
      this.subscribers[type].forEach(f => {
        f(param);
      });
    }
  }
}

以下是一個使用案例

初始化並導出一個發佈訂閱實例(如果是微前端系統,則將該實例傳給各個子應用),然後可以通過該實例進行跨對象的通信。

// 初始化
export const masterSubscribe = new SubScribe(['MICRO_CHILD_ROUTE_MOUNTED', 'MICRO_ACTION']);

// 訂閱
masterSubscribe &&
  masterSubscribe.subscribe('MICRO_ACTION', (params) => {
   // 執行一些動作
  });

// 發佈
masterSubscribe.publish('MICRO_ACTION', {
  //...params
});

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 本文分享自華為雲社區《Navicat 基於 GaussDB 主備版的快速入門》,作者:Navicat_China。 Navicat Premium(16.2.8 Windows版或以上) 已支持對GaussDB 主備版的管理和開發功能。它不僅具備輕鬆、便捷的可視化數據查看和編輯功能,還提供強大的高階 ...
  • 一、來自MySQL官方的感謝 在 2023-10-25 MySQL 官方發佈的 8.2 版本 Release Notes 中,GreatSQL 社區核心開發者 Richard Dang 和 Hao Lu ,分別收到了來自 MySQL 官方的貢獻感謝,與Amazon、Facebook(Meta)、Te ...
  • DM8壓縮表 0、結論 行表(普通表)不支持壓縮。但是語法支持。建表之後,查詢到的占用空間會比普通表小一半。 經過測試,裝10萬數據(兩個欄位),壓縮的、未壓縮,占用空間一樣大。 列表(huge表)支持壓縮。可以壓縮表(就是壓縮所有列),也可以選擇壓縮列。但是建表的時候就要設置,否則建好表之後修改不 ...
  • Recyclerview中,提供了一個方法addItemDecoration給我們用於設置item的分割線 下麵提供幾個常見的分割線效果 註: 下麵的SizeUtils是AndroidUtilCode此庫里的工具類,需要添加依賴,也可以自行修改封裝的方法(主要是將dp單位轉為px) 以下代碼已封裝在 ...
  • npm 存在的問題 我們經常使用 npm 來管理 node 項目中的包,從 package.json 中讀取配置將依賴下載到本地,以保障項目的正常運行。 當項目數量多時,這樣的包管理方式會非常的占用電腦記憶體。由於每個項目都有屬於自己的依賴,每個項目都需要安裝,即使 npm 會對依賴進行緩存,但是每個 ...
  • 可以少去理解一些不必要的概念,而多去思考為什麼會有這樣的東西,它解決了什麼問題,或者它的運行機制是什麼? 1. React 中導出和導入 1.1 ES6 解析 ES6 的模塊化的基本規則或特點: 每一個模塊只載入一次, 每一個 JS 只執行一次, 如果下次再去載入同目錄下同文件,直接從記憶體中讀取。一 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 效果 金幣從初始位置散開後逐個飛向指定位置,這是游戲中很常用的一個動畫,效果如下: 思路 這個效果中,分成兩個階段: 一定數量的金幣從一個起點散開 這些金幣逐一飛向終點 計算金幣的初始散開位置 生成圓周上的等分點 金幣散開的位置看似隨機, ...
  • 古詩文起名 大家好,我是 Java陳序員,我們常常會為了給孩子取名而煩惱,取名不僅要好聽而且要規避大眾化。其實,我們中華文化博大精深,可以借鑒先輩文人們留下的經典詩詞中的文字來起名。今天,給大家介紹一個古詩文起名的工具。 這個工具支持從《詩經》、《楚辭》、《唐詩》、《宋詞》、《樂府詩集》、《古詩三百 ...
一周排行
    -Advertisement-
    Play Games
  • 前言:有時候遠程伺服器的進程你想偷偷去圍觀一下有哪些,或者對一些比較調皮的進程進行封殺,或者對一些自己研發的服務進行遠程手動啟動或者重啟等,又不想打開遠程桌面,只想悄咪咪地執行,那也許下麵的文章會對你有啟發。 前提條件 確保遠程伺服器(服務端)已啟用WinRM。在遠程伺服器上運行以下命令可以啟用和配 ...
  • 爆了,爆了,DeveloperSharp系列近期又被製造業ERP、民航飛行App、建築BIM、電力掌上營業廳、等多家大型採用,站在巨人的肩膀上你能走的更遠。 支持.Net Core2.0及以上,支持.Net Framework4.0及以上 http請求調用是開發中經常會用到的功能。在內,調用自有項目 ...
  • StackExchange.Redis 是一個高性能的 Redis 客戶端庫,主要用於 .NET 環境下與 Redis 伺服器進行通信,大名鼎鼎的stackoverflow 網站就使用它。它使用非同步編程模型,能夠高效處理大量請求。支持 Redis 的絕大部分功能,包括發佈/訂閱、事務、Lua 腳本等... ...
  • 一:背景 1. 講故事 前些天群里有一個朋友說他們軟體會偶發崩潰,想分析看看是怎麼回事,所幸的是自己會抓dump文件,有了dump就比較好分析了,接下來我們開始吧。 二:WinDbg 分析 1. 程式為什麼會崩潰 windbg 還是非常強大的,當你雙擊打開的時候會自動幫你定位過去展示崩潰時刻的寄存器 ...
  • 工廠模式(Factory Pattern)是一種創建型設計模式,它提供了一種創建對象的介面,而不是通過具體類來實例化對象。工廠模式可以將對象的創建過程封裝起來,使代碼更具有靈活性和可擴展性。 工廠模式有幾種常見的實現方式: 簡單工廠模式(Simple Factory Pattern): 簡單工廠模式 ...
  • Web Service 理解:Web Service 是一種基於網路的服務,它使用標準化的消息傳遞協議,最典型的是基於 SOAP(Simple Object Access Protocol)協議。SOAP 使用 XML 格式封裝數據,定義了消息的結構和傳輸方式,因此它是一個重量級的解決方案。Web ...
  • 可以使用XmlSerializer直接序列化和反序列化xml 反序列化如以下代碼 private T? XmlDeseriallize<T>(string filePath) { XmlSerializer serializer = new XmlSerializer(typeof(T)); usi ...
  • 不管是在控制台程式還是asp.net core程式中,我們經常會有用到一個需要長時間運行的後臺任務的需求。通常最直覺的方式是使用Thread實例來新建一個線程,但是這樣需要自行管理線程的啟動和停止。 在.net core中提供了一個繼承自IHostedService的基類BackgroudServi ...
  • 最近YOLO家族又添新成員:YOLOv10,YOLOv10 提出了一種一致的雙任務方法,用於無nms訓練的YOLOs,它同時帶來了具有競爭力的性能和較低的推理延遲。此外,還介紹了整體效率-精度驅動的模型設計策略,從效率和精度兩個角度對YOLOs的各個組成部分進行了全面優化,大大降低了計算開銷,增強了... ...
  • 自動篩選器是 Excel 中的一個基本但極其有用的功能,它可以讓你根據特定的條件來自動隱藏和顯示你的數據。當有大量的數據需要處理時,這個功能可以幫你快速找到你需要的信息,從未更加有效地分析和處理相關數據。 下麵將介紹如何使用免費.NET Excel庫在Excel中添加、應用和刪除自動篩選器。包含以下 ...