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

发布订阅模式:
订阅者把自己想订阅的事件注册到调度中心,当发布者发布该事件到调度中心,也就是该事件触发时,由调度者统一调度订阅者注册到调度中心的处理代码。
在javaScript 中我们一般使用事件模型来代替传统的发布订阅模式。
在这里插入图片描述

  1. 结构:在发布订阅模式中,有一个中介者来管理发布者和订阅者之间的关系。
  2. 关系:发布者和订阅者不直接耦合,他们通过中间进行通信。发布者将消息发布给中介者,然后中介者将消息传递给所有的订阅者。
  3. 通知方式:订阅者通过向中介者注册感兴趣的事件或主题,中介者在收到消息后负责将消息分发给所有的订阅者。

可以广泛应用于异步编程中,这是一种替代传递回调函数的方案。
可以取代对象之间硬编码的通知机制,一个对象不能再显示地调用另外一个对象的某个接口。

从建构上看,无论是MVC还是MVVM.都少不了发布订阅模式的参与,而且javaScript本身也是一门基于事件驱动的语言。

简单理解:
DOM 事件, js简单的发布订阅模式

document.getElementById('myBtn').addEventListener('click', function() {alert('hellow word!')
})

简单的发布订阅模式

中介者
let e = {_callback: [],on(callback) {// 订阅一件事,当这件事发生时,触发相应的函数// 订阅就是将函数放到数组中this._callback.push(callback)},emit(value) {this._callback.forEach(method => {method(value)})}
}
// 订阅
e.on(function(value) {console.log(value + 'aa的订阅')
})
// 订阅
e.on(function(value) {console.log(value + 'bb的订阅')
})
// 发布
e.emit('发布')

自定义事件

let salesOffices = {clientList: {}listen(key, fn) {if (!this.clientList[key]) {this.clientList[key] = []}this.clientList[key].push(fn)},tigger() { // 发布消息let key = Array.prototype.shift.call(arguments) // 取出消息类型 取出实参let fns = this.clientList[key]if (!fns || fns.length === 0) {return false}for(let fn of fns) {fn.apply(this, arguments)  }}
}// 例子
salesOffices.listen('squareMeter88', price => console.log(`价格 = ${price}`))
salesOffices.listen('squareMether110', price => console.log(`价格 = ${price}`))salesOffices.trigger('squareMether88', 2000000)
salesOffices.trigger('squareMether110', 3000000)

通用的实现
通用的一种封装,实现了订阅、发布、取消

const event = {clientList: [],listen: function(key, fn) {if (!this.clientList[key]) {this.clientList[key] = []}this.clientList[key].push(fn)}trigger: function() {const key = Array.prototype.shift.call(arguments)const fns = this.clientList(key)if (!fns || fns.length === 0) {return false}for(let i = 0, fn; fn = fns[i++];) {fn.apply(this, arguments)}}remove: function(key, fn) {let fns = this.clientList[key];if (!fns) {return false}if (!fn) {fns && (fns.length = 0)} else {for(let i = fns.length -i; 1 >= 0; i-- ) {let _fn = fns[i]if (_fn === fn) {fns.splice(1,1)}}}} 
}
const installEvent = function( obj ){obj = { ...obj, ...event }
};let salesOffices = {};
installEvent(salesOffices);salesOffices.listen( 'squareMeter88', fn1 = function(price){    // 小明订阅消息console.log('价格= ' + price);
});salesOffices.listen( 'squareMeter100', fn2 = function(price){     // 小红订阅消息console.log('价格= ' + price );
});salesOffices.remove('squareMeter88', fn1);    // 删除小明的订阅salesOffices.trigger('squareMeter88', 2000000);    // 输出:2000000
salesOffices.trigger('squareMeter100', 3000000);    // 输出:3000000

Veu中使用发布订阅
vue 提供了一个简单的事件系统,通过 vm.$emit 发布事件,vm.$on 订阅事件。这种机制类似于发布-订阅模式,允许组件之间进行松散耦合的通信。
在vue 中使用发布订阅模式的例子:
使用EventBus: 你可以创建一个简单的EventBus, 用于在不同组件之间进行通信。

// EventBus.js
import Vue from 'vue'
export const EventBus = new Vue()// componentsA.vue
import { EventBus } from  './EventBus'
export default {methods: {sendMessage() {EventBus.$emit('message', 'hello from ComponentA!')}}
}// componentsB.vue
import { EventBus } from './EventBus'
export default {methods: {sendMessage() {EventBus.$on('message', message => {console.log('Reveived message in ComponentB:', message)})}}
}

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

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

相关文章

深入了解iOS内存(WWDC 2018)笔记-内存诊断

主要记录下用于分析iOS/macOS 内存问题的笔记。 主要分析命令: vmmap, leaks, malloc_history 一:前言 有 3 种思考方式 你想看到对象的创建吗?你想要查看内存中引用对象或地址的内容吗?或者你只是想看看 一个实例有多大&#…

互联网大厂ssp面经之路:计算机网络part2

什么是 HTTP 和 HTTPS?它们之间有什么区别? a. HTTP(超文本传输协议)和HTTPS(安全超文本传输协议)是用于在Web上传输数据的协议。它们之间的区别在于安全性和数据传输方式。 b. HTTP是一种不安全的协议&…

【随笔】Git 高级篇 -- 整理提交记录(上)cherry-pick(十五)

💌 所属专栏:【Git】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! 💖 欢迎大…

加州大学欧文分校英语基础语法专项课程03:Simple Past Tense 学习笔记(完结)

Learn English: Beginning Grammar Specialization Specialization Certificate course 3: Simple Past Tense Course Certificate 本文是学习 https://www.coursera.org/learn/simple-past-tense 这门课的学习笔记,如有侵权,请联系删除。…

浙江大学李春阳团队Trends Plant Sci观点文章(IF=20):植物地下生态互作:为什么同性相斥,异性相吸?

在生态学中,人们一直致力于探究生物之间的相互作用,这些相互作用不仅包括物种之间的相互作用,还包括同一物种的不同性别之间的相互作用。对于异株植物物种来说,人们普遍认为异性之间的相互作用比同性之间的相互作用更弱&#xff0…

为说阿拉伯语的国家进行游戏本地化

阿拉伯语是由超过4亿人使用的语言,并且是二十多个国家的官方语言。进入这些国家的市场并非易事——虽然他们共享一种通用语言,但每个国家都有自己独特的文化,有自己的禁忌和对审查的处理方式。这就是为什么视频游戏公司长期以来都远离阿拉伯语…

Git如何将已经推送到服务器的文件夹“忽略”

例子:如果我们在推送之初,一股脑将工程的所有文件都备份,没有忽略 debug和release文件夹,反应过来想要将文件夹再次忽略,应该怎么操作呢? 如下解答方法: 1.在工程目录下新建文件 .gitignore …

graphicLayer.startDraw({指定type为curve曲线时,无法实现示例效果排查思路参考

graphicLayer.startDraw({指定type为curve曲线时,无法实现和示例一样的曲线效果的排查思路参考: 相关代码: graphicLayer.startDraw({type: "curve",style: {color: "#ff0000",width: 3,},}); 相关效果: …

创建型模式--4.抽象工厂模式【弗兰奇一家】

1. 奔向大海 在海贼世界中,位于水之都的弗兰奇一家是由铁人弗兰奇所领导的以拆船为职业的家族,当然了他们的逆向工程做的也很好,会拆船必然会造船。船是海贼们出海所必备的海上交通工具,它由很多的零件组成,从宏观上看…

Mathpix和Simpletex对比

原始资料 Mathpix结果 已知集合 A { y ∣ y 2 x } , B { x ∣ x ≥ a } A\left\{y \mid y2^{\sqrt{x}}\right\}, B\{x \mid x \geq a\} A{y∣y2x ​},B{x∣x≥a}, 若 A B AB AB, 则 a a a 的值为 ( ) A. 1 B. 2 C. 3 D. 4复数 z a i ( a ∈ R , i za\mathrm{i} \qua…

React - 你知道useffect函数内如何模拟生命周期吗

难度级别:中级及以上 提问概率:65% 很多前端开发人员习惯了Vue或者React的组件式开发,熟知组件的周期过程包含初始化、挂载完成、修改和卸载等阶段。但是当使用Hooks做业务开发的时候,看见一个个useEffect函数,却显得有些迷茫,因为在us…

windows安装使用nacos

1.下载安装包 网址:Releases alibaba/nacos GitHub 2.解压,bin目录下修改启动脚本为单机 3.修改数据库配置,使用本地mysql数据库 3.1 创建nacos数据库 3.2 执行 nacos\conf 目录下数据库脚本 4.修改nacos\conf目录下数据库配置 5.点击运…

【数据结构】考研真题攻克与重点知识点剖析 - 第 5 篇:树与二叉树

前言 本文基础知识部分来自于b站:分享笔记的好人儿的思维导图与王道考研课程,感谢大佬的开源精神,习题来自老师划的重点以及考研真题。此前我尝试了完全使用Python或是结合大语言模型对考研真题进行数据清洗与可视化分析,本人技术…

Javascript进阶内容

1. 作用域 1.1 局部作用域 局部作用域分为函数作用域 和 块级作用域 块级作用域就是用 {} 包起来的,let、const声明的变量就是产生块作用域,var不会;不同代码块之间的变量无法互相访问,里面的变量外部无法访问 1.2 全局作用域…

【图论】Leetcode 994. 腐烂的橘子【中等】

腐烂的橘子 在给定的 m x n 网格 grid 中,每个单元格可以有以下三个值之一: 值 0 代表空单元格;值 1 代表新鲜橘子;值 2 代表腐烂的橘子。 每分钟,腐烂的橘子 周围 4 个方向上相邻 的新鲜橘子都会腐烂。 返回 直到单…

Redis在windows中安装启动停止

Redis下载 Redis安装 解压即可 启动 停止 ctrlc 启动客户机 设置密码 打开redis.windows.conf Spring Data Redis 使用方式 导入spring Data Redis 的maven坐标 配置Redis数据源 3编写编写配置类,创建RedisTemplate对象

day75 js 正则表达式 window对象轮播图片调用定时器

一 正则表达式: RegExp 对象: 对字符串执行模式匹配的强大工具。 1 创建正则表达式对象 let reg /模式/修饰符 修饰符 attributes 是一个可选的字符串,包含属性 "g"、"i" 和 "m", …

信息泄露漏洞的JS整改方案

引言 🛡️ 日常工作中,我们经常会面临线上环境被第三方安全厂商扫描出JS信息泄露漏洞的情况,这给我们的系统安全带来了潜在威胁。但幸运的是,对于这类漏洞的整改并不复杂。本文将介绍几种可行的整改方法,以及其中一种…

操作系统理论知识快速总览

操作系统整体架构 搬出考研时的思维导图 操作系统主要分为 批处理系统(老古董,基本不用了)实时操作系统(嵌入式中使用较多,RTOS)分时操作系统(PC中使用较多,Linux,Windows) 分时操作系统和实时操作系统的使用场景不同&#xf…

pytest的时候输出一个F后面跟很多绿色的点解读

使用pytest来测试pyramid和kotti项目,在kotti项目测试的时候,输出一个F后面跟很多绿色的点,是什么意思呢? 原来在使用pytest进行测试时,输出中的“F”代表一个失败的测试(Failed),而…