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

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

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

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]删除
最新教程 更多>
  • 为什么我会收到MySQL错误#1089:错误的前缀密钥?
    为什么我会收到MySQL错误#1089:错误的前缀密钥?
    mySQL错误#1089:错误的前缀键错误descript [#1089-不正确的前缀键在尝试在表中创建一个prefix键时会出现。前缀键旨在索引字符串列的特定前缀长度长度,可以更快地搜索这些前缀。了解prefix keys `这将在整个Movie_ID列上创建标准主键。主密钥对于唯一识别...
    编程 发布于2025-05-21
  • JavaScript计算两个日期之间天数的方法
    JavaScript计算两个日期之间天数的方法
    How to Calculate the Difference Between Dates in JavascriptAs you attempt to determine the difference between two dates in Javascript, consider this s...
    编程 发布于2025-05-21
  • 如何在Chrome中居中选择框文本?
    如何在Chrome中居中选择框文本?
    选择框的文本对齐:局部chrome-inly-ly-ly-lyly solument 您可能希望将文本中心集中在选择框中,以获取优化的原因或提高可访问性。但是,在CSS中的选择元素中手动添加一个文本 - 对属性可能无法正常工作。初始尝试 state)</option> < op...
    编程 发布于2025-05-21
  • 解决Spring Security 4.1及以上版本CORS问题指南
    解决Spring Security 4.1及以上版本CORS问题指南
    弹簧安全性cors filter:故障排除常见问题 在将Spring Security集成到现有项目中时,您可能会遇到与CORS相关的错误,如果像“访问Control-allo-allow-Origin”之类的标头,则无法设置在响应中。为了解决此问题,您可以实现自定义过滤器,例如代码段中的MyFi...
    编程 发布于2025-05-21
  • 如何将PANDAS DataFrame列转换为DateTime格式并按日期过滤?
    如何将PANDAS DataFrame列转换为DateTime格式并按日期过滤?
    将pandas dataframe列转换为dateTime格式示例:使用column(mycol)包含以下格式的以下dataframe,以自定义格式:})指定的格式参数匹配给定的字符串格式。转换后,MyCol列现在将包含DateTime对象。 date date filtering > = p...
    编程 发布于2025-05-21
  • 如何简化PHP中的JSON解析以获取多维阵列?
    如何简化PHP中的JSON解析以获取多维阵列?
    php 试图在PHP中解析JSON数据的JSON可能具有挑战性,尤其是在处理多维数组时。 To simplify the process, it's recommended to parse the JSON as an array rather than an object.To do...
    编程 发布于2025-05-21
  • PHP未来:适应与创新
    PHP未来:适应与创新
    PHP的未来将通过适应新技术趋势和引入创新特性来实现:1)适应云计算、容器化和微服务架构,支持Docker和Kubernetes;2)引入JIT编译器和枚举类型,提升性能和数据处理效率;3)持续优化性能和推广最佳实践。 引言在编程世界中,PHP一直是网页开发的中流砥柱。作为一个从1994年就开始发展...
    编程 发布于2025-05-21
  • 如何在鼠标单击时编程选择DIV中的所有文本?
    如何在鼠标单击时编程选择DIV中的所有文本?
    在鼠标上选择div文本单击带有文本内容,用户如何使用单个鼠标单击单击div中的整个文本?这允许用户轻松拖放所选的文本或直接复制它。 在单个鼠标上单击的div元素中选择文本,您可以使用以下Javascript函数: function selecttext(canduterid){ if(do...
    编程 发布于2025-05-21
  • C++成员函数指针正确传递方法
    C++成员函数指针正确传递方法
    如何将成员函数置于c [&& && && && && && && && && && &&&&&&&&&&&&&&&&&&&&&&&华仪的函数时,在接受成员函数指针的函数时,要在函数上既要提供指针又可以提供指针和指针到函数的函数。需要具有一定签名的功能指针。要通过成员函数,您需要同时提供对象指针(此...
    编程 发布于2025-05-21
  • Async Void vs. Async Task在ASP.NET中:为什么Async Void方法有时会抛出异常?
    Async Void vs. Async Task在ASP.NET中:为什么Async Void方法有时会抛出异常?
    在ASP.NET async void void async void void void void void的设计无需返回asynchroncon而无需返回任务对象。他们在执行过程中增加未偿还操作的计数,并在完成后减少。在某些情况下,这种行为可能是有益的,例如未期望或明确预期操作结果的火灾和...
    编程 发布于2025-05-21
  • Java字符串非空且非null的有效检查方法
    Java字符串非空且非null的有效检查方法
    检查字符串是否不是null而不是空的 if(str!= null && str.isementy())二手: if(str!= null && str.length()== 0) option 3:trim()。isement(Isement() trim whitespace whitesp...
    编程 发布于2025-05-21
  • Java中如何使用观察者模式实现自定义事件?
    Java中如何使用观察者模式实现自定义事件?
    在Java 中创建自定义事件的自定义事件在许多编程场景中都是无关紧要的,使组件能够基于特定的触发器相互通信。本文旨在解决以下内容:问题语句我们如何在Java中实现自定义事件以促进基于特定事件的对象之间的交互,定义了管理订阅者的类界面。以下代码片段演示了如何使用观察者模式创建自定义事件: args)...
    编程 发布于2025-05-21
  • 如何使用Python的请求和假用户代理绕过网站块?
    如何使用Python的请求和假用户代理绕过网站块?
    如何使用Python的请求模拟浏览器行为,以及伪造的用户代理提供了一个用户 - 代理标头一个有效方法是提供有效的用户式header,以提供有效的用户 - 设置,该标题可以通过browser和Acterner Systems the equestersystermery和操作系统。通过模仿像Chro...
    编程 发布于2025-05-21
  • Python不会对超范围子串切片报错的原因
    Python不会对超范围子串切片报错的原因
    在python中用索引切片范围:二重性和空序列索引单个元素不同,该元素会引起错误,切片在序列的边界之外没有。这种行为源于索引和切片之间的基本差异。索引一个序列,例如“示例” [3],返回一个项目。但是,切片序列(例如“示例” [3:4])返回项目的子序列。索引不存在的元素时,例如“示例” [9] ...
    编程 发布于2025-05-21
  • 如何有效地转换PHP中的时区?
    如何有效地转换PHP中的时区?
    在PHP 利用dateTime对象和functions DateTime对象及其相应的功能别名为时区转换提供方便的方法。例如: //定义用户的时区 date_default_timezone_set('欧洲/伦敦'); //创建DateTime对象 $ dateTime = ne...
    编程 发布于2025-05-21

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

Copyright© 2022 湘ICP备2022001581号-3