极客笔记JavaScript观察者模式
观察者模式是一种常见的设计模式，用于实现对象之间的一对多依赖关系。在该模式中，当一个对象的状态发生改变时，所有依赖于它的对象都会得到通知并自动更新。这种发布-订阅的机制非常适用于现代 JavaScript 应用程序中的事件处理和数据更新等场景。
实现观察者模式
在 JavaScript 中实现观察者模式通常涉及两个主要概念：主体和观察者。主体负责维护观察者列表并通知观察者更新，而观察者则负责订阅主体的状态变化并在触发通知时执行相应的处理逻辑。
主体对象
主体对象通常包含以下方法：
addObserver(observer)：向观察者列表中添加一个观察者。removeObserver(observer)：从观察者列表中移除指定的观察者。notify()：遍历观察者列表，并依次调用每个观察者的更新方法。
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);
}
}
notify() {
this.observers.forEach(observer => {
observer.update();
});
}
}
观察者对象
观察者对象通常包含一个名为 update 的方法，用于处理主体状态改变时的逻辑。
class Observer {
constructor(name) {
this.name = name;
}
update() {
console.log(`${this.name} received notification and updated`);
}
}
示例代码
下面我们通过一个示例来演示如何使用观察者模式。假设我们有一个名为 Product 的主体对象，用于维护产品的价格，并有两个观察者 PriceLogger 和 PriceUpdater，分别用于记录价格变动和更新价格显示。
class Product extends Subject {
constructor() {
super();
this.price = 0;
}
setPrice(price) {
this.price = price;
this.notify();
}
}
class PriceLogger extends Observer {
constructor() {
super('PriceLogger');
}
update() {
console.log(`{this.name} - Price has been updated`);
}
}
class PriceUpdater extends Observer {
constructor() {
super('PriceUpdater');
}
update() {
console.log(`{this.name} - Price has been updated`);
}
}
// 创建主体对象和观察者对象
const product = new Product();
const logger = new PriceLogger();
const updater = new PriceUpdater();
// 添加观察者
product.addObserver(logger);
product.addObserver(updater);
// 改变产品价格，触发观察者更新
product.setPrice(50);
在上面的示例中，我们创建了一个 Product 主体对象和两个观察者对象 PriceLogger 和 PriceUpdater，然后添加观察者并更新产品价格。当产品价格改变时，观察者会分别接收到通知并执行相应的更新逻辑。
运行结果
当我们执行上面的示例代码时，将会得到以下输出：
PriceLogger - Price has been updated
PriceUpdater - Price has been updated
优缺点分析
观察者模式的优点在于：
- 降低了对象之间的耦合性，使得主体和观察者可以独立变化。
- 支持广播通信，适用于一对多的通知场景。
然而，观察者模式也存在一些缺点：
- 如果观察者过多或者逻辑复杂，容易导致性能问题。
- 观察者需要自行管理订阅和反订阅，存在一定的复杂性。
总的来说，观察者模式适用于以对象间一对多的依赖关系，并且希望支持松耦合和事件驱动的场景，但在实现时需要谨慎处理性能和代码维护的平衡。
结语
通过本文的介绍，我们了解了 JavaScript 中的观察者模式及其实现方式，并通过一个示例代码演示了如何应用该模式。