Javascript设计模式 -- 发布订阅模式

发布订阅模式

发布订阅模式是一种对象之间一对多的依赖关系(利用消息队列)
一个对象的状态发生变化,所有依赖它的对象都会得到状态改变的通知
订阅者把自己想订阅的事件注册到调度中心
发布者发布该事件到调度中心,当该事件触发的时候,会由调度的中心统一调度订阅者注册到调度中心的处理代码

角色

发布者: 负责发布事件或者消息
订阅者: 订阅了发布者发布的事件或消息,并在事件发生时做出响应
订阅发布模式的基本思想就是解耦发布者和订阅者之间的关系,发布者不需要只知道订阅者的存在,订阅者不需要知道发布者的存在。通过一个中介(事件总线,事件管理器)进行通信

优点缺点

  • 优点
    1. 解耦性:发布者和订阅者是松散耦合的,不需要知道彼此的存在
    2. 灵活性:订阅发布模式允许系统之间不同部分在不影响彼此的情况下同行。
    3. 拓展性:通过订阅发布模式,可以新增新的订阅和发布者
  • 缺点
    1. 增加消耗,创建结构和缓存订阅这两个过程都需要消耗计算和内存资源
    2. 增加复杂度,订阅者被缓存在一起,多个订阅者和发布者层层嵌套,程序将变得难以调试和追踪

实现

  1. 手动实现
  2. js库: Nodejs:EventEmitter Jquery: 事件系统

订阅发布

  1. 简单的事件触发和订阅机制
