发布订阅者模式（Observer模式）
观察者模式，又称为发布订阅模式，它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己的状态。
在观察者模式中，并不是一个对象调用另一个对象的方法，而是一个对象订阅另一个对象的特定活动并在状态改变后获得通知。订阅者也称为观察者，而被观察的对象称为发布者或主题。当发生了一个重要的事件时，发布者将会通知（调用）所有订阅者并且可能经常以事件对象的形式传递消息。
思路：定义观察者接口，观察主体的行为状态。定义个一个依赖，该依赖具有一个订阅者队列，可以向队列中添加订阅者，以及当主题状态更改时通知订阅者更新状态。
事例
1、DOM事件，也是JavaScript和DOM之间实现的一种观察者模式。
btn.addEventListener("click", function() {
console.log("First click");
}, false);
// 可以有多个订阅者
btn.addEventListener("click", function() {
console.log("Second click");
}, false);
btn.click();
2、vue的双向数据绑定
//思想：在getter中收集依赖，在setter中运行依赖，更新数据
let data={price:6,nums:3,total:0},target=null//目标函数
//创建一个依赖，功能：保存对数据依赖的函数，运行依赖data中数性的函数
class Dep{
constructor(){
this.subscribers=[]//订阅者，订阅对data属性有关联的函数等
}
depend(){//收集关联函数，到订阅者
if(target&&!this.subscribers.includes(target)){
this.subscribers.push(target)//同一个目标，只能订阅一次
}
}
notify(){//数据变化，通知关联的依赖更新，也就是重新调用函数，运行
this.subscribers.forEach(sub=>sub())
}
}
//遍历属性，监控
Object.keys(data).forEach((key)=>{
let internalValue=data[key],dep=new Dep()
Object.defineProperty(data,key,{
//访问属性，会自动调用该函数
get(){
dep.depend()//订阅关联函数
return internalValue
},
//修改属性
set(val){
internalValue=val
dep.notify()//更新依赖
}
})
})
function watcher(fn){
target=fn
target()//target中如果访问或修改data中的属性，那么将会自动调用getter和setter
target=null
}
//调用函数，开启观察
watcher(()=>{
data.total=data.price*data.nums
})
3、promise原理，在then()中注册resolve或者reject需要执行的代码，当异步事件到来时，在resolve或者reject中执行注册的函数。
if (that.status === PENDING) { // 等待态
// 当异步调用resolve/rejected时 将onFulfilled/onRejected收集暂存到集合中
return newPromise = new Promise((resolve, reject) => {
that.onFulfilledCallbacks.push((value) => {
try {
let x = onFulfilled(value);
resolvePromise(newPromise, x, resolve, reject);
} catch(e) {
reject(e);
}
});
that.onRejectedCallbacks.push((reason) => {
try {
let x = onRejected(reason);
resolvePromise(newPromise, x, resolve, reject);
} catch(e) {
reject(e);
}
});
});
}
