利用 JS 设计模式 - 观察者模式巧妙处理对象依赖

在软件开发的世界中，对象并不是孤立存在的。它们的互动和依赖性创造了复杂而动态的系统。想象一下一个现实世界的场景：当交通信号灯变为红色时，车辆停下来。当信号灯变为绿色时，车辆继续行驶。这个简单的场景完美展示了观察者模式的应用。

观察者模式是一种设计模式，它允许一个对象（称为主题）通知多个其他对象（称为观察者）有关其状态的变化。这种模式非常适合处理对象之间一对多的依赖关系，其中一个对象的更改需要触发对多个其他对象的响应。

在 JavaScript 中，我们可以使用观察者模式来创建可重用且可维护的代码。它为以下场景提供了一个优雅的解决方案：

• 动态更新： 当主题的状态发生变化时，观察者会自动获得通知，从而可以相应地更新其视图或行为。
• 松耦合： 观察者与主题之间是松散耦合的。这意味着主题可以独立于观察者进行更改，而观察者也可以自由地订阅或取消订阅主题。
• 代码可重用性： 观察者模式允许我们创建可重用的组件，这些组件可以轻松地集成到不同的系统中。

在 JavaScript 中实现观察者模式非常简单。我们可以使用事件监听器或自定义发布-订阅机制。以下是一个使用事件监听器的简单示例：

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

  // 订阅主题
  subscribe(observer) {
    this.observers.push(observer);
  }

  // 取消订阅主题
  unsubscribe(observer) {
    const index = this.observers.indexOf(observer);
    if (index !== -1) {
      this.observers.splice(index, 1);
    }
  }

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

// 观察者类
class Observer {
  constructor(subject) {
    subject.subscribe(this.update);
  }

  // 观察者更新方法
  update(data) {
    console.log(`Received update: ${data}`);
  }
}

// 创建主题
const subject = new Subject();

// 创建观察者
const observer1 = new Observer(subject);
const observer2 = new Observer(subject);

// 主题状态发生变化
subject.notify('Hello, world!');

// 取消订阅观察者
subject.unsubscribe(observer2);

在上面的示例中，Subject 类允许观察者订阅和取消订阅。当 Subject 的状态发生变化时，它会通知所有订阅的观察者。