Vue雙向綁定的實現(xiàn)原理系列（三）：監(jiān)聽器Observer和訂閱者Watcher

legendaryedu 發(fā)布于2019-08-01 18:33 / 1868人閱讀

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

監(jiān)聽器Observer和訂閱者Watcher 實現(xiàn)簡單版Vue的過程，主要實現(xiàn){{}}、v-model和事件指令的功能 主要分為三個部分

github源碼

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

 因為訂閱者是有很多個，所以我們需要有一個消息訂閱器Dep來專門收集這些訂閱者，然后在監(jiān)聽器Observer和訂閱者Watcher之間進行統(tǒng)一管理的。=

監(jiān)聽器Observer
Observer是一個數(shù)據(jù)監(jiān)聽器，核心是前面一直談?wù)摰腛bject.defineProperty(),
對所有屬性監(jiā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)聽，現(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書籍";
    library.book2 = "沒有書";
    //屬性book1執(zhí)行g(shù)et
    //屬性：name以及被監(jiān)聽，現(xiàn)在值為：vue書籍
    //屬性：book2以及被監(jiān)聽，現(xiàn)在值為：沒有書

接下來創(chuàng)建一個收集所有訂閱者的訂閱器Dep,閱器Dep主要負責(zé)收集訂閱者，然后再屬性變化的時候執(zhí)行對應(yīng)訂閱者的更新函數(shù),
再改寫一下訂閱器Observer，創(chuàng)建一個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);//在這里添加一個訂閱者
                    }
                    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)聽，現(xiàn)在值為："+newVal.toString());
                }
            })
        }
    }
    function observers(data){
        if(!data || typeof data!="object"){
            return;
        }
        return new Observe(data);
    }
       

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

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

訂閱者Watcher
Watcher在初始化的時候要將自己添加進訂閱者Dep中，如何做到：已經(jīng)知道監(jiān)聽器Observer是在get函數(shù)執(zhí)行了添加訂閱者Wather的操作的，
所以我們只要在訂閱者Watcher初始化的時候觸發(fā)對應(yīng)的get函數(shù)，去執(zhí)行添加訂閱者操作即可，
那要如何觸發(fā)get的函數(shù):
只要獲取對應(yīng)的屬性值就可以觸發(fā)了，核心原因就是因為我們使用了Object.defineProperty()進行數(shù)據(jù)監(jiān)聽。
注意：
我們只要在訂閱者Watcher初始化的時候才需要添加訂閱者，所以需要做一個判斷操作，
因此可以在訂閱器上做一下手腳：在Dep.target上緩存下訂閱者，添加成功后再將其去掉就可以了。
創(chuàng)建一個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];//強制執(zhí)行監(jiān)聽器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);//在這里添加一個訂閱者
                }
                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)聽，現(xiàn)在值為："+newVal.toString());
            }
        })
    }
    //Dep加個target屬性
    function Dep(){
        this.subs = [];
        this.target = null;
    }

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

 
    {{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;
    }

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

{{name}}

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

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

修改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;
                }
            })
        }
    }

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

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

系列文章的目錄:

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