>[success] 發布訂閱 和 觀察者 [參看關于發布訂閱 和觀察者我在其他專欄的總結鏈接](http://www.hmoore.net/cyyspring/more/1351742) >[info] ## 發布訂閱 ~~~ 1.發布訂閱模式的構成三部分，'訂閱者'、'發布者'、'信號中心' 2.假定 存在一個'信號中心'，某個任務執行完成，就向信號中心'發布'（publish）一個信號， 其他任務可以向信號中心'訂閱'（subscribe）這個信號，從而知道什么時候自己可以開始執行。 這就叫做'發布/訂閱模式'（publish-subscribe pattern） 3.簡單的理解'信號中心' 其實有兩個核心功能'注冊事件'，'觸發事件'。訂閱者通過在信號中心'注冊事件'， 發布者通過發布信號觸發信號中心的'觸發事件'。讓訂閱者接收到觸發信息 ~~~ >[danger] ##### vue 中對發布訂閱的應用 ~~~ 1.vue中自定義事件就是利用了'發布訂閱模式' // 訂閱中心 const vm = new Vue({}) // 注冊事件 vm.$on('dataChage', (msg) => { console.log(msg) // 測試數據 }) // 觸發事件 vm.$emit('dataChage', '測試數據') 2.下面案例把調用信號中心注冊事件的叫'訂閱者'，使用信號中心觸發事件叫'發布者' // eventBus.js // 事件中心 let eventHub = new Vue() // ComponentA.vue // 發布者 addTodu: function () { // 發布消息（事件） 觸發事件 eventHub.$emit('add-todo', { text: this.newTodoText }) this.newTodoText = '' } // ComponentB.vue // 訂閱者 created: function () { // 注冊事件 eventHub.$on('add-todo', this.addTodo) } ~~~ >[danger] ##### 模擬 Vue 自定義事件的實現 ~~~ // 事件中心 class EventEmitter { constructor() { // { 'click': [fn1, fn2], 'change': [fn] } 鍵為事件名稱 值為存儲事件處理函數的數組 this.subs = Object.create(null) } // 注冊事件，需要事件名和事件方法因此需要兩個參數 $on(eventType, handler) { this.subs[eventType] = this.subs[eventType] || [] this.subs[eventType].push(handler) } // 觸發事件，觸發事件是在注冊事件中標記的 // 因此第一個參數觸發事件名 第二個參數是傳遞的參數 $emit(eventType, ...params) { this.subs[eventType] && this.subs[eventType].forEach(handler => { handler(...params) }) } } let em = new EventEmitter() em.$on('click', (val) => { console.log('click1', val) }) em.$on('click', (val) => { console.log('click2', val) }) em.$emit('click', '測試') // 打印結果 click1 測試 click2 測試 ~~~ >[info] ## 觀察者 ~~~ 1.觀察者（訂閱者） - Watcher 1.1.update(): 當事件發生時，具體要做的事情 2.目標（發布者） - Dep 知道觀察者的存在 2.1.subs 數組： 存儲所有的觀察者 2.2.addSub(): 添加觀察者 2.3.notify(): 當事件發生，調用所有觀察者的 update() 方法 3.觀察者和發布訂閱的最大區別'沒有事件中心',觀察者模式是通過發布者進行進行記錄觀察者和調用觀察者 ~~~ >[danger] ##### 觀察者例子代碼 ~~~ // 發布者 class Dep { constructor() { this.subs = [] } // 記錄觀察者 addSub(sub) { if (sub && sub.update) { this.subs.push(sub) } } // 發布通知 notify() { this.subs.forEach(sub => { sub.update() }) } } // 觀察者具備updata 方法 // 訂閱者-觀察者 class Watcher { update() { console.log('update') } } // 測試 let dep = new Dep() let watcher = new Watcher() dep.addSub(watcher) dep.notify() ~~~ >[info] ## 二者的區別 ~~~ 1.觀察者模式是由具體目標調度，比如當事件觸發，Dep就會去調用觀察者方法， 所以觀察者模式的訂閱者與發布者之間存在依賴關系 2.發布/訂閱模式由統一調度中心調用，因此發布者和訂閱者不需要知道對方存在， 隔離兩者且減少兩者之間的關系 3.通過發布訂閱 和 觀察者 中二者對訂閱者的存儲結構來看，發布定訂閱由于大家共享一個事件中心 因此為了區分每個訂閱者想要訂閱的類型因此采用的是對象形式'{evnet:[....],evnet2:[....]}' 觀察者只是為自己的那一類訂閱者服務因此他的形式是數組'[]' 簡單的說，發布定訂閱是所有訂閱者的集合 并且利用key 進行分類，而觀察者是一類訂閱者，如果這類訂閱者不是此類觀察者，需要創建新的觀察 者對這類訂閱者進行訂閱 和 發布 ~~~