前端开发模式—观察者模式-编程知识

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

news/2025/3/16 15:39:32/文章来源:https://www.cnblogs.com/laozhenHome/p/18775064

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

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

主题接口（Subject）：也叫抽象目标类或目标接口类，它提供了一个用于保存观察者对象的聚集类和增加、删除观察者对象的方法，以及通知所有观察者的抽象方法。
观察者接口（Observer）：它是一个抽象类或接口，它包含了一个更新自己的抽象方法，当接到具体主题的更改通知时被调用。
具体主题（Concrete Subject）（被观察目标）：也叫具体目标类，它是被观察的目标，它实现抽象目标中的通知方法，当具体主题的内部状态发生改变时，通知所有注册过的观察者对象。
具体观察者（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收到通知，通知内容为：明天房价下跌