当前位置： 首页 > news >正文

面试题：谈谈你对观察者和订阅发布的理解

news 2025/7/15 11:37:36

面试题：谈谈你对观察者和订阅发布的理解

1. 观察者设计模式

  • 场景引入之杂志订阅：小王想要购买一本尚未出版的杂志，他向出版社预订该杂志并提供联系方式，一旦该杂志出版，出版社就会根据小王预留的联系方式通知他可以来购买了。这个简单的场景就是一个简单的观察者模式，可以将小王扩充到任意数量的消费者，一旦某个杂志出版了，出版社就可以根据维护的订阅该杂志的消费者列表进行逐一通知。

  • 观察者模式的解释：观察者模式定义了一种一对多的依赖关系，使得当一个对象（主题，被观察者，Subject）的状态改变时，所有依赖它的对象（观察者，Observer）都会得到通知并自动更新。观察者模式中，观察者和被观察者的关系是通过被观察者建立的。

    • 被观察者身上必须有三个方法：添加观察者（addObserver）、删除观察者（delObserver）、通知观察者（notifyObserver）。被观察者维护一个观察者列表，使用其自身的 addObserver 和 delObserver 方法添加或删除观察者。
    • 观察者身上必须有一个方法：更新（update）。一旦被观察者的状态改变，就会调用 notifyObserver 方法，遍历其维护的观察者列表，同时调用每个观察者的 update 的方法，用于对被观察者的状态改变做出响应。
    • 将观察者模式与杂志订阅进行类比，被观察者是出版社（Subject），其状态是对应杂志是否出版，一旦杂志出版（状态变化），出版社就会根据其维护的订阅者列表逐一通知（调用 notifyObserver 方法，该方法遍历每个观察者，调用对应观察者的 update 方法）。观察者收到通知后，就会来出版社购买杂志（update 方法的调用结果）。同时，如果有其他消费者（Observer）想要订阅杂志，就要来出版社留下联系方式（出版社调用其 addObserver 方法）。
    img img

  • 观察者模式之杂志订阅的 TS 实现

    • 观察者接口

      /* 观察者接口：所有观察者必须实现 update 方法 */
interface Observer {update(magazineName: string): void;
}

    • 被观察者接口

      /* 主题/被观察者接口：被观察者必须实现 add、del、notifyAll 方法，并且必须维护一个观察者列表 */
interface Subject {add(observer: Observer): Subject;del(observer: Observer): Subject;notifyAll(msg: string): void;
}

    • 观察者实现/消费者类的定义

      /* 消费者类 —— 实现观察者接口 */
class Subscriber implements Observer {name: string;constructor(name: string) {this.name = name;}update(magazineName: string): void {console.log(`消费者 ${this.name} 收到了消息：${magazineName} 现在可以购买了！！！`);}
}

    • 被观察者实现/出版社类的定义

      /* 出版社类 —— 实现被观察者接口 */
class Publisher implements Subject {private observerList: Observer[];constructor() {/* 出版社维护的消费者列表 ==> 相当于被观察者维护的观察者列表 */this.observerList = [];}add(observer: Observer): Publisher {/* 添加观察者 */this.observerList.push(observer);return this;}del(observer: Observer): Publisher {/* 删除观察者 */const index = this.observerList.indexOf(observer);if (index !== -1) {this.observerList.splice(index, 1);}return this;}notifyAll(msg: string): void {/* 通知所有观察者 */this.observerList.forEach(observer => observer.update(msg));}publishMagazine(magazineName: string): void {/* 发布杂志 */this.notifyAll(magazineName);}
}

    • 测试样例

      /* 测试用例 */
// 创建出版社
const publisher: Publisher = new Publisher();
// 创建消费者
const chris: Subscriber = new Subscriber("Chris");
const jerry: Subscriber = new Subscriber("Jerry");
const tom: Subscriber = new Subscriber("Tom");
// 消费者订阅
publisher.add(chris).add(jerry).add(tom);
// 出版社杂志出版（自动通知消费者）
publisher.publishMagazine("《简爱》");
/* 输出：消费者 Chris 收到了消息：《简爱》 现在可以购买了！！！消费者 Jerry 收到了消息：《简爱》 现在可以购买了！！！消费者 Tom 收到了消息：《简爱》 现在可以购买了！！！
*/

