Javascript设计模式——观察者模式

前端

2024-01-08 17:00:50

观察者模式：解锁复杂应用程序中的优雅通信

概述

在纷繁复杂的软件世界中，应用程序经常面临着协调和通信的挑战。观察者模式闪亮登场，它是一种设计模式，允许对象（称为观察者）与另一个对象（称为可观察对象）建立密切联系，在后者状态发生变化时及时收到通知。

剖析观察者模式

观察者模式遵循发布/订阅机制。可观察对象扮演着发布者的角色，它维护着一个观察者列表。当其状态发生变化时，可观察对象便向所有观察者广播消息。观察者根据各自的需要对收到的通知做出回应。

观察者模式的魅力

观察者模式备受青睐，其优势不容忽视：

松散耦合： 观察者和可观察对象相互独立，可以自由修改和维护，不会影响彼此的行为。
可扩展性： 只需添加或移除观察者，即可轻松扩展观察者模式，应对变化莫测的需求。
可重用性： 观察者模式的通用性使其适用于多种场景，发挥其不可替代的作用。

JavaScript中的观察者模式

在JavaScript中，我们可以使用事件监听器轻松实现观察者模式。以下是一个简明扼要的示例：

// 可观察对象
class Observable {
  constructor() {
    this.observers = [];
  }

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

  removeObserver(observer) {
    const index = this.observers.indexOf(observer);
    if (index !== -1) {
      this.observers.splice(index, 1);
    }
  }

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

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

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

// 实例化可观察对象
const observable = new Observable();

// 实例化观察者
const observer1 = new Observer(observable);
const observer2 = new Observer(observable);

// 可观察对象状态发生变化
observable.notifyObservers();