介绍下观察者模式和订阅 - 发布模式的区别、各自适用于什么场景？

发布于 2024-10-27 19:11:08 字数 3247 浏览 9 评论 0

观察者模式（Observer Pattern）和订阅-发布模式（Publish-Subscribe Pattern）是两种常见的设计模式，用于处理对象之间的通信。虽然它们在概念上有很多相似之处，但在实现和适用场景上存在一些区别。

观察者模式（Observer Pattern）

定义

观察者模式是一种行为设计模式，其中一个对象（称为主题或 被观察者 ）维护一组依赖于它的对象（称为 观察者 或 监听者 ），并在其状态发生变化时自动通知这些观察者。观察者模式通常用于需要在对象状态变化时进行更新的场景。

实现

主题（Subject） : 提供注册、注销观察者的方法，并在状态变化时通知所有注册的观察者。
观察者（Observer） : 实现一个更新接口，用于接收来自主题的通知。

适用场景

依赖关系 : 当一个对象的变化需要通知多个其他对象时，例如一个数据模型的变化需要更新多个视图。
依赖性紧密 : 观察者模式通常用于对象之间的依赖关系比较紧密的情况，观察者通常是对被观察者有明确依赖的对象。

示例

class Subject {
    constructor() {
        this.observers = [];
    }

    addObserver(observer) {
        this.observers.push(observer);
    }

    notifyObservers(data) {
        this.observers.forEach(observer => observer.update(data));
    }
}

class Observer {
    update(data) {
        console.log(`Observer received data: ${data}`);
    }
}

const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();

subject.addObserver(observer1);
subject.addObserver(observer2);

subject.notifyObservers('New data');

订阅-发布模式（Publish-Subscribe Pattern）

定义

订阅-发布模式是一种更加解耦的设计模式，其中消息的发布者（发布者）和消息的接收者（订阅者）之间没有直接的依赖关系。发布者发布消息到消息总线（或事件系统），而订阅者从消息总线中订阅感兴趣的消息。消息总线负责管理消息的发布和订阅。

实现

发布者（Publisher） : 发送消息或事件，但不关心具体的订阅者。
订阅者（Subscriber） : 注册对特定消息类型的兴趣，并在消息到达时处理这些消息。
消息总线（Message Bus） : 负责管理发布和订阅的逻辑，确保消息能正确地发送到订阅者。

适用场景

解耦 : 当系统中的不同组件需要松散耦合，即使它们之间没有直接的联系，例如，用户界面和后台服务之间的通信。
消息广播 : 当一个事件需要广播给多个不相关的组件时，例如，应用程序中的全局通知系统。

示例

class PubSub {
    constructor() {
        this.subscribers = {};
    }

    subscribe(event, callback) {
        if (!this.subscribers[event]) {
            this.subscribers[event] = [];
        }
        this.subscribers[event].push(callback);
    }

    publish(event, data) {
        if (this.subscribers[event]) {
            this.subscribers[event].forEach(callback => callback(data));
        }
    }
}

const pubSub = new PubSub();

pubSub.subscribe('event1', (data) => {
    console.log(`Subscriber 1 received data: ${data}`);
});

pubSub.subscribe('event1', (data) => {
    console.log(`Subscriber 2 received data: ${data}`);
});

pubSub.publish('event1', 'Event data');