」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 了解 JavaScript 中的 PubSub(發佈-訂閱)設計模式

了解 JavaScript 中的 PubSub(發佈-訂閱)設計模式

發佈於2024-10-31
瀏覽:733

Understanding the PubSub (Publish-Subscribe) Design Pattern in JavaScript

發布-訂閱 (PubSub) 模式是一種流行的設計模式,用於促進應用程式不同部分之間的通信,而無需直接相互了解。此模式對於解耦大型應用程式中的元件特別有用,其中可以發布事件並且訂閱者可以對這些事件做出反應。

在本文中,我們將探索如何使用基於物件的方法和基於類別的方法在 JavaScript 中實作 PubSub 模式。最後,您將對如何在自己的專案中使用此模式有一個深入的了解。

基於物件的實現
對於單一全域事件管理器就足夠的場景,基於物件的方法簡單而有效。實施方法如下:

pubsub.js
const PubSub = {
    subscribers: [],

    subscribe: function(subscriber) {
        this.subscribers.push(subscriber);
    },

    publish: function(payload) {
        this.subscribers.forEach(subscriber => {
            subscriber(payload);
        });
    }
};

export default PubSub;

如何使用基於物件的 PubSub
在您的應用程式中,您可以在任何需要的地方匯入 PubSub 物件。這是一個例子:

// file1.js
import PubSub from './pubsub';

PubSub.subscribe((payload) => {
    console.log('File 1 received:', payload);
});
// file2.js
import PubSub from './pubsub';

PubSub.subscribe((payload) => {
    console.log('File 2 received:', payload);
});
// main.js
import PubSub from './pubsub';

PubSub.publish('Hello from main!');

基於類別的實作
為了獲得更大的靈活性或當您需要 PubSub 系統的多個實例時,可以使用基於類別的方法。這允許您使用自己的訂閱者清單建立獨立的 PubSub 實例。

class PubSub {
    constructor() {
        this.subscribers = [];
    }

    subscribe(subscriber) {
        this.subscribers.push(subscriber);
    }

    unsubscribe(subscriber) {
        this.subscribers = this.subscribers.filter(sub => sub !== subscriber);
    }

    publish(payload) {
        this.subscribers.forEach(subscriber => {
            try {
                subscriber(payload);
            } catch (error) {
                console.error('Error in subscriber:', error);
            }
        });
    }
}

export default PubSub;

如何使用基於類別的 PubSub
以下是如何在應用程式中使用基於類別的 PubSub 模式的範例:

import PubSub from './pubsub';

// Create an instance of PubSub
const pubSubInstance = new PubSub();

// Subscribe to events
pubSubInstance.subscribe((payload) => {
    console.log('Instance 1 received:', payload);
});

pubSubInstance.subscribe((payload) => {
    console.log('Instance 2 received:', payload);
});

// Publish an event
pubSubInstance.publish('Hello from instance!');

結論
PubSub 模式是一個強大的工具,用於管理應用程式不同部分之間的通訊。您選擇使用基於物件還是基於類別的實作取決於您的特定需求。基於物件的方法簡單明了,非常適合小型專案或單一全域事件管理器就足夠的情況。另一方面,基於類別的方法提供了更大的靈活性,並且更適合您可能需要 PubSub 系統的多個實例的大型應用程式。

請隨意在您自己的專案中使用這些範例並修改它們以滿足您的需求。快樂編碼!

