深圳市网站哪家做的好,做网站图片的大小,南阳理工网站建设,天津平台网站建设哪里好面试题#xff1a;谈谈你对观察者和订阅发布的理解
1. 观察者设计模式 场景引入之杂志订阅#xff1a;小王想要购买一本尚未出版的杂志#xff0c;他向出版社预订该杂志并提供联系方式#xff0c;一旦该杂志出版#xff0c;出版社就会根据小王预留的联系方式通知他可以来…面试题谈谈你对观察者和订阅发布的理解
1. 观察者设计模式 场景引入之杂志订阅小王想要购买一本尚未出版的杂志他向出版社预订该杂志并提供联系方式一旦该杂志出版出版社就会根据小王预留的联系方式通知他可以来购买了。这个简单的场景就是一个简单的观察者模式可以将小王扩充到任意数量的消费者一旦某个杂志出版了出版社就可以根据维护的订阅该杂志的消费者列表进行逐一通知。 观察者模式的解释观察者模式定义了一种一对多的依赖关系使得当一个对象主题被观察者Subject的状态改变时所有依赖它的对象观察者Observer都会得到通知并自动更新。观察者模式中观察者和被观察者的关系是通过被观察者建立的。 被观察者身上必须有三个方法添加观察者addObserver、删除观察者delObserver、通知观察者notifyObserver。被观察者维护一个观察者列表使用其自身的 addObserver 和 delObserver 方法添加或删除观察者。观察者身上必须有一个方法更新update。一旦被观察者的状态改变就会调用 notifyObserver 方法遍历其维护的观察者列表同时调用每个观察者的 update 的方法用于对被观察者的状态改变做出响应。将观察者模式与杂志订阅进行类比被观察者是出版社Subject其状态是对应杂志是否出版一旦杂志出版状态变化出版社就会根据其维护的订阅者列表逐一通知调用 notifyObserver 方法该方法遍历每个观察者调用对应观察者的 update 方法。观察者收到通知后就会来出版社购买杂志update 方法的调用结果。同时如果有其他消费者Observer想要订阅杂志就要来出版社留下联系方式出版社调用其 addObserver 方法。 观察者模式之杂志订阅的 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。发布订阅中心维护两个对象一个是以消息名为键消息内容数组为值另一个是以消息名为键回调函数数组为值。发布者和订阅者必须拥有发布订阅中心的引用以便在合适的时机根据自身逻辑进行发布或订阅。 订阅发布消息范式之考虑一个新闻发布系统 发布者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关注重点被观察者方法添加观察者、移除观察者、通知观察者发布订阅中心方法发布、订阅、通知耦合程度松耦合观察者功能不存粹需要将自身的变化响应式的反馈到观察者解耦合发布者只关注发布逻辑订阅者只关注订阅逻辑和实现接收到通知后的逻辑图像对比
REFERENCES
https://juejin.cn/post/6978728619782701087
https://refactoringguru.cn/design-patterns/observer