class EventEmitter {constructor() {this.handles = {}   // 事件队列}// 订阅事件on(eventName, callback) {if (!this.handles[eventName]) {this.handles[eventName] = []}this.handles[eventName].push(calllback)}// 触发事件emit(eventName) {if (this.handles[eventName]) {const handles = this.handles[eventName]handles.forEach(callback => {callback()})}}
}
const emitter = new EventEmitter()
emitter.on('onShell', () => {console.log('hello')
})
emitter.on('onShell', () => {console.log('world')
})
emitter.emit('onShell')

在上述代码的基础上新增一个取消订阅的功能

off(eventName, cb) {const handles = this.handles[eventName]const index = handles && handles.indexOf(cb)if (index !== -1 ) {handles.splice(index, 1)}
}

在上述代码中实现仅订阅一次的事件

once(eventName, cb) {if (this.handles[eventName] && this.handles[eventName].indexOf(cb) !== -1) {return }this.on(eventName, cb)
} 

学习了掘金上的博主https://juejin.cn/post/7356055073586151475?searchId=202404221111586D858AF5D43472053BDE

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

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

相关文章

Dockerfile学习

一、基础知识 0、参考:Dockerfile 指令详解 | Docker — 从入门到实践 1、Dockerfile 是一个文本文件,其内包含了一条条的 指令(Instruction),每一条指令构建一层,因此每一条指令的内容,就是描述该层应当如何构建。 …

CentOS8安装更换JDK

CentOS8安装更换JDK 背景:在服务器上启动java项目报错,JDK问题。更换jdk。探索整理安装JDK的方法。一些常用系统命令。清华源下载。 文章目录 CentOS8安装更换JDK准备工作:查看本地相关信息 方式一:yum安装搜索安装配置环境变量 方…

three.js实现热力图(vue heatmap.js)

vuethree.js项目 heatmap.js这个库太久没维护了,换别人二开的库rengr/heatmap.js npm i rengr/heatmap.js使用方式与heatmap.js这个库一样 heatmap.js参考文档 import h337 from rengr/heatmap.js function addHeatmapPlane() {let x 230let y 60const canvas…

Linux(rpm,yum安装及管理程序)

目录 1.应用程序与系统命令 2.RPM 2.1rpm软件包管理工具 2.2 rpm命令的形式 2.3查询rpm软件包 ​2.4安装、升级、卸载rpm软件包 2.5维护数据库 3.yum 3.1 配置本地yum源仓库 3.2 yum常用操作命令 3.3 源码编译安装软件 1.应用程序与系统命令 应用程序与系统命令的关系 典…

银河麒麟安装OpenJDK

# 更新软件包列表(根据系统的实际情况,可能不需要这一步) sudo apt-get update # 安装OpenJDK sudo apt-get install openjdk-8-jdk

Vue3 中 createWebHistory 和 createWebHashHistory 的区别

createWebHistory 创建方式: 使用 createWebHistory 函数来创建基于 HTML5 History API 的路由。 import { createRouter, createWebHistory } from vue-router import Home from /views/Home.vue import About from /views/About.vueconst router createRouter(…

圣若热城堡、贝伦塔、热罗尼莫斯修道院 BIBM 2024在里斯本等你

会议之眼 快讯 2024年BIBM(IEEE International Conference on Bioinformatics and Biomedicine)即IEEE生物信息学与生物医学国际会议将于 2024年 12月3日-6日在葡萄牙里斯本举行!这个会议由IEEE(电气和电子工程师协会&#xff09…

linux将一个文件移动或复制到另一个目录下(超详细)

问题:需要在linux中将一个文件移动或复制到另一个目录下 下面提到的目录,可以直观理解为window中的文件夹 1、mv命令 mv是"move"的缩写,用于移动文件或目录到另一个位置。 将 文件 a.txt 移动到 目录home下 mv a.txt home将 目录…

Spark 中的分桶分化

Spark 中的分桶分化 Bucketing是 Spark 和 Hive 中用于优化任务性能的一种技术。在分桶桶(集群列)中确定数据分区并防止数据混洗。根据一个或多个分桶列的值,将数据分配给预定义数量的桶。 分桶有两个主要好处: 改进的查询性能&…

小游戏贪吃蛇的实现之C语言版

找往期文章包括但不限于本期文章中不懂的知识点: 个人主页:我要学编程(ಥ_ಥ)-CSDN博客 所属专栏:C语言 目录 游戏前期准备: 设置控制台相关的信息 GetStdHandle GetConsoleCursorInfo SetConsoleCursorInfo SetConsoleCu…

单机三pxc节点集群,+docker-haproxy2.0负载均衡实现

一.下载 https://www.haproxy.org/download/2.0/src/haproxy-2.0.5.tar.gz 或者在这里下载(下面需要的各个配置文件都有): https://download.csdn.net/download/cyw8998/89170129 二.编写文件,制作docker镜像 1.Dockerfile&a…

四款一键智能改写工具,为你轻松改出爆款文章

四款一键智能改写工具,为你轻松改出爆款文章!当今,虽然内容创作变得非常重要。但是,有时候创作灵感可能枯竭,或者需要对已有内容进行改写以增加独特性。这时候,一键智能改写工具成为了创作中的一种强大的辅…

LeetCode 课程表二(拓扑排序+Python)

使用桶排序算法中的kahn(卡恩)算法,也可以使用dfs。 这里使用卡恩算法,主要维护一个列表cnt,cnt【i】表示能到达节点i的边,比如说:a到c有一条边,b到c有一条边,那么cnt【…

信息流广告大行其是,微博回望“原生”的初心

摘要:有流量的地方,就当有原生信息流广告 信息流广告,自2006年Facebook推出后就迅速火遍全球数字营销界,被誉为实现了广告主、用户、媒体平台三赢。特别是随着OCPM/OCPX大放异彩,信息流广告几乎成为广告主的必选项&…

iText生成PDF文件

一、导语 常见生成PDF文件的有两种方法,一是先生成 word文档,然后将word转换成PDF文件;另一种则是直接生成PDF文件。 1.1.word转换PDF 1.1.1.技术介绍 生成Word文件并将其转换为PDF文件,可以使用多种Java库和JAR包。以下是一些…

Print Conductor 文档批量打印工具 v9.0.2312

网盘下载 Print Conductor 是 Windows 上一款功能强大的文档批量打印工具,通过该软件可以快速的帮用户批量处理打印PDF文件、协议、文档、图纸、演示文稿、文本文件等,完美的支持PDF、DOC、JPG、PNG、SNP、PSD、MSG、WRI、WPS、RTF、TXT、XLS、PPT、PPS、…

在Linux系统中,禁止有线以太网使用NTP服务器进行时间校准的几种方法

目录标题 方法 1:修改NTP配置以禁止所有同步方法 2:通过网络配置禁用NTP同步方法 3:禁用NTP服务 在Linux系统中,如果想要禁止有线以太网使用NTP服务器进行时间校准,可以通过以下几种方法之一来实现: 方法 …

Java中的对象

什么是类和对象 在Java中类是物以类聚,分类的思维模式,思考问题首先会解决问题需要哪些分类,然后对这些类进行单独思考,最后才是对某分类下的细节进行单独思考 面向对象适合处理复杂问题适合处理需要多人协作的问题 在Java中面向…

【状态机dp 动态规划】100290. 使矩阵满足条件的最少操作次数

本文涉及知识点 动态规划汇总 状态机dp LeetCode100290. 使矩阵满足条件的最少操作次数 给你一个大小为 m x n 的二维矩形 grid 。每次 操作 中,你可以将 任一 格子的值修改为 任意 非负整数。完成所有操作后,你需要确保每个格子 grid[i][j] 的值满足…

【Qt 学习笔记】Qt常用控件 | 显示类控件 | Label的使用及说明

博客主页:Duck Bro 博客主页系列专栏:Qt 专栏关注博主,后期持续更新系列文章如果有错误感谢请大家批评指出,及时修改感谢大家点赞👍收藏⭐评论✍ Qt常用控件 | 显示类控件 | Label的使用及说明 文章编号:Q…