本文作者为 360 奇舞团前端开发工程师
在日常开发中，开发人员经常使用设计模式来解决软件设计中的问题。其中，观察者模式是一种常用的模式，它可以帮助开发人员更好地处理对象之间的通信。在 JavaScript 中，观察者模式的应用非常广泛，可以用于实现事件处理、数据绑定等功能。本文将介绍观察者模式的基本概念和实现方式。
观察者模式是一种行为型设计模式，它定义了一种一对多的依赖关系，让多个观察者对象（observer）同时监听某一个主题对象（subject）。当主题对象发生变化时，它会自动通知所有的观察者对象，使它们能够及时更新自己的状态。
观察者模式的优点在于它可以实现对象之间的松耦合，使得 Subject 和 Observer 可以独立地变化，而不会相互影响。它还可以提高代码的复用性和可维护性，使得代码更加清晰和易于理解。
该模式的视图如下所示：
EventObserver
│
├── subscribe: 添加新的可观察事件
│
├── unsubscribe: 移除可观察事件
|
└── broadcast: 执行带有绑定数据的所有事件首先要执行初始化EventObserver操作：
class EventObserver {
constructor() {
this.observers = [];
}
}从观察到的事件的空列表开始，并对每个新实例执行此操作。
要添加新事件，请执行以下操作：
subscribe(fn) {
this.observers.push(fn);
}获取观察到的事件列表并将新项目推送到数组中，事件列表是回调函数列表。
要测试这个方法，请执行以下操作：
const fn = () => {};
observer.subscribe(fn);
// Assert
assert.strictEqual(observer.observers.length, 1);要删除事件，请执行以下操作：
unsubscribe(fn) {
this.observers = this.observers.filter((subscriber) => subscriber !== fn);
}从列表中过滤掉与回调函数匹配的内容。如果没有匹配，回调将保留在列表中，过滤器返回一个新列表并重新分配观察者列表。
要测试这个方法，请执行以下操作：
const observer = new EventObserver();
const fn = () => {};
observer.subscribe(fn);
observer.unsubscribe(fn);
// Assert
assert.strictEqual(observer.observers.length, 0);回调必须与列表中的相同函数匹配，如果存在匹配项，取消订阅方法会将其从列表中删除。
要调用所有事件，请执行以下操作：
broadcast(data) {
this.observers.forEach((subscriber) => subscriber(data));
}这会遍历观察到的事件列表并执行所有回调。这样，你就可以获得与订阅事件必要的一对多关系，传入data是回调数据绑定的参数。
要测试这个方法，请执行以下操作：
const observer = new EventObserver();
let subscriberHasBeenCalled = false;
const fn = (data) => subscriberHasBeenCalled = data;
observer.subscribe(fn);
observer.broadcast(true);
// Assert
assert(subscriberHasBeenCalled);使用 let 而不是 const 这样我们就可以更改变量的值，这使得变量可变，然后允许我在回调内部重新分配它的值。let 在代码中会向其他程序员发送一个信号，表明该变量在某个时刻正在发生变化，这样就增加了 JavaScript 代码的可读性和清晰度。
好了，我们已经学会了一个简单的观者模式在 javaScript 中的实现。
这篇主要简单介绍了观察者模式和其简单的实现，设计模式还有很多种，例如：单例模式、策略模式、工厂模式等，我们的核心目的是要学习其思想，而不是死记硬背每一种模式的实现方式。只有理解了设计模式的思想，才能在各种业务场景中灵活地应用它们。
Copyright© 2013-2019