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

1.发布订阅模式（发布者、订阅者、信号中心）

   一个简单的例子来通俗的理解这个模式的概念：假如你是学生的家长，你的孩子每次考完试你都想马上知道孩子的成绩是多少，每次考完学校的班级都会统计成绩，家长总是要去问学校的班级成绩出来没成绩出来没，现在有一种模式，只要家长在班级里面订阅了孩子的成绩，只要成绩出来了，就相当于出发了班级里的事件，班级的老师就马上通知订阅了成绩的家长，在这个过程中，家长就是订阅者，老师就是发布者。这个班级就是一个事件中心。

   概念：我们假定，存在一个”信号中心",某个任务执行完成，就向信号中心发布一个信号，其他任务可以向信号中心订阅这个信号，从而知道什么时候自己开始执行。这个就叫做”发布/订阅模式‘

使用场景1：vue的自定义事件

let vm = new Vue()
vm.$on('dataChange',()=>{
     console.log('dataChange1')
})    
vm.$on('dataChange',()=>{
    console.log('dataChange2')
})

vm.$emit('dataChange')

使用场景2：兄弟组件的通信过程

//eventBus.js
//事件中心
let eventHub = new Vue()

//ComponentA.vue
//发布者
addTodo:function(){
  //发布消息（事件）
  eventHub.$emit('add-todo',{text:this.newTodoText})
  this.newTodoText =''

}
//ComponentB.vue
//订阅者
created:function(){
  //订阅消息（事件）注册
  eventHub.$on('add-todo',this.addTodo)
}

   发布订阅的实现

  //发布订阅模式
    let vm =new Vue()
    // {'click':[fn1,,fn2],'change':[fn]}
      class EventEmitter{
        constructor(){
          this.subs = Object.create(null)
          console.log('this',this.subs)
        }
        //注册事件
        $on(eventType,handler){
          this.subs[eventType] = this.subs[eventType] || []
          this.subs[eventType].push(handler)
        }
        //触发事件
        $emit(eventType){
          if(this.subs[eventType]){
            this.subs[eventType].forEach(handler => {
              handler()
            });
          }
        }
      }

　　测试：

 let em = new EventEmitter()

      em.$on('click',()=>{

        console.log('click1')

      })

      em.$on('click',()=>{

        console.log('click2')

      })

      em.$emit('click')

结果：

 

2.观察者模式（发布者、订阅者）

　举个例子：

　　假设你正在找一份软件工程师的工作，对“XX公司”很感兴趣。所以你就联系了他们的HR，给了他你的联系电话。他保证如果有任何职位空缺都会通知你。这里还有几个候选             人也我你一样很感兴趣。所以职位空缺大家都会知道，如果你回应了他们的通知，他们就会联系你面试。

  

•  观察者-Watcher

            update():当事件发生的时候，具体要做的事情

• 目标（发布者）：Dep

           subs数组：存储所有的而观察者

          addSub():添加观察者

          notify():当事件发生，调用所欲的观察者的update()方法

• 没有事件中心

//发布者 -目标
      class Dep{
        constructor(){
          this.subs =[]
        }
        addSub(sub){
          if(sub && sub.update){
            this.subs.push(sub)
          }
        }
        notify(){
          this.subs.forEach(sub =>{
            sub.update()
          })
        }
      }
      //订阅者-观察者
      class Watcher{
        update(){
          console.log('update')
        }
      }

      //测试
      let dep =new Dep()
      let watcher = new Watcher()
      dep.addSub(watcher)
      dep.notify()

　　结果：

 

 总结：