观察者模式 vs 发布-订阅模式：两种设计模式的对决！

深碍√TFBOYSˉ_ 2024-04-25 20:12 5阅读 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);
      }
    }

使用代码如下：

上述代码，发布者和订阅者需要通过发布订阅中心进行关联，发布者的发布动作和订阅者的订阅动作相互独立，无需关注对方，消息派发由发布订阅中心负责

### 三、区别 ###

两种设计模式思路是一样的，举个生活例子：

*  观察者模式：某公司给自己员工发月饼发粽子，是由公司的行政部门发送的，这件事不适合交给第三方，原因是“公司”和“员工”是一个整体
 *  发布-订阅模式：某公司要给其他人发各种快递，因为“公司”和“其他人”是独立的，其唯一的桥梁是“快递”，所以这件事适合交给第三方快递公司解决

上述过程中，如果公司自己去管理快递的配送，那公司就会变成一个快递公司，业务繁杂难以管理，影响公司自身的主营业务，因此使用何种模式需要考虑什么情况两者是需要耦合的

两者区别如下图：

[![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