观察者模式与订阅发布模式

订阅发布模式

• 举个例子：比如你订阅邮箱报纸，他会不定期给你发送，当你想看的时候，你打开邮箱就能看所有的报纸（按订阅顺序）。
  那么订阅报纸就是订阅，读报纸就是发布

• 一张图说明

  
  订阅发布

• 代码说明
  // 核心事件 中介

function Event(){
  this.events=[];
}
Event.prototype.on=function(fn){    //订阅
  this.events.push(fn);
}
Event.prototype.emit=function(data){    //发布
  this.events.forEach(function(fn){
    fn(data);
  })
}

• 应用

1. 处理异步（不好用）

//eg:  读完这两个txt才能执行
let schoolInfo = {},event=new Event;
event.on(function () {
  if (Object.keys(schoolInfo).length === 2){
    console.log(schoolInfo)
  }
});
fs.readFile('./name.txt','utf8',function (err,data) {
  schoolInfo['name'] = data;
  event.emit();
});
fs.readFile('./age.txt', 'utf8', function (err, data) {
  schoolInfo['age'] = data;
  event.emit();
});

2. vue子组件向父组件发射数据

观察者模式

• 举个例子：比如你想洗脸，又想沏茶，还要做饭，那么你需要烧一壶水，那么你就可以先准备好肥皂、茶叶、蔬菜，等着水烧开了就可以干这些事情了。
  那么洗脸、沏茶、做饭就是观察者，烧水就是被观察者。

• 一张图说明

  
  观察者与被观察者

• 代码说明

function Subject() { // 我家孩子的类
  this.observers = [];
  this.state = '开心';
}
Subject.prototype.attach = function (observer) {
  this.observers.push(observer);
}
Subject.prototype.setState = function (state) {
  this.state = state;
  this.notify();
}
Subject.prototype.notify = function () {
  this.observers.forEach(function (observer) {
    observer.update();
  })
}
function Observer(name,target){ // 观察者 一般会有一个方法
  this.name = name;
  this.target = target;
}
Observer.prototype.update = function () { // 更新方法
  console.log(`通知：${this.name} 当前的状态是 ${this.target.state}赶紧哄`)
  }
let subject = new Subject();
let observer1 = new Observer('丈夫', subject);
let observer2 = new Observer('媳妇', subject);
subject.attach(observer1); // 给目标添加观察者
subject.attach(observer2);
subject.setState('不开心');

孩子是被观察者，父母是观察者，被观察者状态变化，就通知观察者做某件事

• 应用

1. vue 数据变化通知视图更新