版本聲明 本文轉載於:https://dev.to/ashok_24_99c5ee15c6ad5150/understanding-the-pubsub-publish-subscribe-design-pattern-in-javascript-3o35?1如有侵犯,請聯繫[email protected]刪除
最新教學 更多>
  • 為什麼Go的main函數有死迴圈?
    為什麼Go的main函數有死迴圈?
    Go 運行時:主函數中無限循環之謎Go 運行時的核心位於src/runtime/proc.go,其中有一個令人費解的功能:主函數末尾有一個無限的for 迴圈。人們可能想知道為什麼運行時中存在這樣一個看似毫無意義的構造。 目的:偵測致命錯誤深入研究程式碼,很明顯循環服務於錯誤處理的關鍵目的。當發生致命...
    程式設計 發佈於2024-11-07
  • iostream 與 iostream.h:現代 C++ 應該使用哪一個?
    iostream 與 iostream.h:現代 C++ 應該使用哪一個?
    iostream 和iostream.h 之間的區別在C 中,程式設計師可能會遇到兩個具有類似目的的術語:iostream 和iostream.h 。本指南旨在闡明兩者之間的根本差異。 iostream.h:已棄用的舊版iostream.h 是 C 函式庫中的一個頭文件,它提供一組輸入/輸出函數。對...
    程式設計 發佈於2024-11-07
  • VLONE Clothing:重新定義都市時尚的街頭服飾品牌
    VLONE Clothing:重新定義都市時尚的街頭服飾品牌
    VLONE 是少数几个在快速变化的市场中取得超越街头服饰行业所能想象的成就的品牌之一。 VLONE 由 A$AP Mob 集体的电影制片人之一 A$AP Bari 创立,现已发展成为一个小众项目,有时甚至成为都市时尚界的国际知名品牌。 VLONE 凭借大胆的图案、深厚的文化联系和限量版发售,在时尚界...
    程式設計 發佈於2024-11-07
  • 如何使用PDO查詢單行中的單列?
    如何使用PDO查詢單行中的單列?
    使用 PDO 查詢單行中的單列處理針對單行中特定列的 SQL 查詢時,通常需要檢索直接取值,無需循環。要使用 PDO 完成此操作,fetchColumn() 方法就派上用場了。 fetchColumn() 的語法為:$col_value = $stmt->fetchColumn([column...
    程式設計 發佈於2024-11-07
  • 我如何建立 PeerSplit:一個免費的點對點費用分攤應用程式 — 從構思到發布僅需數週時間
    我如何建立 PeerSplit:一個免費的點對點費用分攤應用程式 — 從構思到發布僅需數週時間
    我构建了 PeerSplit——一个免费的、点对点的 Splitwise 替代品——从想法到发布仅用了两周时间! PeerSplit 是一款本地优先的应用程序,用于分配团体费用。它可以离线工作,100% 免费且私密,不需要注册或任何个人数据。 以下是我如何构建它以及我在此过程中学到的一切。 ...
    程式設計 發佈於2024-11-07
  • 如何在 PHP 中解析子網域的根網域?
    如何在 PHP 中解析子網域的根網域?
    在 PHP 中從子域解析網域名稱在 PHP 中,從子域中提取根網域是一項常見任務。當您需要識別與子網域關聯的主網站時,這非常有用。為了實現這一目標,讓我們探索一個解決方案。 提供的程式碼片段利用 parse_url 函數將 URL 分解為其元件,包括網域名稱。隨後,它使用正規表示式來隔離根域,而忽略...
    程式設計 發佈於2024-11-07
  • 使用 Socket.io 建立即時應用程式
    使用 Socket.io 建立即時應用程式
    介紹 Socket.io 是一個 JavaScript 函式庫,可讓 Web 用戶端和伺服器之間進行即時通訊。它支援創建互動式動態應用程序,例如聊天室、多人遊戲和直播。憑藉其易於使用的 API 和跨平台相容性,Socket.io 已成為建立即時應用程式的熱門選擇。在本文中,我們將探...
    程式設計 發佈於2024-11-07
  • 重寫 `hashCode()` 和 `equals()` 如何影響 HashMap 效能?
    重寫 `hashCode()` 和 `equals()` 如何影響 HashMap 效能?
    了解equals 和hashCode 在HashMap 中的工作原理Java 中的HashMap 使用hashCode() 和equals() 方法的組合來有效地儲存和檢索鍵值對。當新增新的鍵值對時,首先計算鍵的hashCode()方法,以確定該條目將放置在哪個雜湊桶中。然後使用 equals() ...
    程式設計 發佈於2024-11-07
  • 使用 Google Apps 腳本和 Leaflet.js 建立互動式 XY 圖像圖
    使用 Google Apps 腳本和 Leaflet.js 建立互動式 XY 圖像圖
    Google Maps has a ton of features for plotting points on a map, but what if you want to plot points on an image? These XY Image Plot maps are commonly...
    程式設計 發佈於2024-11-07
  • 理解 React 中的狀態變數:原因和方法
    理解 React 中的狀態變數:原因和方法
    在深入研究狀態變數之前,讓我們先來分析一下 React 元件的工作原理吧! 什麼是 React 元件? 在 React 中,元件是一段可重複使用的程式碼,代表使用者介面 (UI) 的一部分。它可以像 HTML 按鈕一樣簡單,也可以像完整的頁面一樣複雜。 React...
    程式設計 發佈於2024-11-07
  • Miva 的日子:第 4 天
    Miva 的日子:第 4 天
    這是 100 天 Miva 編碼挑戰的第四天。我跳過了第三天的報告,因為我被困在我的網頁設計專案中,需要改變節奏。這就是為什麼我今天決定深入研究 JavaScript。 JavaScript JavaScript 就像是系統和網站的行為元件。它為網站增加了互動性和回應能力,使其成為網頁設計和開發...
    程式設計 發佈於2024-11-07
  • TailGrids React:+ Tailwind CSS React UI 元件
    TailGrids React:+ Tailwind CSS React UI 元件
    我們很高興推出 TailGrids React,這是您的新首選工具包,可用於輕鬆建立令人驚嘆的響應式 Web 介面。 TailGrids React 提供了超過 600 免費和高級 React UI 元件、區塊、部分和模板的大量集合 - 所有這些都是用 Tailwind CSS 精心製作的。 無論...
    程式設計 發佈於2024-11-07
  • 如何用列表值反轉字典?
    如何用列表值反轉字典?
    使用列表值反轉字典:解決方案在本文中,我們探討了使用列表值反轉字典的挑戰。給定一個索引字典,其中鍵是檔案名,值是這些檔案中出現的單字列表,我們的目標是建立一個倒排字典,其中單字是鍵,值是檔案名稱列表。 提供的反轉函數 invert_dict,不適用於以列表值作為鍵的字典,因為它會失敗並顯示“Type...
    程式設計 發佈於2024-11-07
  • 現代 Web 開發框架:比較流行的框架及其用例
    現代 Web 開發框架:比較流行的框架及其用例
    在快速發展的 Web 開發領域,選擇正確的框架可以顯著影響專案的成功。本文深入研究了一些最受歡迎的 Web 開發框架,比較了它們的優勢和理想用例,以幫助開發人員做出明智的決策。 反應 概述 React 由 Facebook 開發和維護,是一個用於建立使用者介面的 J...
    程式設計 發佈於2024-11-07
  • 如何在 Go 1.18 中安全地使用泛型類型解組 JSON?
    如何在 Go 1.18 中安全地使用泛型類型解組 JSON?
    Unmarshal 中的泛型使用(Go 1.18)在Go 1.18 中使用泛型時,例如創建一個容器來保存各種報告類型,可能會出現類型限制。考慮以下設定:由結構表示的多種報告類型具有通用類型參數的ReportContainer 包裝器可報告,約束為實作可報告介面鑑別器ReportType 在解組過程中...
    程式設計 發佈於2024-11-07

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3