01 js訂閱發布者模式(vue是怎么將數據綁定到組件的原理)

js 怎么理解js事件觀察者模式

觀察者模式主要應用于對象之間一對多的依賴關系，當一個對象發生改變時，多個對該對象有依賴的其他對象也會跟著做出相應改變，這就非常適合用觀察者模式來實現。使用觀察者模式可以根據需要增加或刪除對象，解決一對多對象間的耦合關系，使程序更易于擴展和維護。

基礎知識:

觀察者模式定義了對象間的一種一對多依賴關系，每當一個對象發生改變時，其相關依賴對象皆得到通知并被進行相應的改變。觀察者模式又叫做發布-訂閱模式。生活中有很多類似的關系，比如買粉絲買粉絲訂閱，多個讀者訂閱一個買粉絲買粉絲，一旦買粉絲有更新，多個讀者都會收到更新，而這種情況在應用程序中也非常常見，js綁定各種事件本質上就是觀察者模式的實現。

觀察者模式是一個非常有用的設計模式，它主要有兩個角色組成：

（1）目標對象：作為一對多關系中的一，可以用來管理觀察者的增加和刪除。

（2）觀察者對象：觀察目標對象，一旦目標發生改變則做出相應的反應。

vuejs源碼用了什么設計模式，具體點的

最簡單的訂閱者模式

// Observer

class Observer {

買粉絲nstructor (data) {

this.walk(data)

}

walk (data) {

// 遍歷

let keys = Object.keys(data)

for(let i = 0; i < keys.length; i++){

defineReactive(data, keys[i], data[keys[i]])

}

}

}

function defineReactive (data, key, val) {

observer(val)

// dep 為什么要在這里實例化, 就是為了實現, 對象每一層的 每一個key都有自己的一個訂閱實例, 比如 a.b 對應 dep1, a.c 對應dep2, 這里雖然都是let dep = new Dep()

// 但每次來到這個方法, dep都是獨立的, 會一直保留在內存. 這樣在每次調用set方法都能找到這個a.b對應的dep

// dep 這里會一直保存, 是因為閉包的關系, Object這個全局的函數, 引用了上層的作用域, 這個作用域包含了 dep, 除非Object = null, 或者退出瀏覽器, dep才會消失

//實例化之后, dep就有了被訂閱, 和發布消息的功能, dep不寫在這里也是可以的, 多定義一個全局函數, 每次obser的時候增加一個dep

let dep = new Dep()

Object.defineProperty(data, key, {

enumerable: true,

買粉絲nfigurable: true,

get: function () {

//每次new Watch('a.b'), 都會先執行get方法, 進而來到這里, 觸發 dep.depend(), 這個dep就是 a.b 對應的 訂閱,

dep.depend()

return val

},

set: function (newVal) {

if(val === newVal){

return

理解VUE2雙向數據綁定原理和實現

1.vue 雙向數據綁定是通過 數據劫持 結合 發布訂閱模式的方式來實現的， 也就是說數據和視圖同步，數據發生變化，視圖跟著變化，視圖變化，數據也隨之發生改變；

2.核心：關于VUE雙向數據綁定，其核心是 Object.defineProperty()方法；

3.介紹一下Object.defineProperty()方法

（1）Object.defineProperty(obj, prop, descriptor) ，這個語法內有三個參數，分別為 obj （要定義其上屬性的對象） prop （要定義或修改的屬性） descriptor （具體的改變方法）

（2）簡單地說，就是用這個方法來定義一個值。當調用時我們使用了它里面的get方法，當我們給這個屬性賦值時，又用到了它里面的set方法；

這樣我們就能實現js的雙向數據綁定，也對這個方法有初步的了解 ；

這個例子實現的效果是：隨著文本框輸入文字的變化，span中會同步顯示相同的文字內容；這樣就實現了 model => view 以及 view => model 的雙向綁定。

通過添加事件監聽keyup來觸發set方法，而set再修改了訪問器屬性的同時，也修改了dom樣式，改變了span標簽內的文本。

1.實現效果

先來看一下vue雙向數據綁定是如何進行的，以便我們確定好思考方向

2.任務拆分

拆分任務可以讓我們的思路更加清晰：

（1）將vue中的data中的內容綁定到輸入文本框和文本節點中

（2）當文本框的內容改變時，vue實例中的data也同時發生改變

（3）當data中的內容發生改變時，輸入框及文本節點的內容也發生變化

3.開始任務1——綁定內容

我們先了解一下 DocuemntFragment（碎片化文檔） 這個概念，你可以把他認為一個dom節點收容器，當你創造了10個節點，當每個節點都插入到文檔當中都會引發一次瀏覽器的回流，也就是說瀏覽器要回流10次，十分消耗資源。

而使用碎片化文檔，也就是說我把10個節點都先放入到一個容器當中，最后我再把容器直接插入到文檔就可以了！瀏覽器只回流了1次。

注意：還有一個很重要的特性是，如果使用appendChid方法將原dom樹中的節點添加到DocumentFragment中時，會刪除原來的節點。

舉個例子：

可以看到，我的app中有兩個子節點，一個元素節點，一個文本節點

但是，當我通過DocumentFragment 劫持數據一下后

注意：我的碎片化文檔是將子節點都劫持了過來，而我的id為app的div內已經沒有內容了。

同時要主要我while的判斷條件。判斷是否有子節點，因為我每次appendChild都把node中的第一個子節點劫持走了，node中就會少一個，直到沒有的時候，child也就變成了undefined，也就終止了循環。

來實現內容綁定

我們要考慮兩個問題，一個是如何綁定要input上，另一個是如何綁定要文本節點中。

這樣思路就來了，我們已經獲取到了div的所以子節點了，就在DocumentFragment里面，然后對每一個節點進行處理，看是不是有跟vm實例中有關聯的內容，如果有，修改這個節點的內容。然后重新添加入DocumentFragment中。

首先，我們寫一個處理每一個節點的函數，如果有input綁定v-model屬性或者有{ { xxx }}的文本節點出現，就進行內容替換，替換為vm實例中的data中的內容

然后，在向碎片化文檔中添加節點時，每個節點都處理一下。

創建Vue的實例化函數

效果圖如下：

我們成功將內容都綁定到了輸入框與文本節點上！

4、實現任務2——【view => model

對于此任務，我們從輸入框考慮，輸入框的問題，輸入框如何改變data。我們通過事件監聽器keyup，input等，來獲取到最新的value，然后通過Object.defineProperty將獲取的最新的value，賦值給實例vm的text，我們把vm實例中的data下的text通過Object.defineProperty設置為訪問器屬性，這樣給vm.text賦值，就觸發了set。set函數的作用一個是更新data中的text，另一個等到任務三再說。

首先實現一個響應式監聽屬性的函數。一旦有賦新值就發生變化

然后，實現一個觀察者，對于一個實例 每一個屬性值都進行觀察。

改寫編譯函數，注意由于改成了訪問器屬性，訪問的方法也產生變化，同時添加了事件監聽器，把實例的text值隨時更新

實例函數中，觀察data中的所有屬性值，注意增添了observe

最終我們改變input中的內容能改變data中的數據，單頁面卻沒有刷新

4、實現任務3——【model => view】

通過修改vm實例的屬性 該改變輸入框的內容 與 文本節點的內容。

很赞哦!（5）