摘要：什么是雙向數(shù)據(jù)綁定是一個(gè)框架，數(shù)據(jù)綁定簡(jiǎn)單來(lái)說(shuō)，就是當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，相應(yīng)的視圖會(huì)進(jìn)行更新，當(dāng)視圖更新時(shí)，數(shù)據(jù)也會(huì)跟著變化。

什么是雙向數(shù)據(jù)綁定？Vue是一個(gè)MVVM框架，數(shù)據(jù)綁定簡(jiǎn)單來(lái)說(shuō)，就是當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，相應(yīng)的視圖會(huì)進(jìn)行更新，當(dāng)視圖更新時(shí)，數(shù)據(jù)也會(huì)跟著變化。

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

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

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

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

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

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

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

    
    輸入的值為：

    

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

     

        
        輸入的值為：{{text}}
        

            
        
    
    

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

上述流程如圖所示：

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

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

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

        // 初始化操作，后面會(huì)說(shuō)
        // ...
    }

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

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

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

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

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

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

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

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

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

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

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

2）其次、實(shí)現(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]
        }
    }

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

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

     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()來(lái)監(jiān)聽屬性變動(dòng)，給屬性添加setter和getter

    function defineReactive (obj, key) {
        var _value= obj[key];
        // new一個(gè)主題對(duì)象
        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ā)出通知給主題對(duì)象
                dep.notify();
            },
            get () {
                // 如果訂閱者存在，添加到主題對(duì)象中
                if (Dep.target) {
                    dep.addSub(Dep.target);
                }
                return _value
            }
        })
    }

最后，我們需要再次修改構(gòu)造函數(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)實(shí)現(xiàn)了model => view的變化
當(dāng)輸入框值變化時(shí) => text也會(huì)變化 => 文本節(jié)點(diǎn)值變化

但如果細(xì)心的話，會(huì)發(fā)現(xiàn)還有一個(gè)問題，當(dāng)我們手動(dòng)改變text的值時(shí)（如在控制臺(tái)上輸入vm.$data.text = "xxx"），會(huì)發(fā)現(xiàn)，文本節(jié)點(diǎn)值已經(jīng)變化了，但是輸入框的值沒有變化。
如果給輸入框也添加一個(gè)Watcher，是不是也就和文本節(jié)點(diǎn)一樣實(shí)現(xiàn)了呢，但需要注意的是，輸入框、文本框、下拉框等，是通過value改變值的，而不是nodeValuefa，因?yàn)榭梢宰鋈缦滦薷模?br>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，基本上完工。

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