”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 了解 JavaScript 中的 PubSub(发布-订阅)设计模式

了解 JavaScript 中的 PubSub(发布-订阅)设计模式

发布于2024-10-31
浏览:487

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]删除
最新教程 更多>
  • 获取下一行学习如何处理文件描述符和系统 I/O 的项目
    获取下一行学习如何处理文件描述符和系统 I/O 的项目
    在 C 编程领域,有效管理输入、输出和内存是基础。为了帮助您掌握这些关键概念,您将在 get_next_line 项目中编写一个使用文件描述符逐行读取文件的函数。每次调用该函数都会从文件中读取下一行,从而允许您一次一行处理整个文件内容。 了解系统中的文件描述符和 I/O ...
    编程 发布于2024-11-07
  • 为什么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()方法,以确定该条目将被放置在哪个哈希桶中。然后使用 eq...
    编程 发布于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,不适用于以列表值作为键的字典,因为它会失败并显示“TypeEr...
    编程 发布于2024-11-07
  • 现代 Web 开发框架:比较流行的框架及其用例
    现代 Web 开发框架:比较流行的框架及其用例
    在快速发展的 Web 开发领域,选择正确的框架可以显着影响项目的成功。本文深入研究了一些最流行的 Web 开发框架,比较了它们的优势和理想用例,以帮助开发人员做出明智的决策。 反应 概述 React 由 Facebook 开发和维护,是一个用于构建用户界面的 Java...
    编程 发布于2024-11-07

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3