摘要：至此監(jiān)聽(tīng)器和訂閱者功能基本完成，后面再加上指令解析器的功能系列文章的目錄雙向綁定的實(shí)現(xiàn)原理系列一雙向綁定的實(shí)現(xiàn)原理系列二設(shè)計(jì)模式雙向綁定的實(shí)現(xiàn)原理系列三監(jiān)聽(tīng)器和訂閱者雙向綁定的實(shí)現(xiàn)原理系列四補(bǔ)充指令解析器

github源碼

 1.數(shù)據(jù)監(jiān)聽(tīng)器Observer，能夠?qū)?shù)據(jù)對(duì)象的所有屬性進(jìn)行監(jiān)聽(tīng);
    實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，首先要對(duì)數(shù)據(jù)進(jìn)行劫持監(jiān)聽(tīng)，所以我們需要設(shè)置一個(gè)監(jiān)聽(tīng)器Observer，用來(lái)監(jiān)聽(tīng)所有屬性
 
 2.Watcher將數(shù)據(jù)監(jiān)聽(tīng)器和指令解析器連接起來(lái)，數(shù)據(jù)的屬性變動(dòng)時(shí)，執(zhí)行指令綁定的相應(yīng)回調(diào)函數(shù)，
    1.如果屬性發(fā)上變化了，就需要告訴訂閱者Watcher看是否需要更新。
    
 3.指令解析器Compile，
    對(duì)每個(gè)節(jié)點(diǎn)元素進(jìn)行掃描和解析，將相關(guān)指令對(duì)應(yīng)初始化成一個(gè)訂閱者Watcher

 因?yàn)橛嗛喺呤怯泻芏鄠€(gè)，所以我們需要有一個(gè)消息訂閱器Dep來(lái)專門收集這些訂閱者，然后在監(jiān)聽(tīng)器Observer和訂閱者Watcher之間進(jìn)行統(tǒng)一管理的。=

監(jiān)聽(tīng)器Observer
Observer是一個(gè)數(shù)據(jù)監(jiān)聽(tīng)器，核心是前面一直談?wù)摰腛bject.defineProperty(),
對(duì)所有屬性監(jiān)聽(tīng)，利用遞歸來(lái)遍歷所有的屬性值，對(duì)其進(jìn)行Object.defineProperty()操作：

    function definReactive(data,key,val){
        observers(val);//遞歸所有子屬性
    
        Object.defineProperty(data,key,{
            enumerable:true,
            configurable:true,
            get:function(){
                console.log("屬性"+key+"執(zhí)行g(shù)et");
                return val;
            },
            set:function(newVal){
                val = newVal;
                console.log("屬性："+key+"以及被監(jiān)聽(tīng)，現(xiàn)在值為："+newVal.toString());
            }
        })
    }
    
    function observers(data){
        if(!data || typeof data!="object"){
            return;
        }
        Object.keys(data).forEach(function(key){
            definReactive(data,key,data[key]);
        })
    }
    var library = {
        book1:{name:""},
        book2:""
    }
    observers(library);

    library.book1.name = "vue書(shū)籍";
    library.book2 = "沒(méi)有書(shū)";
    //屬性book1執(zhí)行g(shù)et
    //屬性：name以及被監(jiān)聽(tīng)，現(xiàn)在值為：vue書(shū)籍
    //屬性：book2以及被監(jiān)聽(tīng)，現(xiàn)在值為：沒(méi)有書(shū) 

