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()
            });
          }
        }
      }

　　測試：