JavaScript 中如何实现观察者模式？

推荐答案

// 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!');

本题详细解读

观察者模式的概念

观察者模式是一种行为设计模式，它定义了对象之间的一对多依赖关系。当一个对象的状态发生改变时，所有依赖于它的对象都会收到通知并自动更新。这种模式通常用于实现事件处理系统。

实现步骤

1. 创建 Subject 类：

   • Subject 类维护一个观察者列表 (observers)。
   • addObserver 方法用于向列表中添加观察者。
   • removeObserver 方法用于从列表中移除观察者。
   • notify 方法用于通知所有观察者，并传递数据。

2. 创建 Observer 类：

   • Observer 类包含一个 update 方法，当 Subject 调用 notify 时，所有观察者的 update 方法都会被调用。

3. 使用示例：

   • 创建一个 Subject 实例和多个 Observer 实例。
   • 将观察者添加到 Subject 的观察者列表中。
   • 调用 Subject 的 notify 方法，所有观察者都会收到通知并执行相应的操作。

代码解析

• Subject 类负责管理观察者列表，并在状态变化时通知观察者。
• Observer 类负责定义观察者的行为，通常是一个 update 方法。
• 通过 addObserver 和 removeObserver 方法，可以动态地添加或移除观察者。
• notify 方法遍历观察者列表，并调用每个观察者的 update 方法，传递相关数据。

应用场景

观察者模式广泛应用于需要实现事件监听、数据绑定、发布-订阅系统等场景。它能够有效地解耦对象之间的关系，使得系统更加灵活和可扩展。