js设计模式--观察者模式

概述

观察者模式用于在对象之间建立 一对多 的依赖关系，当一个对象状态发生变化时，它的所有依赖者（观察者）都会收到通知并自动更新。在js中，观察者模式通常由两个角色组成：主体（Subject）和观察者（Observer）。主体维护一个观察者列表，并提供添加、删除和通知观察者的方法。观察者则实现一个更新方法，用于接收主体的通知并执行相应的操作。

通过使用观察者模式，可以 实现松耦合 的代码架构，使得主体和观察者彼此独立，易于扩展和维护。在js中，观察者模式广泛应用于事件处理、异步编程和React等框架中。

使用场景

观察者模式通常用于对象间的一对多依赖关系，当一个对象的状态发生变化时，它会自动通知所有依赖它的对象，让它们进行相应的更新操作。这种模式适用于以下场景：

1. 当一个对象的改变需要同时改变其他对象的时候。
2. 当一个对象需要将自己的改变通知其他对象而又不希望与这些对象形成紧耦合关系的时候。
3. 当一个对象和其他对象之间存在很多依赖关系，而这些依赖关系又是可变的时候。

代码示例

实现观察者模式，可以通过以下步骤：

1. 创建一个被观察者（Subject）对象，它包含一个观察者（Observer）列表和一些方法来添加、删除和通知观察者。
2. 创建一个观察者对象，它包含一个 update 方法，用于接收来自被观察者的通知。
3. 创建一个被观察者实例和多个观察者实例，并将观察者添加到被观察者的观察者列表中。
4. 调用被观察者的 notifyObservers 方法，通知所有观察者更新。

这样，当被观察者的状态发生改变时，就会通知所有观察者，让它们能够及时更新自己的状态。

// 1.
class Subject {
  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(data) {
    for (const observer of this.observers) {
      observer.update(data);
    }
  }
}

// 2.
class Observer {
  constructor() {}
  update(data) {
    console.log(`Received data:${data}`);
  }
}

// 3.
const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();

subject.addObserver(observer1);
subject.addObserver(observer2);

// 4.
subject.notifyObservers(JSON.stringify({ message: 'Hello' }));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40