观察者模式 vs 发布-订阅模式:两种设计模式的对决! 深碍√TFBOYSˉ_ 2024-04-25 20:12 38阅读 0赞 ![0a2b99bd4bdb4465990d43f5e3288000.png][] **? 江城开朗的豌豆**:[个人主页][Link 1] **? 个人专栏** :[《 VUE 》][VUE] [《 javaScript 》][javaScript] ? **个人网站** :[《 江城开朗的豌豆? 》][Link 2] **⛺️ 生活的理想,就是为了理想的生活 !** ![在这里插入图片描述][7a8de4d12e20434eb29590366872b046.gif_pic_center] **目录** ⭐ 专栏简介 ? 文章引言 一、观察者模式 二、发布订阅模式 三、区别 ⭐ 写在最后 -------------------- ### ⭐ 专栏简介 ### > 欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。 > > ![d3d827793cb7463581b9054b61d9f5e9.png][] > > 同时,我们也会关注最新的前端趋势和发展动态。随着Web技术的不断演进,前端开发也在不断推陈出新。我们会及时介绍最新的前端框架、工具和技术,使你能够站在前沿,与时俱进。通过掌握最新的前端技术,你将能够在竞争激烈的Web开发领域中有更大的竞争力。 ![58f57bd93ba343be90b6abee12b29308.png][] ### [?][Link 3] 文章引言 ### ### 一、观察者模式 ### 观察者模式定义了对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知,并自动更新 观察者模式属于行为型模式,行为型模式关注的是对象之间的通讯,观察者模式就是观察者和被观察者之间的通讯 > 例如生活中,我们可以用报纸期刊的订阅来形象的说明,当你订阅了一份报纸,每天都会有一份最新的报纸送到你手上,有多少人订阅报纸,报社就会发多少份报纸 > > 报社和订报纸的客户就形成了一对多的依赖关系 实现代码如下: 被观察者模式 class Subject { constructor() { this.observerList = []; } addObserver(observer) { this.observerList.push(observer); } removeObserver(observer) { const index = this.observerList.findIndex(o => o.name === observer.name); this.observerList.splice(index, 1); } notifyObservers(message) { const observers = this.observeList; observers.forEach(observer => observer.notified(message)); } } 观察者: class Observer { constructor(name, subject) { this.name = name; if (subject) { subject.addObserver(this); } } notified(message) { console.log(this.name, 'got message', message); } } 使用代码如下: const subject = new Subject(); const observerA = new Observer('observerA', subject); const observerB = new Observer('observerB'); subject.addObserver(observerB); subject.notifyObservers('Hello from subject'); subject.removeObserver(observerA); subject.notifyObservers('Hello again'); 上述代码中,观察者主动申请加入被观察者的列表,被观察者主动将观察者加入列表 ### 二、发布订阅模式 ### > 发布-订阅是一种消息范式,消息的发送者(称为发布者)不会将消息直接发送给特定的接收者(称为订阅者)。而是将发布的消息分为不同的类别,无需了解哪些订阅者(如果有的话)可能存在 > > 同样的,订阅者可以表达对一个或多个类别的兴趣,只接收感兴趣的消息,无需了解哪些发布者存在 > > 实现代码如下: class PubSub { constructor() { this.messages = {}; this.listeners = {}; } // 添加发布者 publish(type, content) { const existContent = this.messages[type]; if (!existContent) { this.messages[type] = []; } this.messages[type].push(content); } // 添加订阅者 subscribe(type, cb) { const existListener = this.listeners[type]; if (!existListener) { this.listeners[type] = []; } this.listeners[type].push(cb); } // 通知 notify(type) { const messages = this.messages[type]; const subscribers = this.listeners[type] || []; subscribers.forEach((cb, index) => cb(messages[index])); } } 发布者代码如下: class Publisher { constructor(name, context) { this.name = name; this.context = context; } publish(type, content) { this.context.publish(type, content); } } 订阅者代码如下: class Subscriber { constructor(name, context) { this.name = name; this.context = context; } subscribe(type, cb) { this.context.subscribe(type, cb); } } 使用代码如下: const TYPE_A = 'music'; const TYPE_B = 'movie'; const TYPE_C = 'novel'; const pubsub = new PubSub(); const publisherA = new Publisher('publisherA', pubsub); publisherA.publish(TYPE_A, 'we are young'); publisherA.publish(TYPE_B, 'the silicon valley'); const publisherB = new Publisher('publisherB', pubsub); publisherB.publish(TYPE_A, 'stronger'); const publisherC = new Publisher('publisherC', pubsub); publisherC.publish(TYPE_C, 'a brief history of time'); const subscriberA = new Subscriber('subscriberA', pubsub); subscriberA.subscribe(TYPE_A, res => { console.log('subscriberA received', res) }); const subscriberB = new Subscriber('subscriberB', pubsub); subscriberB.subscribe(TYPE_C, res => { console.log('subscriberB received', res) }); const subscriberC = new Subscriber('subscriberC', pubsub); subscriberC.subscribe(TYPE_B, res => { console.log('subscriberC received', res) }); pubsub.notify(TYPE_A); pubsub.notify(TYPE_B); pubsub.notify(TYPE_C); 上述代码,发布者和订阅者需要通过发布订阅中心进行关联,发布者的发布动作和订阅者的订阅动作相互独立,无需关注对方,消息派发由发布订阅中心负责 ### 三、区别 ### 两种设计模式思路是一样的,举个生活例子: * 观察者模式:某公司给自己员工发月饼发粽子,是由公司的行政部门发送的,这件事不适合交给第三方,原因是“公司”和“员工”是一个整体 * 发布-订阅模式:某公司要给其他人发各种快递,因为“公司”和“其他人”是独立的,其唯一的桥梁是“快递”,所以这件事适合交给第三方快递公司解决 上述过程中,如果公司自己去管理快递的配送,那公司就会变成一个快递公司,业务繁杂难以管理,影响公司自身的主营业务,因此使用何种模式需要考虑什么情况两者是需要耦合的 两者区别如下图: [![ad31a4bb979ef1bd89fae1eaf9a4a6f4.png][]][ad31a4bb979ef1bd89fae1eaf9a4a6f4.png 1] > * 在观察者模式中,观察者是知道Subject的,Subject一直保持对观察者进行记录。然而,在发布订阅模式中,发布者和订阅者不知道对方的存在。它们只有通过消息代理进行通信。 > * 在发布订阅模式中,组件是松散耦合的,正好和观察者模式相反。 > * 观察者模式大多数时候是同步的,比如当事件触发,Subject就会去调用观察者的方法。而发布-订阅模式大多数时候是异步的(使用消息队列) ### ⭐ 写在最后 ### > 请大家不吝赐教,在下方评论或者私信我,十分感谢???. > > ✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式 > > ✅ 认为我部分代码过于老旧,可以提供新的API或最新语法 > > ✅ 对于文章中部分内容不理解 > > ✅ 解答我文章中一些疑问 > > ✅ 认为某些交互,功能需要优化,发现BUG > > ✅ 想要添加新功能,对于整体的设计,外观有更好的建议 > > 最后感谢各位的耐心观看,既然都到这了,点个 ?赞再走吧! ![b061e7afd3a14e3c993d485acf3320f0.png][] [0a2b99bd4bdb4465990d43f5e3288000.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/df024a6f62574a349cd8408501cb358a.png [Link 1]: https://blog.csdn.net/qq_48652579?type=blog [VUE]: https://blog.csdn.net/qq_48652579/category_12294321.html [javaScript]: https://blog.csdn.net/qq_48652579/category_12275821.html [Link 2]: https://tinyurl.com/yangtaoWeb [7a8de4d12e20434eb29590366872b046.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/7d566f6071dc472080912e3d20f3da34.gif [d3d827793cb7463581b9054b61d9f5e9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/3ac3201a7c1d40369db274560f85de43.png [58f57bd93ba343be90b6abee12b29308.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/a7778abfd1204964b6fd106059430b6a.png [Link 3]: https://blog.csdn.net/qq_48652579/article/details/133752898?spm=1001.2014.3001.5501#%E5%BC%95%E8%A8%80 [ad31a4bb979ef1bd89fae1eaf9a4a6f4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/3c461513dc684c67a88daa6f8524e800.png [ad31a4bb979ef1bd89fae1eaf9a4a6f4.png 1]: https://camo.githubusercontent.com/f251eae7c9e7021abe7de0086855c8af3bf26e4d2f866e831dfd673bd60b8bcc/68747470733a2f2f66696c65732e6d646e6963652e636f6d2f757365722f3135352f39313431363832632d373338362d346631322d383431322d6662313761316364346266362e706e67 [b061e7afd3a14e3c993d485acf3320f0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/2991661f1db2483fa83908f9de294adb.png
相关 观察者模式 vs 发布-订阅模式:两种设计模式的对决! 欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学... 深碍√TFBOYSˉ_/ 2024年04月25日 20:12/ 0 赞/ 39 阅读
相关 java设计模式--观察者(发布订阅) *1、概述: ** 观察者模式又称“发布订阅模式”定义一种一对多的依赖关系,让多个观察者对象同时监视着被观察者的状态,当被观察者的状态发送变... 旧城等待,/ 2024年04月17日 20:15/ 0 赞/ 106 阅读
相关 观察者模式 vs 发布订阅模式 目录 场景 观察者模式 发布订阅模式 总结 -------------------- 场景 有一回面试,面试官问: 末蓝、/ 2023年10月06日 19:03/ 0 赞/ 48 阅读
相关 【JavaScript 设计模式】观察者模式与发布订阅模式 JavaScript 设计模式系列文章: [设计模式总览][Link 1] [工厂模式][Link 2] [单例模式][Link 3] [观察者模式/ Bertha 。/ 2022年12月04日 07:58/ 0 赞/ 262 阅读
相关 浅谈JavaScript设计模式——观察者模式(发布订阅模式) 观察者模式,又称为发布订阅模式,它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己 分手后的思念是犯贱/ 2022年06月18日 08:51/ 0 赞/ 276 阅读
相关 观察者模式(发布-订阅者模式) 观察者模式定义了一种依赖关系,解决了主体对象和观察者之间功能的耦合,主要应用于大型项目的模块化开发中,解决团队开发中模块之间的通信问题,利用观察者模式还可以实现自定义事件。 素颜马尾好姑娘i/ 2022年05月22日 06:00/ 0 赞/ 250 阅读
相关 设计模式之观察者模式(发布订阅模式) 说明:本文参照《大话设计模式》中的案例做简要解析 观察者模式: 又叫发布-订阅模式,定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象。 深藏阁楼爱情的钟/ 2022年05月21日 10:39/ 0 赞/ 304 阅读
相关 javascript 观察者模式 发布订阅模式 观察者模式 观察者模式,每一个观察者对象有两个方法 添加监听`subscribe` 发布事件`publish` 观察者有个`list`存放所有的已经添加监 本是古典 何须时尚/ 2022年04月24日 10:14/ 0 赞/ 243 阅读
相关 发布订阅模式(观察者模式) 设计模式的目的就是使类成为可复用的组件。 在观察者模式中观察者接口只注重被观察者,而被观察者接口只注重观察者,具体是观察者接口实现类中的哪一个并不在意,而被观察者也是如此。这 清疚/ 2021年12月15日 00:27/ 0 赞/ 327 阅读
还没有评论,来说两句吧...