监听器Observer和订阅者Watcher
实现简单版Vue的过程，主要实现{{}}、v-model和事件指令的功能
主要分为三个部分
1.数据监听器Observer，能够对数据对象的所有属性进行监听;
实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性
2.Watcher将数据监听器和指令解析器连接起来，数据的属性变动时，执行指令绑定的相应回调函数，
1.如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。
3.指令解析器Compile，
对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者Watcher
因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。=
监听器Observer
Observer是一个数据监听器，核心是前面一直谈论的Object.defineProperty(),
对所有属性监听，利用递归来遍历所有的属性值，对其进行Object.defineProperty()操作：
function definReactive(data,key,val){
observers(val);//递归所有子属性
Object.defineProperty(data,key,{
enumerable:true,
configurable:true,
get:function(){
console.log(‘属性‘+key+‘执行get‘);
return val;
},
set:function(newVal){
val = newVal;
console.log(‘属性：‘+key+‘以及被监听，现在值为：‘+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执行get
//属性：name以及被监听，现在值为：vue书籍
//属性：book2以及被监听，现在值为：没有书
接下来创建一个收集所有订阅者的订阅器Dep,阅器Dep主要负责收集订阅者，然后再属性变化的时候执行对应订阅者的更新函数,
再改写一下订阅器Observer，创建一个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+‘执行get‘);
return val;
},
set:function(newVal){
if(val === newVal){
return;
}
val = newVal;
dep.notify();//如果数据变化，通知所有订阅者
console.log(‘属性：‘+key+‘以及被监听，现在值为：‘+newVal.toString());
}
})
}
}
function observers(data){
if(!data || typeof data!=‘object‘){
return;
}
return new Observe(data);
}
/**Dep:创建一个可以容纳订阅者的消息订阅器
* **/
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里面,这是为了让Watcher初始化进行触发，
因此要判断是不是需要添加订阅者，后面解释。在set里面，如果数据变化，就会通知所有的订阅者，订阅者就会去执行对应的更新的函数
以上，一个完整的订阅器完成。订阅者Watcher
Watcher在初始化的时候要将自己添加进订阅者Dep中，如何做到：
已经知道监听器Observer是在get函数执行了添加订阅者Wather的操作的，
所以我们只要在订阅者Watcher初始化的时候触发对应的get函数，去执行添加订阅者操作即可，
那要如何触发get的函数:
只要获取对应的属性值就可以触发了，核心原因就是因为我们使用了Object.defineProperty()进行数据监听。
注意：
我们只要在订阅者Watcher初始化的时候才需要添加订阅者，所以需要做一个判断操作，
因此可以在订阅器上做一下手脚：在Dep.target上缓存下订阅者，添加成功后再将其去掉就可以了。
创建一个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];//强制执行监听器observer里的Object.defineProperty()里的get函数
Dep.target = null;//释放自己
return value;
}
}再调整下observer.js的defineReactive函数里的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+‘执行get‘);
return val;
},
set:function(newVal){
if(val === newVal){
return;
}
val = newVal;
dep.notify();//如果数据变化，通知所有订阅者
console.log(‘属性：‘+key+‘以及被监听，现在值为：‘+newVal.toString());
}
})
}
//Dep加个target属性
function Dep(){
this.subs = [];
this.target = null;
}简单版的Watcher设计好了，
只要将Observer和Watcher关联起来，就可以实现一个简单的双向绑定数据了。
这里没有还没有设计解析器Compile，所以对于模板数据我们都进行写死处理：
模板有个节点，id为name,双向数据绑定的变量name，这里大框号暂时没有用：
<body>
<h1 id="name">{{name}}</h1>
</body>
selVue.js 关联Observer和Watcher
function SelfVue(data,el,exp){
this.data = data;
observers(data);
el.innerHTML = this.data[exp];//初始化模板数据的值
new Watcher(this,exp,function(value){
el.innerHTML = value;
});
return this;
}页面上实现双向数据绑定：
<h1 id="name">{{name}}</h1>
<script src="js/observer.js"></script>
<script src="js/watcher.js"></script>
<script src="js/selfVue.js"></script>
<script>
var ele = document.querySelector(‘#name‘);
var self_Vue = new SelfVue({
name:‘第一次显示数据‘
},ele,‘name‘);
window.setTimeout(function(){
console.log(‘值变了‘);
self_Vue.data.name = ‘重新赋值了‘;
},2000);
</script>打开页面，可以看到页面刚开始显示了是“第一次显示数据”，过了2s后就变成“重新赋值了”了。到这里，完成了一部分
注意：赋值的时候是 self_Vue.data.name = ‘重新赋值了‘，但是希望是 self_Vue.name = ‘重新赋值了‘，
需要在new SelVue的时候做个代理，让访问self_Vue的属性代理为访问self_Vue.data的属性，
实现原理还是使用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];//初始化模板数据的值
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 = ‘重新赋值了‘的形式来进行改变模板数据。至此监听器Observer和订阅者Watcher功能基本完成，后面再加上指令解析器compile的功能！
系列文章的目录:
Vue双向绑定的实现原理系列（一）：Object.defineproperty
Vue双向绑定的实现原理系列（二）：设计模式
Vue双向绑定的实现原理系列（三）：监听器Observer和订阅者Watcher
Vue双向绑定的实现原理系列（四）：补充指令解析器compile
原文地址：https://www.cnblogs.com/baimeishaoxia/p/12034577.html
时间： 2024-08-28 00:01:06