接下來(lái)創(chuàng)建一個(gè)收集所有訂閱者的訂閱器Dep,閱器Dep主要負(fù)責(zé)收集訂閱者，然后再屬性變化的時(shí)候執(zhí)行對(duì)應(yīng)訂閱者的更新函數(shù),
再改寫(xiě)一下訂閱器Observer，創(chuàng)建一個(gè)observer.js：

    function Observe(data){
        this.data = data;
        this.walk(data);
    }
    Observe.prototype = {
        walk:function(data){
            var self = this;
            Object.keys(data).forEach(function(key) {
                self.defineReactive(data, key, data[key]);
            });
        },
        defineReactive:function(data,key,val){
            observers(val);//遞歸所有子屬性
            var dep = new Dep();

            Object.defineProperty(data,key,{
                enumerable:true,
                configurable:true,
                get:function(){
                    if(是否需要添加訂閱者){
                        dep.addSub(Watcher);//在這里添加一個(gè)訂閱者
                    }
                    console.log("屬性"+key+"執(zhí)行g(shù)et");
                    return val;
                },
                set:function(newVal){
                    if(val === newVal){
                        return;
                    }
                    val = newVal;
                    dep.notify();//如果數(shù)據(jù)變化，通知所有訂閱者
                    console.log("屬性："+key+"以及被監(jiān)聽(tīng)，現(xiàn)在值為："+newVal.toString());
                }
            })
        }
    }
    function observers(data){
        if(!data || typeof data!="object"){
            return;
        }
        return new Observe(data);
    }
       

    /**Dep:創(chuàng)建一個(gè)可以容納訂閱者的消息訂閱器
     * **/

    function Dep(){
        this.subs = [];
    }
    Dep.prototype = {
        addSub:function(sub){//添加訂閱者
            this.subs.push(sub);
        },
        notify:function(){//通知訂閱者
            this.subs.forEach(function(sub){
                sub.update();
            })
        }
    }
    
    可以看出，訂閱器Dep,添加一個(gè)訂閱者是在Object.defineProperty()的get里面,這是為了讓W(xué)atcher初始化進(jìn)行觸發(fā)，
    因此要判斷是不是需要添加訂閱者，后面解釋。在set里面，如果數(shù)據(jù)變化，就會(huì)通知所有的訂閱者，訂閱者就會(huì)去執(zhí)行對(duì)應(yīng)的更新的函數(shù)
    以上，一個(gè)完整的訂閱器完成。

訂閱者Watcher
Watcher在初始化的時(shí)候要將自己添加進(jìn)訂閱者Dep中，如何做到：
已經(jīng)知道監(jiān)聽(tīng)器Observer是在get函數(shù)執(zhí)行了添加訂閱者Wather的操作的，
所以我們只要在訂閱者Watcher初始化的時(shí)候觸發(fā)對(duì)應(yīng)的get函數(shù)，去執(zhí)行添加訂閱者操作即可，
那要如何觸發(fā)get的函數(shù):
只要獲取對(duì)應(yīng)的屬性值就可以觸發(fā)了，核心原因就是因?yàn)槲覀兪褂昧薕bject.defineProperty()進(jìn)行數(shù)據(jù)監(jiān)聽(tīng)。
注意：
我們只要在訂閱者Watcher初始化的時(shí)候才需要添加訂閱者，所以需要做一個(gè)判斷操作，
因此可以在訂閱器上做一下手腳：在Dep.target上緩存下訂閱者，添加成功后再將其去掉就可以了。
創(chuàng)建一個(gè)watcher.js

    function Watcher(vm,exp,cb){
        this.cb = cb;
        this.vm = vm;
        this.exp = exp;
        this.value = this.get();//將自己添加到訂閱器的操作
    }
    Watcher.prototype = {
        update:function () {
            this.run();
        },
        run:function () {
            var value = this.vm.data[this.exp];
            var oldVal = this.value;
            if(value != oldVal){
                this.value = value;
                this.cb.call(this.vm,value,oldVal);
            }
        },
        get:function () {
            Dep.target = this;//緩存自己
            var value = this.vm.data[this.exp];//強(qiáng)制執(zhí)行監(jiān)聽(tīng)器observer里的Object.defineProperty()里的get函數(shù)
            Dep.target = null;//釋放自己
            return value;
        }
    }