2. 订阅发布消息范式

  • 场景引入之仍是杂志订阅：假设有许多消费者想要订阅杂志，出版社需要维护一个庞大的消费者列表。当杂志出版时，出版社需要根据这个列表逐一通知所有订阅者来购买杂志。显然，随着消费者列表中的元素数量增加，出版社需要花费大量时间来维护列表、处理订阅和取消订阅请求，并逐一通知用户。这种做法显然会耽误出版社的本职工作——出版杂志。因此，出版社决定寻找一个代理中介，由这个中介来维护订阅者列表。这样一来，出版社除了出版杂志之外，只需要通知中介即可，中介则会根据维护的订阅者列表，逐一通知所有订阅者。这就是发布-订阅消息范式。通过使用发布-订阅消息范式，观察者与被观察者之间的耦合性得到了降低。被观察者只需要通知中介，这称为“发布”；观察者只需要向中介注册，这称为“订阅”。一旦中介收到被观察者的通知，就会将相应的信息告知所有观察者。

  • 订阅发布消息范式的解释：订阅发布消息范式可以理解为观察者模式的升级版，在观察者和被观察者之间引入了一个中介。在这种范式中，我们引入了几个概念：消息、订阅者、发布者和发布订阅中心。发布者发布一个消息，包含消息名和消息内容；订阅者注册自己的信息，包含消息名和回调函数；发布订阅中心维护一个消息对象和一个回调对象，每个对象的元素为列表，列表名为消息名，列表中的元素为发布者发布的消息内容或订阅者注册的回调函数。发布者通过发布订阅中心发布消息，订阅者通过发布订阅中心注册信息，发布订阅中心根据消息类型，使用对应的消息内容和回调函数执行相应的逻辑。

    • 发布订阅中心必须有三个方法：发布（publish）、订阅（subscribe）、通知（notify）。发布订阅中心维护两个对象：一个是以消息名为键，消息内容数组为值；另一个是以消息名为键，回调函数数组为值。
    • 发布者和订阅者必须拥有发布订阅中心的引用，以便在合适的时机根据自身逻辑进行发布或订阅。
    img

  • 订阅发布消息范式之考虑一个新闻发布系统

    发布者A发布关于“体育”的消息。发布者B也发布关于“体育”的消息。

    发布者C发布关于“科技”的消息。

    订阅者X订阅“体育”主题，所以它会收到发布者A和发布者B的所有“体育”消息。

    订阅者Y订阅“科技”主题，它只会收到发布者C关于“科技”的消息。

    优点：发布者和订阅者彼此独立，可以独立扩展和修改，消息代理负责消息的传递，简化了系统的复杂性。

  • 订阅发布消息范式之杂志订阅 + 商品预购的 JS 实现

    此示例想要表明：发布订阅中心根据消息管理发布消息信息和订阅回调，发布者可以有多个，不同发布者发布的消息可能被相同的订阅者订阅。一个消息即可以被不同发布者发布，也可以被不同消费者消费。

    • 发布者/出版商 ＆ 商家（两种消息类型，“books”, “products”）

      /* 发布者 */
class Publisher {constructor(pubsub, msgType) {/* 每个发布者都可以通过自身访问到订阅发布中心 this.pubsub*/this.pubsub = pubsub;/* this.type 表示当前发布者发布的消息类型 */this.msgType = msgType;}publish(msg) {/* 发布类型为 this.msgType 的消息 */this.pubsub.publish(this.msgType, msg);}
}

    • 订阅者/消费者

      /* 订阅者 */
class Subscriber {constructor(pubsub, name) {/* 每一个订阅者都可以通过自身访问到订阅发布中心 this.pubsub */this.pubsub = pubsub;/* 消费者姓名 */this.name = name;}subscribe(msgType, cb) {/* 订阅类型为 msgType 的消息，发布订阅中心使用每个 cb 处理对应消息类型的所有消息内容 */this.pubsub.subscribe(msgType, cb);}
}

    • 发布订阅中心

      /* 发布订阅中心 */
class PubSub {constructor() {/* 以下两个对象的元素都是数组，数组名表示消息类型，数组中的元素表示一个消息内容 or 一个回调函数 */this.messages = {}; // 根据消息类型维护的消息内容对象this.listeners = {} // 根据消息类型维护的回调函数对象}publish(msgType, msg) {const isExist = this.messages[msgType];if (!isExist) {this.messages[msgType] = []}this.messages[msgType].push(msg)/* 一旦发布者发布，就通知订阅者，即执行订阅者传递的回调函数 */this.notifyAsType(msgType)}subscribe(msgType, cb) {const isExist = this.listeners[msgType];if (!isExist) {this.listeners[msgType] = []}this.listeners[msgType].push(cb)}notifyAsType(msgType) {const messages = this.messages[msgType];const listeners = this.listeners[msgType];if (!listeners) return;/* 所谓的通知订阅者，即调用订阅者传递的回调，同时接收一个参数，为当前消息类型的消息信息构成的数组 */listeners.forEach((cb) => {cb(messages);})}
}

