摘要：什么是雙向數(shù)據(jù)綁定是一個框架，數(shù)據(jù)綁定簡單來說，就是當數(shù)據(jù)發(fā)生變化時，相應的視圖會進行更新，當視圖更新時，數(shù)據(jù)也會跟著變化。

什么是雙向數(shù)據(jù)綁定？Vue是一個MVVM框架，數(shù)據(jù)綁定簡單來說，就是當數(shù)據(jù)發(fā)生變化時，相應的視圖會進行更新，當視圖更新時，數(shù)據(jù)也會跟著變化。

實現(xiàn)數(shù)據(jù)綁定的方式大致有以下幾種：

- 1、發(fā)布者-訂閱者模式（backbone.js）
- 2、臟值檢查（angular.js）
- 3、數(shù)據(jù)劫持（vue.js)

一般通過sub, pub的方式實現(xiàn)數(shù)據(jù)和視圖的綁定監(jiān)聽，更新數(shù)據(jù)方式通常做法是 vm.set("property", value)，有興趣可參考這里

我們更希望可以通過 vm.property = value 這種方式進行數(shù)據(jù)更新，同時自動更新視圖。

angular是通過臟值檢查方式來對比數(shù)據(jù)是否變化，來決定是否更新視圖，最常見的方式是通過setInterval()來監(jiān)測數(shù)據(jù)變化，當然，只會在某些指定事件觸發(fā)時下才進行臟值檢查。大致如下：

- DOM事件，譬如用戶輸入文本，點擊按鈕等。( ng-click )
- XHR響應事件 ( $http )
- 瀏覽器Location變更事件 ( $location )
- Timer事件( $timeout , $interval )
- 執(zhí)行 $digest() 或 $apply()

Vue.js則是通過數(shù)據(jù)劫持以及結合發(fā)布者-訂閱者來實現(xiàn)的，數(shù)據(jù)劫持是利用ES5的Object.defineProperty(obj, key, val)來劫持各個屬性的的setter以及getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，從而觸發(fā)相應的回調(diào)來更新視圖。

    
    輸入的值為：

    

上面的只是簡單的使用了Object.defineProperty(),并不是我們最終想要的效果，最終想要的效果如下：

     

        
        輸入的值為：{{text}}
        

            
        
    
    

實現(xiàn)思路：
1、輸入框以及文本節(jié)點和data中的數(shù)據(jù)進行綁定
2、輸入框內(nèi)容變化時，data中的對應數(shù)據(jù)同步變化，即 view => model
3、data中數(shù)據(jù)變化時，對應的文本節(jié)點內(nèi)容同步變化 即 model => view

上述流程如圖所示：

1、實現(xiàn)一個數(shù)據(jù)監(jiān)聽器Obverser，對data中的數(shù)據(jù)進行監(jiān)聽，若有變化，通知相應的訂閱者。
2、實現(xiàn)一個指令解析器Compile，對于每個元素上的指令進行解析，根據(jù)指令替換數(shù)據(jù)，更新視圖。
3、實現(xiàn)一個Watcher，用來連接Obverser和Compile, 并為每個屬性綁定相應的訂閱者，當數(shù)據(jù)發(fā)生變化時，執(zhí)行相應的回調(diào)函數(shù)，從而更新視圖。
4、構造函數(shù) （new MVue({})）

在初始化MVue實例時，對data中每個屬性劫持監(jiān)聽，同時進行模板編譯，指令解析，最后掛載到相應的DOM中。

    function MVue (options) {
        this.$el = options.el;
        this.$data = options.data;

        // 初始化操作，后面會說
        // ...
    }

1、實現(xiàn) view => model

vue進行編譯時，將掛載目標的所有子節(jié)點劫持到DocumentFragment中，經(jīng)過一份解析等處理后，再將DocumentFragment整體掛載到目標節(jié)點上。

    function nodeToFragment (node, vm) {
        var flag = document.createDocumentFragment();
        var child;
        while (child = node.firstChild) {
            compile(child, vm);
             if (child.firstChild) {
                var dom = nodeToFragment(child, vm);
                child.appendChild(dom);
            }
            flag.appendChild(child);
        }
        return flag;
    }