再調(diào)整下observer.js的defineReactive函數(shù)里的get操作：

    defineReactive:function(data,key,val){
        observers(val);//遞歸所有子屬性
        var dep = new Dep();

        Object.defineProperty(data,key,{
            enumerable:true,
            configurable:true,
            get:function(){
                if(Dep.target){
                    dep.addSub(Dep.target);//在這里添加一個(gè)訂閱者
                }
                console.log("屬性"+key+"執(zhí)行g(shù)et");
                return val;
            },
            set:function(newVal){
                if(val === newVal){
                    return;
                }
                val = newVal;
                dep.notify();//如果數(shù)據(jù)變化，通知所有訂閱者
                console.log("屬性："+key+"以及被監(jiān)聽(tīng)，現(xiàn)在值為："+newVal.toString());
            }
        })
    }
    //Dep加個(gè)target屬性
    function Dep(){
        this.subs = [];
        this.target = null;
    }

簡(jiǎn)單版的Watcher設(shè)計(jì)好了，
只要將Observer和Watcher關(guān)聯(lián)起來(lái)，就可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的雙向綁定數(shù)據(jù)了。
這里沒(méi)有還沒(méi)有設(shè)計(jì)解析器Compile，所以對(duì)于模板數(shù)據(jù)我們都進(jìn)行寫(xiě)死處理：
模板有個(gè)節(jié)點(diǎn)，id為name,雙向數(shù)據(jù)綁定的變量name，這里大框號(hào)暫時(shí)沒(méi)有用：

 
    
{{name}}
 

selVue.js 關(guān)聯(lián)Observer和Watcher

    function SelfVue(data,el,exp){
        this.data = data;
        observers(data);
        el.innerHTML = this.data[exp];//初始化模板數(shù)據(jù)的值
        
        new Watcher(this,exp,function(value){
            el.innerHTML = value;
        });
        return this;
    }

頁(yè)面上實(shí)現(xiàn)雙向數(shù)據(jù)綁定：

{{name}}
    
    
    
    

打開(kāi)頁(yè)面，可以看到頁(yè)面剛開(kāi)始顯示了是“第一次顯示數(shù)據(jù)”，過(guò)了2s后就變成“重新賦值了”了。到這里，完成了一部分

注意：賦值的時(shí)候是 self_Vue.data.name = "重新賦值了"，但是希望是 self_Vue.name = "重新賦值了"，
需要在new SelVue的時(shí)候做個(gè)代理，讓訪問(wèn)self_Vue的屬性代理為訪問(wèn)self_Vue.data的屬性，
實(shí)現(xiàn)原理還是使用Object.defineProperty()對(duì)屬性再包一層，

修改selVue.js：

    function SelfVue(data,el,exp){
        var self = this;
        this.data = data;
    
        Object.keys(data).forEach(function (key) {
            self.proxyKeys(key);//綁定代理屬性
        });
        
        observers(data);
        el.innerHTML = this.data[exp];//初始化模板數(shù)據(jù)的值
        new Watcher(this,exp,function(value){
            el.innerHTML = value;
        });
        return this;
    }
    
    SelfVue.prototype = {
        proxyKeys:function(key){
            var self = this;
            Object.defineProperty(this,key,{
                enumerable:false,
                configurable:true,
                get:function proxyGetter(){
                    return self.data[key];
                },
                set:function proxySetter(newVal){
                    self.data[key] = newVal;
                }
            })
        }
    }

    //這下我們就可以直接通過(guò)self_Vue.name = "重新賦值了"的形式來(lái)進(jìn)行改變模板數(shù)據(jù)。

至此監(jiān)聽(tīng)器Observer和訂閱者Watcher功能基本完成，后面再加上指令解析器compile的功能！

Vue雙向綁定的實(shí)現(xiàn)原理系列（一）：Object.defineproperty
Vue雙向綁定的實(shí)現(xiàn)原理系列（二）：設(shè)計(jì)模式
Vue雙向綁定的實(shí)現(xiàn)原理系列（三）：監(jiān)聽(tīng)器Observer和訂閱者Watcher
Vue雙向綁定的實(shí)現(xiàn)原理系列（四）：補(bǔ)充指令解析器compile