前端开发模式—观察者模式

观察者模式 (Observer Pattern)有时候也称为发布订阅模式，它的核心思想是定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。观察者模式是应用最广泛的开发模式之一，MVC 三层模式中的控制器就会观察视图并实时更新模型部分，Vue 中也有效地使用观察者模式来管理数据的响应式和视图的更新。

在很多文档中，观察者模式的主要角色被定义如下：

1. 主题接口（Subject）：也叫抽象目标类或目标接口类，它提供了一个用于保存观察者对象的聚集类和增加、删除观察者对象的方法，以及通知所有观察者的抽象方法。
2. 观察者接口（Observer）：它是一个抽象类或接口，它包含了一个更新自己的抽象方法，当接到具体主题的更改通知时被调用。
3. 具体主题（Concrete Subject）（被观察目标）：也叫具体目标类，它是被观察的目标，它实现抽象目标中的通知方法，当具体主题的内部状态发生改变时，通知所有注册过的观察者对象。
4. 具体观察者（Concrete Observer）：实现抽象观察者中定义的抽象方法，以便在得到目标的更改通知时更新自身的状态。

JS 中观察者模式的实现步骤如下：

1. 定义观察者类（订阅者）。

// 1. 定义观察者（订阅者）
class Observer {
  constructor(name) {
    this.name = name
  }
  // 观察者内部有一个更新方法，发布者通知观察者时，会调用观察者的更新方法
  update(value) {
    console.log(`${this.name}收到通知，通知内容为：${value}`)
  }
}

2. 定义被观察者类（主题、发布者、被观察对象）。

// 2. 定义被观察者（发布者、被观察对象）
// 发布者内部可以添加、删除、通知观察者
class Subject {
  constructor() {
    this.observers = [] // 维护观察者们的列表
  }
  // 添加观察者
  addObserver(observer) {
    this.observers.push(observer)
  }
  // 删除观察者
  removeObserver(observer) {
    this.observers = this.observers.filter(item => item !== observer)
  }
  // 通知观察者
  notifyObservers(value) {
    this.observers.forEach(observer => observer.update(value))
  }
}

3. 生成观察者实例对象和被观察者的实例对象。

// 创建观察者与发布者实例对象
const subject = new Subject()
const observer1 = new Observer('观察者1')
const observer2 = new Observer('观察者2')
const observer3 = new Observer('观察者3')

4. 将观察者实例对象们维护到被观察者实例对象中

// 将观察者维护到发布者中
subject.addObserver(observer1)
subject.addObserver(observer2)
subject.addObserver(observer3)

5. 被观察者状态改变时，通知观察者们；观察者们接收到通知后，进行相应的操作

subject.notifyObservers('明天房价上涨') // 观察者1收到通知，通知内容为：明天房价上涨  观察者2收到通知，通知内容为：明天房价上涨  观察者3收到通知，通知内容为：明天房价上涨

subject.removeObserver(observer2)
subject.notifyObservers('明天房价下跌') // 观察者1收到通知，通知内容为：明天房价下跌  观察者3收到通知，通知内容为：明天房价下跌

点击查看完整代码

/**
 * 观察者模式
 */

// 观察者模式
// 1. 定义观察者（订阅者）
// 2. 定义被观察者（发布者、被观察对象）
// 3. 将观察者维护到发布者中
// 4. 被观察者状态改变时，通知观察者
// 5. 观察者接收到通知后，进行相应的操作

// 1. 定义观察者（订阅者）
class Observer {
  constructor(name) {
    this.name = name
  }
  // 观察者内部有一个更新方法，发布者通知观察者时，会调用观察者的更新方法
  update(value) {
    console.log(`${this.name}收到通知，通知内容为：${value}`)
  }
}

// 2. 定义被观察者（发布者、被观察对象）
// 发布者内部可以添加、删除、通知观察者
class Subject {
  constructor() {
    this.observers = [] // 维护观察者列表
  }
  // 添加观察者
  addObserver(observer) {
    this.observers.push(observer)
  }
  // 删除观察者
  removeObserver(observer) {
    this.observers = this.observers.filter(item => item !== observer)
  }
  // 通知观察者
  notifyObservers(value) {
    this.observers.forEach(observer => observer.update(value))
  }
}

// 创建观察者与发布者实例对象
const subject = new Subject()
const observer1 = new Observer('观察者1')
const observer2 = new Observer('观察者2')
const observer3 = new Observer('观察者3')

// 4. 将观察者维护到发布者中
subject.addObserver(observer1)
subject.addObserver(observer2)
subject.addObserver(observer3)

// 5. 发布者下发通知，通知观察者
subject.notifyObservers('明天房价上涨') // 观察者1收到通知，通知内容为：明天房价上涨  观察者2收到通知，通知内容为：明天房价上涨  观察者3收到通知，通知内容为：明天房价上涨

subject.removeObserver(observer2)
subject.notifyObservers('明天房价下跌') // 观察者1收到通知，通知内容为：明天房价下跌  观察者3收到通知，通知内容为：明天房价下跌

观察者模式的优点

解耦：观察者模式使得主题和观察者之间的耦合度降低，主题不需要知道观察者的具体实现。
动态注册：观察者可以在运行时动态注册和注销，灵活性高。
广播通知：主题可以一次性通知所有观察者，简化了事件处理逻辑。

观察者模式的缺点

性能问题：如果观察者数量较多，通知所有观察者可能会导致性能下降。
内存泄漏：如果观察者没有正确注销，可能会导致内存泄漏。
复杂性：在某些情况下，观察者模式可能会导致系统复杂性增加，特别是在观察者和主题之间的依赖关系较多时。

应用场景

自定义事件系统
组件间通信（如 Vue 的 EventBus）
实时数据更新（如 Websocket 消息推送）