es6 语法学习 - 观察者模式

es6 语法学习 - 观察者模式

一、基本概念

观察者设计模式（Observer Pattern）是一种行为设计模式，用于定义一种一对多的依赖关系，使得当一个对象的状态发生改变时，所有依赖于它的对象都会收到通知并自动更新。

二、 优点

• 松耦合：观察者和被观察者之间的依赖关系是松散的。这使得更容易进行系统的扩展和维护。
• 动态添加和移除观察者：可以在运行时加入或移除观察者，提供了灵活的响应机制。
• 支持广播通信：可以有效地实现多个观察者对同一事件的响应。

三、缺点

• 内存泄漏风险：如果观察者没有被正确地移除，可能会导致内存泄漏。
• 多次通知：如果多个观察者依赖于同一个被观察者，可能会导致重复通知。
• 复杂度增加：在系统中引入观察者模式可能会增加整体的复杂度，尤其是当观察者数目较多时。

四、使用场景

• 事件处理机制：在事件驱动的编程中，观察者模式用于处理事件。
• 实时数据更新：在需要实时更新数据的应用中，观察者模式可以将数据源与数据消费者连接起来。

五、示例代码

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

  update(message) {
    console.log(`${this.name} received message: ${message}`);
  }
}

// 主题类（可被观察的对象）
class Subject {
  constructor() {
    this.observers = [];
  }

  // 注册观察者
  registerObserver(observer) {
    this.observers.push(observer);
  }

  // 移除观察者
  removeObserver(observer) {
    const index = this.observers.indexOf(observer);
    if (index > -1) {
      this.observers.splice(index, 1);
    }
  }

  // 通知所有观察者
  notifyObservers(message) {
    this.observers.forEach((observer) => observer.update(message));
  }

  // 模拟一些业务逻辑，这里可以是任何会改变状态的方法
  someBusinessLogic() {
    const message = 'The state has changed!';
    console.log('Business logic executed, notifying observers...');
    this.notifyObservers(message);
  }
}

// 使用观察者模式
const subject = new Subject();

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

subject.registerObserver(observer1);
subject.registerObserver(observer2);
// 不注册 observer3，以测试 removeObserver 和未注册的观察者不会收到通知
subject.someBusinessLogic(); // Observer 1 和 Observer 2 会收到通知
subject.registerObserver(observer3); // 现在注册 observer3
subject.someBusinessLogic(); // Observer 1, Observer 2, 和 Observer 3 都会收到通知
subject.removeObserver(observer2); // 移除 observer2
subject.someBusinessLogic(); // Observer 1 和 Observer 3 会收到通知，但 Observer 2 不会

在这个例子中，我们创建了主题对象和几个观察者对象，注册了它们，模拟了状态的变化，并观察了通知的发送。我们还测试了移除观察者的功能，以确保未注册或已移除的观察者不会收到通知。