編譯過程圖

代碼如下：

    function compile (node, vm) {
        let reg = /{{(.*)}}/;
        // 元素節(jié)點
        if (node.nodeType === 1) {
            var attrs = node.attributes;
            for (let attr of attrs) {
                if (attr.nodeName === "v-model") {
                    // 獲取v-model指令綁定的data屬性
                    var name = attr.nodeValue;
                    // 綁定事件
                    node.addEventListener("input", function(e) {
                        vm.$data[name] = e.target.value;
                    })
                    // 初始化數(shù)據(jù)綁定
                    node.value = vm.$data[name];
                    // 移除v-model 屬性
                    node.removeAttribute("v-model")
                }
            }
        }
        
        // 文本節(jié)點
        if (node.nodeType === 3) {
            if (reg.test(node.nodeValue)) {
                var name = RegExp.$1 && (RegExp.$1.trim());
                // 綁定數(shù)據(jù)到文本節(jié)點中
                 node.nodeValue = node.nodeValue.replace(new RegExp("{{s*(" + name + ")s*}}"), vm.$data[name]);
            }
        }
    }

現(xiàn)在，我們修改下MVue構造函數(shù)，增加模板編譯，如下：

    function MVue (options) {
        this.$el = options.el;
        this.$data = options.data;

        // 模板編譯
        let elem = document.querySelector(this.$el);
        elem.appendChild(nodeToFragment(elem, this))
    }

那么，我們的view => model 已經(jīng)實現(xiàn)了，包括初始化綁定默認值，只要修改了input中的值，data中對應的值相應變化，并觸發(fā)了setter, 更新屬性值等（可以自行在set方法中打印看效果，或者在控制臺手動輸入vm.$data.text也會看到效果）。
2、實現(xiàn) model => view
上面可以看出，雖然我們實現(xiàn)了初始化數(shù)據(jù)綁定，以及輸入框變化時，data中text也會變化，但是文本節(jié)點仍然沒有任何變化，那么如果做到文本節(jié)點也同步變化呢，這里用的是發(fā)布者-訂閱者模式。

發(fā)布者-訂閱者模式又稱為觀察者模式，讓多個觀察者同時監(jiān)聽某個主題對象，當主題對象發(fā)生變化時，會通知所有的觀察者對象，即：發(fā)布者發(fā)出通知給主題對象 => 主題對象接收到通知后推送給所有訂閱者 => 訂閱者執(zhí)行相應的操作。

1）首先，定義一個主題對象，用來收集所有的訂閱者，并提供notify方法，用來調(diào)用訂閱者的update方法，從而執(zhí)行相應的操作。

    function Dep () {
        this.subs = [];
    }
    Dep.prototype = {
        addSub (sub) {
            this.subs.push(sub);
        },
        notify () {
            this.subs.forEach(sub => {
                // 執(zhí)行訂閱者的update方法
                sub.update();
            })
        }
    }

不難看出，當text屬性變化時，會觸發(fā)set方法，作為發(fā)布者，將數(shù)據(jù)更新消息通過主題對象發(fā)送給訂閱者, 那么該如何通知呢？
我們知道，在new一個vue時，會執(zhí)行兩個操作，一個事編譯模板，一個監(jiān)聽data數(shù)據(jù)，在監(jiān)聽data時，vue為data的每個屬性都生成一個主題對象Dep，而在編譯模板時，會為每個與數(shù)據(jù)綁定的節(jié)點生成一個Watcher,那么只要關聯(lián)了Dep與Watcher，是不是就實現(xiàn)了消息通知呢，關鍵邏輯是實現(xiàn)二者關聯(lián)。

已實現(xiàn)：輸入框變化 => 觸發(fā)相應的事件，修改值 => 觸發(fā)set方法
需要實現(xiàn)：發(fā)出通知dep.notify() => 觸發(fā)訂閱者update方法 => 更新視圖

我們修改下compile中文本節(jié)點內(nèi)容(只修改部分)

    // 文本節(jié)點
    if (node.nodeType === 3) {
        if (reg.test(node.nodeValue)) {
            var name = RegExp.$1 && (RegExp.$1.trim());
            // 綁定數(shù)據(jù)到文本節(jié)點中
           //  node.nodeValue = node.nodeValue.replace(new RegExp("{{s*(" + name + ")s*}}"), vm.$data[name]);
           new Watcher(vm, node, name);
        }
    }

