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

小王同学在这里

已于 2024-06-03 20:21:56 修改

阅读量421

点赞数 10

于 2024-06-03 01:35:34 首次发布

本文链接：https://blog.csdn.net/weixin_52401264/article/details/139400892

版权

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

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）
关注重点	被观察者（方法：添加观察者、移除观察者、通知观察者）	发布订阅中心（方法：发布、订阅、通知）
耦合程度	松耦合（观察者功能不存粹，需要将自身的变化响应式的反馈到观察者）	解耦合（发布者只关注发布逻辑，订阅者只关注订阅逻辑和实现接收到通知后的逻辑）
图像对比