    • 测试样例

      /* 测试样例 */
/* 订阅发布中心 */
const broker = new PubSub(); // 发布订阅中心
/* 发布者 */
const publisher = new Publisher(broker, "books"); // 发布者之出版社
const seller = new Publisher(broker, "products"); // 发布者之商家
/* 订阅者 */
const chris = new Subscriber(broker, "chris");
const jerry = new Subscriber(broker, "jerry");
/* 订阅消息 */
chris.subscribe("books", (message, name = "chris") => {/* 定义简单的处理消息内容的回调函数 */console.log(`${name} 收到通知，出版社出新书了，现在出版书籍为 ${message}`);
});
jerry.subscribe("books", (message, name = "jerry") => {console.log(`${name} 收到通知，出版社出新书了，现在出版书籍为 ${message}`);
});
jerry.subscribe("products", (message, name = "jerry") => {console.log(`${name} 收到通知，新品上架了，现在有新品为 ${message}`);
})
/* 发布消息 */
publisher.publish("简爱");
publisher.publish("悉达多");
publisher.publish("风沙星辰");
seller.publish("水杯");
seller.publish("牙刷");
seller.publish("牙膏");
/* chris 收到通知，出版社出新书了，现在出版书籍为 简爱jerry 收到通知，出版社出新书了，现在出版书籍为 简爱chris 收到通知，出版社出新书了，现在出版书籍为 简爱,悉达多jerry 收到通知，出版社出新书了，现在出版书籍为 简爱,悉达多chris 收到通知，出版社出新书了，现在出版书籍为 简爱,悉达多,风沙星辰jerry 收到通知，出版社出新书了，现在出版书籍为 简爱,悉达多,风沙星辰jerry 收到通知，新品上架了，现在有新品为 水杯jerry 收到通知，新品上架了，现在有新品为 水杯,牙刷jerry 收到通知，新品上架了，现在有新品为 水杯,牙刷,牙膏
*/

3. 辨·区别

区别观察者订阅发布
类型设计模式消息范式
对象数量至少两个
（观察者>=1，被观察者>=1）		至少三个
（发布者>=1，订阅者>=1，发布订阅中心=1）
关注重点被观察者
（方法：添加观察者、移除观察者、通知观察者）		发布订阅中心
（方法：发布、订阅、通知）
耦合程度松耦合
（观察者功能不存粹，需要将自身的变化响应式的反馈到观察者）		解耦合
（发布者只关注发布逻辑，订阅者只关注订阅逻辑和实现接收到通知后的逻辑）
图像对比观察者.jpg发布订阅模拟观察者模式.jpg

REFERENCES

https://juejin.cn/post/6978728619782701087

https://refactoringguru.cn/design-patterns/observer

http://www.lryc.cn/news/361122.html

相关文章：

  • 下载文件流
  • 有开源软件，也有开源硬件？
  • 【TensorFlow深度学习】卷积层变种与深度残差网络原理
  • 每日一题《leetcode-- LCR 025.两数相加||》
  • MySQL数据库的约束
  • 计算机毕业设计 | springboot+vue会议室管理系统(附源码)
  • 常见端口及其脆弱点
  • JS函数的进阶
  • 【UE+GIS】UE5GIS CAD或shp构建3D地形
  • Unity学习笔记---音视频播放
  • 项目集成过程中的makefile记录
  • Vue3 -Computed计算属性
  • MySQL—函数—日期函数（基础）
  • Java+SVNCloud+Mysql课程设计
  • MySQL之创建高性能的索引(四)
  • Python 限制输入数的范围
  • STM32两轮平衡小车原理详解
  • (笔记)如何评价一个数仓的好坏
  • 友善RK3399v2平台利用rkmpp实现硬件编解码加速
  • Mysql 8.0 主从复制及读写分离搭建记录
  • PyTorch、显卡、CUDA 和 cuDNN 之间的关系
  • Lambda 表达式练习
  • JavaScript第七讲：数组，及练习题
  • 从docker镜像反推Dockerfile
  • 车载软件架构 - AUTOSAR 的信息安全框架
  • 欧洲版“OpenAI”——Mistral 举办的 AI 大模型马拉松
  • Java | Leetcode Java题解之第128题最长连续序列
  • C++的List
  • 网易有道QAnything使用CPU模式和openAI接口安装部署
  • 量子加速超级计算简介