observer.js源码分析
Posted Lumbago~
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了observer.js源码分析相关的知识,希望对你有一定的参考价值。
observer 数据劫持,判断是否递归循环遍历所有层次的属性,然后都添加上geter,seter方法
只要值发生改变,seter就会监听当前发生改变的数据
function Observer(data) {
//在Observer实例上暂存data
this.data = data;
this.walk(data);
}
Observer.prototype = {
walk: function(data) {
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;
以上是关于observer.js源码分析的主要内容,如果未能解决你的问题,请参考以下文章
Android 插件化VirtualApp 源码分析 ( 目前的 API 现状 | 安装应用源码分析 | 安装按钮执行的操作 | 返回到 HomeActivity 执行的操作 )(代码片段
Android 逆向整体加固脱壳 ( DEX 优化流程分析 | DexPrepare.cpp 中 dvmOptimizeDexFile() 方法分析 | /bin/dexopt 源码分析 )(代码片段
Android 事件分发事件分发源码分析 ( Activity 中各层级的事件传递 | Activity -> PhoneWindow -> DecorView -> ViewGroup )(代码片段