function Observer(data) {
//在Observer實體上暫存data
this.data = data;
this.walk(data);
}
Observer.prototype = {
walk: function(data) {
//暫存this確保指向正確
var me = this;
//對data里所有的屬性名進行遍歷
Object.keys(data).forEach(function(key) {
me.convert(key, data[key]);
});
},
convert: function(key, val) {
//為每個屬性增加回應式
this.defineReactive(this.data, key, val);
},
defineReactive: function(data, key, val) {
//為data中所有層次的屬性都創建一個dep實體
var dep = new Dep();
//遞回遍歷data中所有層次的屬性
var childObj = observe(val);
//為原有屬性新增get和set方法(資料劫持)
Object.defineProperty(data, key, {
enumerable: true, // 可列舉
configurable: false, // 不能再define
get: function() {
//判斷當前Dep.target的watcher是否存在
if (Dep.target) {//當模版初始化的時候會賦值watcher實體到target上
//呼叫dep的depend方法
dep.depend();
}
return val;
},
set: function(newVal) {
if (newVal === val) {
return;
}
val = newVal;
// 新的值是object的話，進行監聽
childObj = observe(newVal);
// 通知訂閱者
dep.notify();
}
});
}
};
function observe(value, vm) {
//判斷value是否存在或者value的資料型別是否為object(遞回的終止條件)
if (!value || typeof value !== 'object') {
return;
}
return new Observer(value);
};
var uid = 0;
function Dep() {
//沒創建一個dep都會給這個dep增加一個獨立的標識
this.id = uid++;
this.subs = []; //watcher
}
Dep.prototype = {
addSub: function(sub) {
this.subs.push(sub);
},
//呼叫watcher實體的addDep方法
depend: function() {
//Dep.target此時是watcher的實體
//this此時是當前dep的實體
Dep.target.addDep(this);
},
removeSub: function(sub) {
var index = this.subs.indexOf(sub);
if (index != -1) {
this.subs.splice(index, 1);
}
},
//通知所有的watcher
notify: function() {
// beforeUpdate
//遍歷subs中所有的watcher的實體
this.subs.forEach(function(sub) {
// 每一個watcher的實體呼叫update方法
sub.update();
});
}
};
Dep.target = null;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/282563.html
標籤：其他
下一篇：ROS人機互動軟體免費分享