1.什么是观察者模式？
1.1 23种设计模式之一。最常见的模式。
1.2 是套路，解决一类问题的最优解
1.3 定义了一种一对多的依赖关系。让多个观察者对象同时监听某一个目标对象，当这个目标对象的状态发生变化时，会通知所有的观察者
1.4 详细点：
观察者：他是一个函数（做事）
事件:一个标志符
当这个事件发生时，观察者会产生相应的动作。一个事件有多个观察者，当这个事件发生时，多个观察都会执行
1.5 总结：
观察者就是一群舔狗，监听女神的一切举动，如看见女神渴了，观察者们就争相给他买水喝
2.抛出问题：有多个函数如何保证依次执行？
有多个函数（观察者），如何依次执行 function f1 () { console.log('f1') } function f2 () { console.log('f2') } function f3 () { console.log('f3') } var arr = [f1,f2,f3] //将他们放到一个数组中，通过数组去依次调用 arr.foreach(item => { item() //每个item相当于数组中的f1、f2然后加（）调用函数。 }) 同理： arr.push(function f4 (){console.log('f4')}) //往数组里面加函数
2-1 总结：
将他们放入数组中通过数组去依次调用
2-2 需求复杂点：当某个特定的事件发生，执行多个函数？
// 定义观察者 function xiaowang (){ console.log('大哥起身，小王给大哥 拉凳子') } function xiaoC (){ console.log('大哥起身，小C给大哥 拉凳子') } function xiaoA (){ console.log('大哥去世，小A给大哥 抬棺') } function xiaoB (){ console.log('大哥抽烟，小B给大哥 点火') } //定义管家 观察者与动作（事件）之间的关系 这个最重要！！！ const guanjia = { 'qishen':[xiaowang,xiaoC], 'qushi':[xiaoA], 'chouyan':[xiaoB] ] //大哥起身 guanjia['qishen'].foreach(item=>item()) 这段代码是遍历起身这个动作，然后循环调用观察者函数。 //发布事件，通过相应的观察者去执行 封装：function emit (eventname){ guanjia[eventname].foreach(item=>item()) } emit('qishen') //添加观察者封装 function on （eventname,callback）{ guanjia[eventname].push(callback) } on('qishen',function(){console.log('XXXXXX')})
2-3 面向对象的写法：
function Eventcenter(){ //构造函数 类比Vue this.guanjia = { 'qishen':[], 'baishou':[] } } //添加观察者（收小弟，有分工，只响应某个事件） Eventcenter.prototype.$on = function(eventname,listener){ if(this.guanjia[eventname]){ //先判断有没没有这个事件名，没有去注册，有就添加观察者 this.guanjia[eventname].push(listener) }else(this.guanjia[eventname]=[listener]) } //发布事件，通知相关的观察者去执行 Eventcenter.prototype.$emit = function(eventname){ //在原型上添加方法 if(this.guanjia[eventname]){ this.guanjia[eventname].foreach(item=>item()) } } function xiaowang (){comsole.log('XXXXX')} var app = new Eventcenter() //实例化 类比 VM app.$on('qishen',xiaowang) //添加小弟 app.$emit('qishen')发布事件通知相关的观察者去执行
2-4 总结：
2-4-1 观察者模式。是设计模式（解决一类问题的最优化解）的一种
2-4-2 发布订阅模式，不是特别严格的情况下，可以认为是指一个东西
2-4-3 观察者简单，发布订阅复杂点，有管家
2-4-4 接触过的观察者模式：
如事件监听addeventlistener
