js设计模式--发布订阅者模式

概述

发布订阅者模式用于处理对象之间的事件通信,该模式涉及两个主要角色:发布者(Publisher)和订阅者(Subscriber)

发布者维护一个事件列表,并在事件发生时通知所有已注册的订阅者。订阅者可以选择接收或忽略通知。

使用场景

发布-订阅者模式通常用于解耦应用程序中的组件,使得它们可以独立地交互。以下是一些使用发布-订阅者模式的场景:

  1. 事件处理:当事件发生时,将其发布到一个或多个订阅者,以便它们可以执行相关操作。
  2. GUI编程:当用户与GUI界面交互时,会触发各种事件。这些事件可以作为发布者,GUI控件可以作为订阅者。
  3. 消息系统:在分布式系统中,消息队列可以将消息发布给多个订阅者,以实现可靠的消息传递。
  4. 日志记录:日志记录框架可以使用发布-订阅者模式,将日志消息发布给多个订阅者,如文件、数据库或网络服务。
  5. MVC模式:MVC(Model-View-Controller)模式利用发布-订阅者模式来实现模型和视图之间的松耦合关系,使得它们可以独立地交互。

代码示例

class EventBus {constructor() {this.listeners = {};}on(event, listener) {if (!this.listeners[event]) {this.listeners[event] = [];}this.listeners[event].push(listener);}emit(event, ...args) {const listeners = this.listeners[event];if (listeners) {listeners.forEach((listener) => {listener(...args);});}}removeListener(event, listenerToRemove) {const listeners = this.listeners[event];if (listeners) {this.listeners[event] = listeners.filter((listener) => listener !== listenerToRemove);}}removeAllListeners(event) {delete this.listeners[event];}
}

这个 EventBus 类有 onemitoffclear 方法。

  • on(event, listener) 方法用于向指定事件添加一个监听器。
  • emit(event, ...args) 方法用于触发指定事件,会执行所有与该事件相关的监听器函数,并将提供的参数传递给它们。
  • removeListener(event, listenerToRemove) 方法用于从指定事件中删除特定的监听器函数。
  • removeAllListeners(event) 方法用于删除指定事件上的所有监听器函数。

你可以像这样使用它:

const bus = new EventBus();const listenerFunction = (args) => {console.log(args);
};// 1. 添加一个监听器
bus.on('click', listenerFunction);
// 2. 触发事件
bus.emit('click', 'Hello');
// 3. 删除监听器
bus.removeListener('click', listenerFunction);
// 4. 删除所有监听器
bus.removeAllListeners('click');

观察者模式 vs 发布订阅者模式

观察者模式和发布订阅者模式都是用来实现组件间通信的设计模式,但有以下区别:

  1. 耦合度不同:观察者模式中,观察者和被观察者是紧密耦合的,即观察者需要直接访问被观察者;而发布订阅者模式中,发布者和订阅者之间是松散耦合的,它们通过一个中介者(也称为消息队列、事件总线等)进行通信。这意味着,发布订阅者模式更加灵活,可以支持多个发布者和多个订阅者。
  2. 通信机制不同:观察者模式中,被观察者会向所有注册的观察者发送通知,观察者需要自己判断是否处理该通知;而发布订阅者模式中,发布者只需要将消息发送给中介者,由中介者负责将消息传递给所有订阅者。
  3. 角色定义不同:在观察者模式中,Observer(观察者)和 Subject(被观察者)是两个核心角色;而在发布订阅者模式中,Publisher(发布者)和 Subscriber(订阅者)是核心角色,还有一个 Event Bus(事件总线)或 Message Queue(消息队列)作为中介者。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/10158.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据结构解构方法

