正文

观察者模式和发布/订阅模式的区别(代码片段)

xfcao  xfcao  2023-04-09  267

关键词：

有这么一段代码经常会出现在代码中

 1 var pubsub = (()=>
 2   var topics = ;
 3   function subscribe(topic,fn)
 4     if(!topics[topic])
 5       topics[topic] = [];  
 6     
 7     topics[topic].push(fn);
 8   
 9   function publish(topic,...args)
10     if(!topics[topic])
11       return;
12     for(let fn of topics[topic])
13       fn(...args);  
14     
15   
16  return 
17       subscribe,
18       publish
19   
20 )()

测试代码

1 pubsub.subscribe(‘test‘,function(a,b)  //订阅者A订阅了test事件
2   console.log(a,b);    
3 );
4 pubsub.publish(‘test‘,‘123‘,‘HH‘);   //123  HH（发布者B发布了test事件）

调用publish后打印出了123 HH。很奇妙的一段代码，当然实际上只是遍历了数组，然后把数组中的所有函数全部执行一遍而已。但是对于一个没读过实现代码的人来说，却是一个神奇的存在，JS居然能订阅发布消息，太酷了。
有的时候我会叫他观察者模式，有时候又会叫他发布订阅模式，觉得叫什么都是对的。
但是，他们并不一样。

差异

在观察者模式中，观察者需要直接订阅目标事件。在目标发出内容改变的事件后，直接接收事件并作出响应。发布订阅模式相比观察者模式多了个事件通道，订阅者和发布者不是直接关联的。
这段话可以看出上面的例子是发布订阅模式。订阅者A和发布者B是通过pubsub这个对象关联起来的，他们没有直接的交流。

那么真正的观察者模式是怎么样的？

一个或多个观察者对目标的状态感兴趣，通过将自己依附在目标对象上以便注册所感兴趣的内容。目标状态发生改变并且观察者可能对这些改变感兴趣，会发送一个通知消息，调用每个观察者的更新方法。当观察者不再对目标状态感兴趣时，他们可以简单将自己从中分离。

我们来实现下观察者模式。首先是目标的构造函数，他有个数组，用于添加观察者。还有个广播方法，遍历观察者数组后调用他们的update方法：

 1 class Subject
 2   constructor()
 3     this.subs = [];
 4   
 5   addSub(sub)
 6     this.subs.push(sub);
 7   
 8   notify()
 9     this.subs.forEach(sub=> 
10       sub.update();
11     );
12   
13

那么观察者就得有个update方法：

1 class Observer
2   update()
3     console.log(‘update‘);
4   
5

测试代码

1 let subject = new Subject();
2 let ob = new Observer();
3 //目标添加观察者了
4 subject.addSub(ob);
5 //目标发布消息调用观察者的更新方法了
6 subject.notify();   //update

可以看到目标和观察者是直接联系在一起的。观察者把自身添加到了目标对象中，可见和发布订阅模式差别还是很大的。在这种模式下，目标更像一个发布者，他让添加进来的所有观察者都执行了update函数，而观察者就像一个订阅者。

优劣

个人觉得发布/订阅模式比较简单，使用的也比较广泛。由于他订阅者和发布者不直接关联的特点我们完全可以把管理事件的对象写到一个单独文件中，作为库来使用。发布订阅模式中，双方不知道对方的存在，而观察者模式中，目标和观察者是直接联系起来的。具体选择什么模式，得视场景而定。一般来说，发布/订阅就够用了，简单清晰，符合我们dom事件编程的观念。
观察者模式哪里被用到过？vue的双向绑定。下篇就讲一下观察者模式在vue双向绑定实现中的运用。

链接：https://www.jianshu.com/p/f0f22398d25d
来源：简书

设计模式之观察者模式(代码片段)

观察者模式，又被称为发布-订阅模式或消息机制，定义了一种依赖关系，解决了主体对象与观察者之间功能耦合。虽然说观察者模式，又被称为发布-订阅模式，但是实际上它们之间存在差异的，区别在于调度的地方不同。上图... 查看详情

javascript发布订阅者模式和观察者模式及区别(代码片段)

一、发布订阅模式发布订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到状态改变的通知。多方订阅，一方发布，订阅放会收到通知举例：教学楼中... 查看详情

javascript发布订阅者模式和观察者模式及区别(代码片段)

观察者模式vs发布订阅模式(代码片段)

