请解释观察者模式 (Observer) 的概念和作用。它与发布-订阅模式有什么区别和联系？

推荐答案

观察者模式（Observer Pattern）是一种行为设计模式，它定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象。当主题对象的状态发生变化时，所有依赖于它的观察者对象都会收到通知并自动更新。

观察者模式的主要作用是解耦，它将观察者和被观察者分离，使得它们可以独立变化。这种模式常用于事件处理系统、数据绑定、实时通知等场景。

本题详细解读

观察者模式的概念

观察者模式包含两个主要角色：

1. Subject（主题）：主题是被观察的对象，它维护一个观察者列表，并提供添加、删除和通知观察者的方法。当主题的状态发生变化时，它会通知所有注册的观察者。

2. Observer（观察者）：观察者是依赖于主题的对象，它定义了一个更新接口，当主题状态变化时，观察者会收到通知并执行相应的更新操作。

观察者模式的作用

1. 解耦：观察者模式将观察者和被观察者解耦，使得它们可以独立变化。主题不需要知道观察者的具体实现，只需要知道观察者实现了更新接口。

2. 实时通知：当主题状态发生变化时，所有观察者都会立即收到通知，从而实现实时更新。

3. 灵活性：可以动态地添加或删除观察者，系统具有很高的灵活性。

观察者模式与发布-订阅模式的区别和联系

1. 区别：

   • 观察者模式：观察者直接订阅主题，主题维护一个观察者列表，并在状态变化时直接通知观察者。
   • 发布-订阅模式：发布者和订阅者通过一个中介（通常是消息队列或事件总线）进行通信，发布者发布消息到中介，中介再将消息分发给订阅者。

2. 联系：

   • 两者都实现了对象间的松耦合，使得对象可以独立变化。
   • 发布-订阅模式可以看作是观察者模式的一种变体，它通过引入中介进一步解耦了发布者和订阅者。

示例代码

// www.javascriptcn.com code example
// 主题
class Subject {
  constructor() {
    this.observers = [];
  }

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

  removeObserver(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

  notify(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.notify('Hello, Observers!');

在这个示例中，Subject 是主题，Observer 是观察者。当主题调用 notify 方法时，所有观察者都会收到通知并执行 update 方法。