JS 观察者模式与发布订阅模式：深入浅出的对比解读

前端

2022-12-30 15:57:44

揭秘观察者模式和发布订阅模式：相似点、区别点和应用场景

在软件开发中，观察者模式和发布订阅模式是两个广为人知的用于管理对象间通信的设计模式。尽管它们有相似之处，但深入了解它们的细微差别对于有效地选择和实施至关重要。

观察者模式

定义：
观察者模式是一种设计模式，其中一个对象（称为 "主体"）负责维护一个观察者列表，这些观察者对主体的状态变化感兴趣。当主体状态发生改变时，它会通知所有注册的观察者。

应用场景：

事件处理
状态变化通知
数据绑定

优点：

代码复用：多个观察者可以订阅同一个主体，减少重复代码。
松耦合：主体和观察者之间没有直接依赖关系，提高代码维护性。
可扩展性：观察者可以动态添加或移除，提高应用程序的可扩展性。

缺点：

性能开销：主体状态发生变化时需要通知所有观察者，可能产生性能开销。
代码复杂性：管理主体和观察者之间的关系会增加代码复杂性。

发布订阅模式

定义：
发布订阅模式是一种设计模式，其中一个对象（称为 "发布者"）负责广播事件或消息。其他对象（称为 "订阅者"）可以订阅这些事件，并在事件发生时收到通知。

应用场景：

异步消息传递
事件处理
消息队列

优点：

松耦合：发布者和订阅者之间没有直接依赖关系，增强代码可维护性。
可扩展性：订阅者可以动态添加或移除，提高应用程序的可扩展性。
异步通信：允许对象之间进行异步通信，提高应用程序响应性。

缺点：

性能开销：发布者发布事件时需要通知所有订阅者，可能产生性能开销。
代码复杂性：管理发布者和订阅者之间的关系会增加代码复杂性。

观察者模式与发布订阅模式的区别

特征	观察者模式	发布订阅模式
责任分配	主体通知观察者	发布者发布事件，订阅者订阅事件
关系	一对多	多对多
订阅限制	观察者只能订阅一个主体	订阅者可以订阅多个发布者

选择合适的模式

在选择观察者模式或发布订阅模式时，考虑以下因素：

需要通知的事件类型： 观察者模式适用于同步状态变化，而发布订阅模式适用于异步事件。
对象之间的关系： 如果对象之间存在一对多关系，使用观察者模式；如果关系是多对多，使用发布订阅模式。
性能需求： 如果性能至关重要，请考虑观察者模式，因为它在通知观察者方面更加高效。

代码示例

观察者模式（JavaScript）：

// 主体类
class Subject {
  constructor() {
    this.observers = [];
  }

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

  removeObserver(observer) {
    const index = this.observers.indexOf(observer);
    if (index > -1) {
      this.observers.splice(index, 1);
    }
  }

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

// 观察者类
class Observer {
  constructor(subject) {
    this.subject = subject;
    subject.addObserver(this);
  }

  update() {
    console.log('Observer notified.');
  }
}

// 用法
const subject = new Subject();
const observer1 = new Observer(subject);
const observer2 = new Observer(subject);

subject.notifyObservers(); // 输出：Observer notified. Observer notified.

发布订阅模式（JavaScript）：

// 发布者类
class Publisher {
  constructor() {
    this.subscribers = [];
  }

  subscribe(subscriber) {
    this.subscribers.push(subscriber);
  }

  unsubscribe(subscriber) {
    const index = this.subscribers.indexOf(subscriber);
    if (index > -1) {
      this.subscribers.splice(index, 1);
    }
  }

  publish(event) {
    this.subscribers.forEach(subscriber => subscriber(event));
  }
}

// 订阅者函数
function subscriber1(event) {
  console.log(`Subscriber 1 received event: ${event}`);
}

function subscriber2(event) {
  console.log(`Subscriber 2 received event: ${event}`);
}

// 用法
const publisher = new Publisher();
publisher.subscribe(subscriber1);
publisher.subscribe(subscriber2);

publisher.publish('Hello world!'); // 输出：Subscriber 1 received event: Hello world! Subscriber 2 received event: Hello world!