VUE 响应式原理

今天终于弄懂了 VUE的响应式原理， perfect

 

var QingdaoWeather = {
    Shinan : {
        weath : "sunny",
        temperature : "-5"
    },
    Shibei : {
        weath : "cloudy",
        temperature : "-7"
    },
    Licang : {
        weath : "rainy",
        temperature : "2"
    }
};

// take advantage of Object's access property
function defineReactive(obj, key, val) {
    Object.defineProperty(obj, key, {
        get : function () {
            console.log("read data");
            return val;
        },
        set : function (newVal) {
            console.log("set data");
            if(val === newVal){
                console.log("val === newVal");
                return;
            }
            val = newVal;
            subsriber.publish();
        }
    })
}

function observe(obj) {
    Object.keys(obj).forEach(function (key) {
        defineReactive(obj, key, obj[key]);
    })
}

observe(QingdaoWeather.Shinan);
observe(QingdaoWeather.Shibei);
observe(QingdaoWeather.Licang);


//publish-subscribe design patten
function Subscriber(topics) {
    this.subs = [];
    this._topics = topics;
}
Subscriber.prototype.subscribe = function (sub) {
    console.log("add sub");
    if(this.subs.indexOf(sub) < 0){
        this.subs.push(sub);
    }
};

Subscriber.prototype.unsubscribe = function(sub){
    console.log("unsubscribe");
    for(var i=0; i<this.subs.length; i++){
        if(sub === this.subs[i]){
            this.subs.splice(i, 1);
        }
    }
};

Subscriber.prototype.publish = function () {
    console.log("publish");
    var self = this;
    this.subs.forEach(function (cb) {
         cb(self._topics);
    });
};

function Shinan(weather) {
    console.log("Shinan People watch Qingdao weather: ");
    console.log("Shinan weather: " + weather.Shinan.weath);
    console.log("Shinan temperature: " + weather.Shinan.temperature);
    console.log("Shibei weather: " + weather.Shibei.weath);
    console.log("Shibei temperature: " + weather.Shibei.temperature);
    console.log("Licang weather: " + weather.Licang.weath);
    console.log("Licang temperature: " + weather.Licang.temperature);
}
function Shibei(weather) {
    console.log("Shibei People watch Qingdao weather: ");
    console.log("Shinan weather: " + weather.Shinan.weath);
    console.log("Shinan temperature: " + weather.Shinan.temperature);
    console.log("Shibei weather: " + weather.Shibei.weath);
    console.log("Shibei temperature: " + weather.Shibei.temperature);
    console.log("Licang weather: " + weather.Licang.weath);
    console.log("Licang temperature: " + weather.Licang.temperature);
}
function Licang(weather) {
    console.log("Licang People watch Qingdao weather: ");
    console.log("Shinan weather: " + weather.Shinan.weath);
    console.log("Shinan temperature: " + weather.Shinan.temperature);
    console.log("Shibei weather: " + weather.Shibei.weath);
    console.log("Shibei temperature: " + weather.Shibei.temperature);
    console.log("Licang weather: " + weather.Licang.weath);
    console.log("Licang temperature: " + weather.Licang.temperature);
}


var subsriber = new Subscriber(QingdaoWeather);

subsriber.subscribe(Shinan);
subsriber.subscribe(Shibei);
subsriber.subscribe(Licang);


QingdaoWeather.Shinan.weath = "partly sunny";

QingdaoWeather.Shinan.weath = "partly sunny";

 

例子有说服力