>[success] # 發布訂閱和觀察者模式 1. 發布訂閱模式的構成三部分，`訂閱者`、`發布者`、`信號中心` 2. 假定 存在一個`信號中心`，某個任務執行完成，就向信號中心`發布（publish）`一個信號，其他任務可以向信號中心`訂閱（subscribe）`這個信號，從而知道什么時候自己可以開始執行。這就叫做**發布/訂閱模式（publish-subscribe pattern）** 3. 簡單的理解**信號中心**其實有兩個核心功能**注冊事件，觸發事件**。**訂閱者通過在信號中心注冊事件，發布者通過發布信號觸發信號中心的觸發事件**。讓訂閱者接收到觸發信息 >[info] ## 觀察者 一般常見的定義名詞解釋 1. **觀察者（訂閱者） - Watcher** * `update()`: 當事件發生時，具體要做的事情 2. **目標（發布者） - Dep 知道觀察者的存在** * `subs` 數組： 存儲所有的觀察者 * `addSub()`: 添加觀察者 * `notify()`: 當事件發生，調用所有觀察者的 update() 方法 3. 觀察者和發布訂閱的最大區別**沒有事件中心**,觀察者模式是通過發布者進行**進行記錄觀察者和調用觀察者** ~~~ // 發布者 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() ~~~ >[danger] ##### 觀察者模式和發布/訂閱模式區別 1. **觀察者模式**是由具體目標調度，比如當事件觸發，Dep就會去調用觀察者方法,所以觀察者模式的訂閱者與發布者之間存在依賴關系 2. **發布/訂閱模式**由統一調度中心調用，因此發布者和訂閱者不需要知道對方存在，隔離兩者且減少兩者之間的關系 3. **通過發布訂閱 和 觀察者 中二者對訂閱者的存儲結構來看**，發布定訂閱由于大家共享一個事件中心因此為了區分每個訂閱者想要訂閱的類型因此采用的是對象形式`{evnet:[....],evnet2:[....]}` **觀察者**只是為自己的那一類訂閱者服務因此他的形式是數組`[]` 簡單的說，**發布定訂閱是所有訂閱者的集合并且利用key 進行分類**，而觀察者是一類訂閱者，如果這類訂閱者不是此類觀察者，需要創建新的觀察者對這類訂閱者進行訂閱 和 發布  >[info] ## 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 測試 ~~~