本文共 1471 字，大约阅读时间需要 4 分钟。

观察者模式的理解

观察者模式（Observer Pattern）定义了对象间的一种一对多的依赖关系。当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知并自动更新。这是一种非常常见的设计模式，广泛应用于事件监听、数据绑定以及异步操作等场景。

发布-订阅模式

观察者模式的核心机制是发布-订阅模式。具体来说：

• 发布者（Subject）：维护一个状态，并能够通知所有订阅者。
• 订阅者（Observer）：通过订阅发布者，获得状态变化的通知。

一对多关系（1：n）

这一点很重要，意味着一个发布者可以被多个订阅者观察。当发布者的状态改变时，所有订阅者都会接收到更新通知。虽然n可以是1，但通常我们讨论的是多个订阅者的场景。

JS代码示例

为了更直观地理解观察者模式，我们来看一个简单的JS例子：

// 被观察者的类
class Subject {
  constructor() {
    this.state = 1;
    this.observers = [];
  }
  addObserver(observer) {
    this.observers.push(observer);
  }
  setState(state) {
    this.state = state;
    this.notifyAllObservers();
  }
  notifyAllObservers() {
    this.observers.forEach((observer) => {
      observer.update();
    });
  }
}
// 观察者的类
class Observer {
  constructor(name, subject) {
    this.name = name;
    this.subject = subject;
    this.subject.addObserver(this);
  }
  update() {
    console.log(`${this.name} update, state: ${this.subject.state}`);
  }
}
// 创建被观察者和观察者
const sub = new Subject();
const o1 = new Observer('Observer1', sub);
const o2 = new Observer('Observer2', sub);
const o3 = new Observer('Observer3', sub);
// 更改状态
sub.setState(5);

应用场景

观察者模式在软件开发中有广泛的应用，以下是一些典型场景：

事件绑定

所有的事件监听机制都可以看作是观察者模式的应用。例如，DOM事件监听：

document.addEventListener('click', function(event) {
  // 处理点击事件
});

这里，document是发布者，click事件是它的状态变化，订阅者是处理点击事件的函数。

Promise

Promise也采用了观察者模式。.then()和.catch()方法可以看作是订阅者，等待Promise的状态变化（resolved或rejected）进行相应的处理。

观察者模式通过解耦发布者和订阅者，使代码更灵活和可扩展。它的核心思想是：只关心自己感兴趣的事件，而不必知道所有可能的事件发生者。