观察者模式

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

观察者模式主要包含以下几个角色：

1. Subject（主题）： 被观察的对象，它包含了一系列观察者对象，并提供了添加、删除观察者以及通知观察者的方法。

2. Observer（观察者）： 定义一个更新接口，使得在主题发生变化时能够得到通知。

3. ConcreteSubject（具体主题）： 具体的被观察对象，负责将有关状态存入到相应的观察者对象，并在自身状态发生改变时通知观察者。

4. ConcreteObserver（具体观察者）： 具体的观察者对象，实现更新接口，以便在得到通知时更新自身的状态。

以下是一个简单的 JavaScript 示例：

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

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

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

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

// 观察者 (Observer)
class Observer {
  constructor(name) {
    this.name = name;
  }

  update() {
    console.log(`${this.name} received update from subject.`);
  }
}

// 具体主题 (ConcreteSubject)
class ConcreteSubject extends Subject {
  constructor() {
    super();
    this.state = 0;
  }

  getState() {
    return this.state;
  }

  setState(state) {
    this.state = state;
    this.notifyObservers();
  }
}

// 具体观察者 (ConcreteObserver)
class ConcreteObserver extends Observer {
  constructor(name) {
    super(name);
  }
}

// 客户端代码
const subject = new ConcreteSubject();

const observer1 = new ConcreteObserver('Observer 1');
const observer2 = new ConcreteObserver('Observer 2');

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

subject.setState(1);
// Output:
// Observer 1 received update from subject.
// Observer 2 received update from subject.

在这个例子中，Subject 是主题，Observer 是观察者。ConcreteSubject 是具体主题，ConcreteObserver 是具体观察者。当 ConcreteSubject 的状态发生改变时，它会通知所有注册的观察者，观察者们收到通知后执行自己的更新操作。这样，主题和观察者之间实现了解耦，使得系统更加灵活可扩展。