Observer Pattern
观察者模式定义
观察者模式是软件设计模式的一种。在此种模式中，一个目标对象管理所有相依于它的观察者对象，并且在它本身的状态改变时主动发出通知。这通常透过呼叫各观察者所提供的方法来实现。此种模式通常被用来实时事件处理系统。 — 维基百科
观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。
我们可以使用日常生活中，期刊订阅的例子来形象地解释一下上面的概念。期刊订阅包含两个主要的角色：期刊出版方和订阅者，他们之间的关系如下：
期刊出版方 - 负责期刊的出版和发行工作
订阅者 - 只需执行订阅操作，新版的期刊发布后，就会主动收到通知，如果取消订阅，以后就不会再收到通知
在观察者模式中也有两个主要角色：Subject (主题) 和 Observer (观察者) 。它们分别对应例子中的期刊出版方和订阅者。
观察者模式优缺点
观察者模式的优点：
支持简单的广播通信，自动通知所有已经订阅过的对象
目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用
观察者模式的缺点：
如果一个被观察者对象有很多的直接和间接的观察者的话，将所有的观察者都通知到会花费很多时间
如果在观察者和观察目标之间有循环依赖的话，观察目标会触发它们之间进行循环调用，可能导致系统崩溃
观察者模式的应用
在前端领域，观察者模式被广泛地使用。最常见的例子就是为 DOM 对象添加事件监听，具体示例如下：
function clickHandler(event) {
console.log(‘用户已点击确认按钮!’);
}
document.getElementById(“btn”).addEventListener(‘click’, clickHandler);
上面代码中，我们通过 addEventListener API 监听 button 对象上的点击事件，当用户点击按钮时，会自动执行我们的 clickHandler 函数。
观察者模式实战
Subject 类定义：
class Subject {
constructor() {
this.observerCollection = [];
}
registerObserver(observer) {
this.observerCollection.push(observer);
}
unregisterObserver(observer) {
let index = this.observerCollection.indexOf(observer);
if(index >= 0) this.observerCollection.splice(index, 1);
}
notifyObservers() {
this.observerCollection.forEach((observer)=>observer.notify());
}}
Observer 类定义：
class Observer {
constructor(name) {
this.name = name;
}
notify() {
console.log(`${this.name} has been notified.`);
}}
使用示例：
let subject = new Subject(); // 创建主题对象
let observer1 = new Observer(‘semlinker’); // 创建观察者 A - ‘semlinker’
let observer2 = new Observer(‘lolo’); // 创建观察者 B - ‘lolo’
subject.registerObserver(observer1); // 注册观察者 A
subject.registerObserver(observer2); // 注册观察者 B
subject.notifyObservers(); // 通知观察者
subject.unregisterObserver(observer1); // 移除观察者 A
subject.notifyObservers(); // 验证是否成功移除
以上代码成功运行后控制台的输出结果：
semlinker has been notified. # 输出一次
2(unknown) lolo has been notified. # 输出两次
需要注意的是，在观察者模式中，通常情况下调用注册观察者后，会返回一个函数，用于移除监听，有兴趣的读者，可以自己尝试一下
