JS 设计模式—观察者模式，深入浅出话设计之妙！

前端

2024-01-22 03:35:05

观察者模式：提高代码质量的实用设计模式

何为观察者模式？

在软件开发中，设计模式是经过验证的解决方案，可以解决常见问题并提升代码质量。观察者模式就是 JavaScript 中一种常用的设计模式，它用于管理对象之间的依赖关系。

观察者模式如何运作？

观察者模式建立了一种一对多的关系，其中一个对象（被观察者）的状态变化会通知所有依赖它的对象（观察者）。这种机制实现了解耦和、低耦合以及可扩展性。

松散耦合： 观察者模式允许观察者与被观察者之间松散耦合，这意味着你可以轻松添加或删除观察者，而无需修改被观察者的代码。

低耦合： 观察者和被观察者相互独立，它们通过一个中间对象进行通信。

可扩展性： 观察者模式易于扩展。你可以轻松添加或删除观察者，而无需修改现有代码。

实现观察者模式

在 JavaScript 中，观察者模式可以按照以下步骤实现：

定义被观察者类： 包含状态和通知观察者方法。
定义观察者接口： 包含接收通知方法。
定义具体观察者类： 实现观察者接口并包含状态和行为。
实例化对象： 实例化被观察者和观察者对象。
添加观察者： 将观察者添加到被观察者的观察者列表中。
通知观察者： 当被观察者状态变化时，调用通知方法通知观察者。
更新观察者： 观察者接收通知并更新其状态或行为。

代码示例：

class Observable {
  constructor() {
    this.observers = [];
  }

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

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

class Observer {
  constructor(observable) {
    this.observable = observable;
    this.observable.addObserver(this);
  }

  update() {
    console.log("Observer notified!");
  }
}

const observable = new Observable();
const observer1 = new Observer(observable);
const observer2 = new Observer(observable);

observable.notifyObservers(); // 输出：Observer notified! Observer notified!