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 = dataevent.emit()
})
fs.readFile('./2.txt', 'utf8', function (err, data) {person.age = dataevent.emit() //发布
})

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

2.观察者模式

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

//爸爸和妈妈 需要观察小宝宝的心理状态的变化
class Subject {//被观察者 小宝宝constructor(name){this.name = name;this.state = '开心';this.observers = [];}attach(observer){//Subject.prototype.attachthis.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('被欺负了')