目录场景观察者模式发布订阅模式总结场景有一回面试，面试官问：观察者模式，和发布订阅模式，有什么区别？我脑海中立刻闪现了《设计模式》里讲的：Publishers+Subscribers=ObserverPattern“它们是一样的。”，我故作镇定，嘴角... 查看详情

观察者模式vs发布订阅模式(代码片段)

说完观察者模式和发布订阅模式的区别，面试官不留我吃饭了(代码片段)

本文 Github/javamap 已收录，有Java程序员进阶技术知识地图以及我的系列文章，欢迎大家瞄一眼，不后悔。来到心仪已久的公司面试，刚推开门还没等我说话HR小姐姐就主动问我：你是来参加面试的吧？我... 查看详情

观察者和发布订阅模式的区别

观察者模式和发布订阅模式有什么区别？大多数的回答都是：Publishers+Subscribers=ObserverPattern，24种基本的设计模式并没有发布-订阅模式，发布订阅模式属于并发型模式；像典型的Mq；这两种相似单并不可以... 查看详情

观察者模式（observer）和发布（publish/订阅模式（subscribe）的区别

...要接触注册中心zookeeper，zookeeper里涉及发布和订阅问题。观察者模式之JAVA实现：JAVA设计模式之观察者模式发布订阅模式之JAVA实现：发布者订阅者模式之JAVA实现观察者模式（Observer）和发布（Publish/订阅模式（Subscri... 查看详情

观察者模式和发布/订阅模式的区别

...(EventBus)的架构设计中，用到了发布/订阅模式，但发现和观察者模式挺接近，有时容易发生混淆，现试图分清一下他们的关系。观察者模式的角色为观察者(observer)和主题(subject)对象，observer需要观察subject时... 查看详情

观察者模式和发布订阅模式（上）(代码片段)

观察者模式定义：观察者模式(ObserverPattern)：定义对象间的一种一对多依赖关系，使得每当一个对象状态发生改变时，其相关依赖对象皆得到通知并被自动更新。其中有两个定义需要明确，被观察者和观察者。通常来说，这两者... 查看详情

观察者模式和发布订阅模式(代码片段)

...力是否开启），但它的耦合太高。所以能够如何优化呢？观察者模式观察者模式，有时又被称为模型（Model）-视图（View）模式、源-收听者(Listener)模式或从属者模式，是一种对象行为模式。它定义对象间的一种一对多的依赖关系... 查看详情

观察者模式与发布订阅模式的区别

观察者模式是软件设计模式的一种。在此种模式中，一个目标对象管理所有相依于它的观察者对象，并且在它本身的状态改变时主动发出通知。这通常透过呼叫各观察者所提供的方法来实现。此种模式通常被用来实时事件处理系... 查看详情

观察者模式发布订阅和事件驱动(代码片段)

　　观察者模式（有时又被称为模型（Model）-视图（View）模式、源-收听者(Listener)模式或从属者模式）是软件设计模式的一种。在此种模式中，一个目标物件管理所有相依于它的观察者物件，并且在它本身的状态改变时主动发出... 查看详情

发布-订阅者模式(观察者模式)(代码片段)

...！！！！！一、发布订阅模式是什么发布订阅者模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象豆浆得到通知，在js开发中我们一般用事件模型来替代传统的发... 查看详情

[设计模式]观察者模式与订阅模式

　　在读《设计模式》时，观察者模式一直理解为订阅者/发布者，其实这两种模式还是有差异的。　　一、观察者模式　　　　相关概念：目标和观察者是基类，目标提供维护观察者的一系列方法，观察者提供更新接口。具体... 查看详情

观察者模式与发布-订阅模式(代码片段)

...是针对软件设计中普遍存在的各种问题所提出的解决方案观察者模式发布-订阅模式观察者模式观察者模式（Observerpattern）指的是在对象间定义一个一对多（被观察者与多个观察者）的关联，当一个对象改变了... 查看详情

观察者模式和订阅/发布者模式（转）

在翻阅资料的时候，有人把观察者（Observer）模式等同于发布（Publish）/订阅（Subscribe）模式，也有人认为这两种模式还是存在差异，而我认为确实是存在差异的，本质上的区别是调度的地方不同。观察者模式比较概念的解释是... 查看详情

eventbus发布-订阅模式(eventbus组成模块|观察者模式)(代码片段)

文章目录一、发布-订阅模式二、EventBus组成模块三、观察者模式一、发布-订阅模式发布订阅模式:发布者Publisher:状态改变时,向消息中心发送事件;订阅者Subscriber:到消息中心订阅自己关心的事件;消息中心:负责维护一个消息队列,... 查看详情