進階：探究發佈訂閱模式，實現Vue底層響應式原理

什麼是發佈-訂閱模式？

發佈-訂閱模式又稱爲 觀察者模式，它定義 對象間的一種一對多的依賴關係，當一個對象的狀態發生改變時，全部依賴於它的對象都將獲得通知

直觀例子

• 微信公衆號

• 售樓處賣房

發佈-訂閱模式的做用

• 異步編程：訂閱模式能夠普遍應用於異步編程之中，這是一種替代傳遞迴調函數的方案

Ajax：

$.ajax('xxxx', function(data){
    initData(data)
    animate(data)
    // ....
})

這種寫法耦合性太高，對操做的增刪改查必須在內部進行

以發佈-訂閱模式的思想修改寫法：
$.ajax('xxxx',function(data){
    // 假設obj爲發佈訂閱模式中的發佈者，trigger爲發佈行爲
    obj.trigger('success', data)})
    // listen爲訂閱，當發佈了success，全部訂閱了success的行爲將執行
    obj.listen('success', function(data){
    // toDo
})複製代碼

經過發佈訂閱的形式改寫後，代碼耦合度大大減低，雖然在代碼量上沒有減小，但變得更加直觀

• 優化通知機制：訂閱模式能夠取代對象之間硬編碼的通知機制，一個對象不用顯式地調用另一個對象的某一個接口

以售樓爲實現一個通用發佈訂閱模式

需求分析：

• 定義發佈者
• 發佈者緩存列表（訂閱者列表）
• 發佈消息
• 通知訂閱者
• 對象動態添加職責
• 提升解耦

               

實現Vue底層響應式原理

Vue.Js採用數據劫持的方式結合發佈訂閱模式，經過 Object.defineProperty()來劫持各個屬性的 getter和 setter，在數據變更時發佈消息給各個訂閱者，觸發相應的監聽回調

                              

• 獲取數據

• 修改數據

總結

• 本章從實現一個通用的發佈訂閱者模式，並經過發佈訂閱模式實現一個簡易版本的Vue.js響應式原理
• 發佈訂閱模式在衆多設計模式中，最被前端所使用，經過這種設計模式，實現代碼的高度解耦，提升代碼的閱讀性，更加直觀