遇到问题后端返回data{其中对应每一个item的checked和descrip} { "code": 200, "msg": "请求成功", "time": , "data": { "id": "", "measureFileDesc": n…

【C++风云录】拓展视野:C++工具库在可穿戴技术中的应用分析

创新引擎:如何运用C工具库推动生物医学工程进步 前言 本文将介绍和讨论六种在生物医学工程和可穿戴技术中应用广泛的开源C库。这些库包括OpenBCI,PyCortex,TensorFlow,Dlib,Armadillo和Boost,它们在脑机接…

WP All Import Pro插件下载 - 一键导入,无限可能

在当今快节奏的数字时代,网站内容的更新和管理是每个网站管理员和开发者的日常工作。但是,传统的手动更新方法不仅耗时,而且容易出错。现在,有了WP All Import Pro,这一切都将改变。 WP All Import Pro 是一款专为Wor…

C#连接MySql数据库 (ASP.NET API)

main方法调用连接 using System; using MySql.Data.MySqlClient; class Program { static void Main(string[] args) { string connectionString "serverlocalhost;database***;username***;password****"; using (MySqlConnection connec…

ABAP ZCL_EXCEL 实际用的案例 对账单

ABAP ZCL_EXCEL 实际用的案例 FORM GETITEMSANDOUTPUT USING PGS_HEAD TYPE GSHEAD.DATA:FILENAME TYPE STRING.DATA:LKUNNR TYPE KNA1-KUNNR.DATA:PROW TYPE I.DATA:LSDATE TYPE STRING.DATA:SUMXSJE TYPE DMBTR,ZYMYE TYPE DMBTR, "月末余额SUMBYXSYE TYPE DMBT…

全新神经网络架构KAN——本文用于学习与探索

论文地址:https://arxiv.org/pdf/2404.19756 Github:GitHub - KindXiaoming/pykan: Kolmogorov Arnold Networks 文档说明:Welcome to Kolmogorov Arnold Network (KAN) documentation! — Kolmogorov Arnold Network documentation 本文仅…

Java 反射动态代理

反射 Java反射是一种强大的编程机制,它允许程序在运行时检查或修改对象和类的行为。具体来说,反射机制提供了以下功能: 类的动态加载:可以在运行时加载一个只知道名称的类,并创建该类的实例。获取类的详细信息&#…

二手交易系统基于Uniapp+FastAdmin+ThinkPHP(源码搭建/上线/运营/售后/更新)

​一款基于UniappFastAdminThinkPHP开发的二手交易系统,卖家可以发布二手信息,买家可以在线询价,支持在线聊天(高级授权),在线购买支付,支持发布高价回收(高级授权)信息。自带社交板块,用户可以发布帖子、加…

Prompt|Kimi高阶技巧,99%的人都不知道

大家好,我是无界生长。 今天分享一条咒语,轻松让Kimi帮你生成流程图,学会了的话,点赞收藏起来吧! 效果展示 我们演示一下让kimi帮忙绘制 关注微信公众号“无界生长”的流程图,最终效果图如下所示 效果还不…

针对 % 号 | 引起的 不安全情况

把网站开放的课程都检索下来了 一、情况1 org.apache.tomcat.util.http.Parameters processParameters 信息: Character decoding failed. Parameter [Mac] with value [%%%] has been ignored. Note that the name and value quoted here may be corrupted due to the failed…

Kubernetes Cluster IP,Node IP,Pod IP间通信原理解析

目录 1、Cluster IP2、Node IP3、NodePort4、Pod IP5、LoadBalancer6、三种IP间通信6.1、Pod IP 与 Pod IP 通信6.2、Pod IP 与 Cluster IP 通信6.3、Node IP 与 Pod IP 通信6.4、Node IP 与 Cluster IP 7、YAML 示例7.1、ClusterIP Service7.2、LoadBalancer Service 1、Clust…

数组元素翻倍C++

编写一个 C 程序&#xff0c;实现一个功能&#xff0c;即将数组中的每个元素值翻倍。程序应定义一个函数 doubleArray&#xff0c;该函数接收一个整数数组的指针和数组的大小&#xff0c;然后将数组中的每个元素都翻倍。 代码 #include <iostream>void doubleArray(int…

【笔记】Android MVNO APN 字段配置方法

Android APN配置针对虚拟运营商包含以下两个字段对卡进行匹配(除了MCC、MNC之外): Mvno TypeMvno Match Data在 APN 配置中,运营商使用MVNO=IMSI时,一般开头是mccmnc+prefix+[range],那么mccmnc和 prefix正常配置,后面range的可变范围直接用“xxxx”同等长度占位。 MVNO…

红帽为 Red Hat OpenShift AI 扩大与 Elasticsearch 向量数据库的合作

作者&#xff1a;来自 Elastic Aditya Tripathi 红帽和 Elastic 今天宣布开展合作&#xff0c;以便在 Red Hat OpenShift AI 上集成 Elasticsearch 向量数据库。 Red Hat OpenShift 用户现在可以通过红帽生态系统目录实施 Elasticsearch 以进行向量搜索和检索增强生成 (RAG) 应…

商机来了你能抓住吗?2024新商机!2024创业新风口!2024创业项目小成本!2024创业干什么最赚钱?

19世纪末&#xff0c;美国加利福尼亚州发现了黄金&#xff0c;出现了淘金热。有一位17岁的少年来到加州&#xff0c;是想加入淘金者的队伍&#xff0c;可看到金子没那么好淘&#xff0c;淘金的人很野蛮&#xff0c;他很害怕。这时&#xff0c;他看到淘金人在炎热的天气下干活口…

pytest 数据驱动

pytest 数据驱动 1.pytest 如何收集到用例的&#xff1f; 2.pytest 如何把 python 代码&#xff0c;转换成 pytest 测试用例&#xff08;又称 item&#xff09; &#xff1f; pytest如何做到收集到用例的&#xff1f; conftest编写以下 hook 函数&#xff1a; conftest.py de…

C++笔试强训day16

目录 1.字符串替换 2.神奇数 3.DNA序列 1.字符串替换 链接 简单的遍历替换即可&#xff1a; class Solution { public:string formatString(string str, vector<char>& arg) {string ret;int k 0;for (int i 0; i < str.size(); i){if (str[i] %){ret arg…

Windows10搭建GPU版Darknet—yolov4—VS2022+CUDA+CUDNN(亲测有效)

1 VS2019安装 网址&#xff1a;Visual Studio: 面向软件开发人员和 Teams 的 IDE 和代码编辑器 下载完成之后双击.exe文件 步骤严格如下安装 默认语音包为中文&#xff08;简体&#xff09; 安装位置可以自行选择&#xff0c;完成以后就可以点击安装了。 安装完毕以后需要重启…

如何解决 IPA 打包过程中的 “Invalid Bundle Structure“ 错误

哈喽&#xff0c;大家好呀&#xff0c;淼淼又来和大家见面啦&#xff0c;咱们行业内的应该都知道&#xff0c;在开发 iOS 应用时&#xff0c;将应用打包成 IPA 文件是常见的步骤之一。最近很多小伙伴们说在打包过程中&#xff0c;有时会遇到 "Invalid Bundle Structure&qu…

464. 我能赢吗

464. 我能赢吗 原题链接&#xff1a;完成情况&#xff1a;解题思路&#xff1a;参考代码&#xff1a;_464我能赢吗_记忆化dp 错误经验吸取 原题链接&#xff1a; 464. 我能赢吗 https://leetcode.cn/problems/can-i-win/description/ 完成情况&#xff1a; 解题思路&#x…