1.发布订阅模式

前端比较重要的两个设计模式，发布订阅模式和观察者模式。来简单的学习下。

let fs = require('fs');
let person = {}

let event = {
   arr:[],
   on(fn){
      this.arr.push(fn);
     },
     emit(){
     this.arr.forEach(fn => fn());
     }
}
event.on(function() {
   console.log('执行了')
})
event.on(function() {
   console.log('执行了1')
})
fs.readFile('./1.txt', 'utf8', function (err, data) {
   person.name = data
   event.emit()
})
fs.readFile('./2.txt', 'utf8', function (err, data) {
   person.age = data
   event.emit() //发布
})

执行的结果:
在这里插入图片描述
发布和订阅要一起使用才能更清楚的看到效果，如果只有发布者或则只有订阅者，基本是没有多大意义的。其实发布和订阅没有很明显的直接关系，通过了中介（例如代码中的arr数组）来进行实现的。

2.观察者模式

观察者模式：有观察者就有被观察者。观察者需要放在被观察者中,被观察者的状态发生变化需要通知观察者，其内部也是基于发布订阅模式的。被观察者收集观察者，状态改变后要通知观察者。

//爸爸和妈妈 需要观察小宝宝的心理状态的变化
class Subject {
   //被观察者 小宝宝
   constructor(name){
      this.name = name;
      this.state = '开心';
      this.observers = [];
   }
   attach(observer){//Subject.prototype.attach
    this.observers.push(observer);
   }
   setState(newState){
      this.state = newState;
      this.observers.forEach(o => o.update(this))
   }
}
class Observer{
   //观察者 爸爸和妈妈
   constructor(name){
      this.name = name;
   }
   update(baby){
      console.log(`当前${this.name}被通知了，当前小宝宝的状态是${baby.state}`)
   }
}
let baby = new Subject('小宝宝');
let father = new Observer('爸爸');
let mother = new Observer('妈妈');
baby.attach(father);
baby.attach(mother);
baby.setState('被欺负了')