模式小记

发布订阅者模式（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);
                }
            });
        });
    }