2）其次、實現(xiàn)訂閱者Watcher

    function Watcher (vm, node, name) {
        // 全局的、唯一
        Dep.target = this;
        this.node = node;
        this.name = name;
        this.vm = vm;
        this.index = index;
        this.update();
        Dep.target = null;
    }

    Watcher.prototype = {
        update () {
            this.get();
            this.node.nodeValue = this.value;
        },
        get () {
            this.value = this.vm.$data[this.name]
        }
    }

首先，定義了一個全局的Dep.target，然后執(zhí)行了update方法，進而執(zhí)行了get方法，都去了this.vm的訪問器屬性， 從而將訂閱的消息保存在該屬性的主題對象中，并最終將Dep.target設置為空，全局變量，是watcher和dep之間的唯一橋梁，必須保證Dep.target只有一個值。

3）接著、實現(xiàn)一個obverser給data中每個屬性添加一個主題對象
遍歷data中的所有屬性,包括子屬性對象的屬性

     function obverser (obj) {
        Object.keys(obj).forEach(key => {
            if (obj.hasOwnProperty(key)) {
                if (obj[key].constructor === "Object") {
                    obverser(obj[key])
                }
                defineReactive(obj, key);
            }
        })
    }

使用Object.definePeoperty()來監(jiān)聽屬性變動，給屬性添加setter和getter

    function defineReactive (obj, key) {
        var _value= obj[key];
        // new一個主題對象
        var dep = new Dep();
        Object.defineProperty(obj, key, {
            enumerable: true,
            configurable: true,
            set (newVal) {
                if (_value= newVal) {
                    return;
                }
                _value= newVal;
                console.log(value)
                // 作為發(fā)布者發(fā)出通知給主題對象
                dep.notify();
            },
            get () {
                // 如果訂閱者存在，添加到主題對象中
                if (Dep.target) {
                    dep.addSub(Dep.target);
                }
                return _value
            }
        })
    }

最后，我們需要再次修改構造函數(shù)MVue

    function MVue (options) {
        this.$el = options.el;
        this.$data = options.data;

        // 數(shù)據(jù)監(jiān)聽
        obverser(this.$data);

        // 模板編譯
        let elem = document.querySelector(this.$el);
        elem.appendChild(nodeToFragment(elem, this))
    }

現(xiàn)在，已經(jīng)實現(xiàn)了model => view的變化
當輸入框值變化時 => text也會變化 => 文本節(jié)點值變化

但如果細心的話，會發(fā)現(xiàn)還有一個問題，當我們手動改變text的值時（如在控制臺上輸入vm.$data.text = "xxx"），會發(fā)現(xiàn)，文本節(jié)點值已經(jīng)變化了，但是輸入框的值沒有變化。
如果給輸入框也添加一個Watcher，是不是也就和文本節(jié)點一樣實現(xiàn)了呢，但需要注意的是，輸入框、文本框、下拉框等，是通過value改變值的，而不是nodeValuefa，因為可以做如下修改：
compile中：

    // 初始化數(shù)據(jù)綁定
    // node.value = vm.$data[name];
    new Watcher(vm, node, name);
    // 移除v-model 屬性
    node.removeAttribute("v-model")

wather中：

    Watcher.prototype = {
        update () {
            this.get();
            let _name;
            if (this.index === 1) {
                _name = this.name;
            } else {
                _name = this.value;
            }
            if (this.node.nodeName === "INPUT") {
                // 可以添加TEXTAREA、SELECT等
                this.node.value = this.value;
            } else {
               // this.node.nodeValue = this.value;
               this.node.nodeValue = this.node.nodeValue.replace(new RegExp("{?{?s*(" + _name + ")s*}?}?"), this.value);
            } 
            ++this.index;
        },
        get () {
            this.value = this.vm.$data[this.name]
        }
    }

OK，基本上完工。

獲取完整代碼，猛戳這里
個人博客也可以獲取完整代碼(https://jefferye.github.io)