感谢百度前端技术学院带领我进步！谨以此文，记录我的学习过程~
动态数据绑定
Vue的初学者一定对于数据的动态绑定并不陌生，从最简单的需求开始一步步理解其实现原理，以及相关涉及到的知识点。
一
let app1 = new Observer({
name: 'youngwind',
age: 25
});
let app2 = new Observer({
university: 'bupt',
major: 'computer'
});
// 要实现的结果如下：
app1.data.name // 你访问了 name
app.data.age = 100; // 你设置了 age，新的值为100
app2.data.university // 你访问了 university
app2.data.major = 'science' // 你设置了 major，新的值为 science
实际上这需要用到ES5中的Object.prototype.defineProperty(参见文档)这个方法,简单叙述一下其参数：
<blockquote>
Object.defineProperty(obj,key,descriptor)：
- obj是待操作的对象；
- key是对象中待操作的属性名
- descriptor是一个配置对象，其中有：
configurable:配置总开关，默认为false，只有当其值为true时，才能动态的修改配置方法；
enumerable：枚举开关，默认为false，只有当其值为true时，该属性才能被枚举；
value：默认为undefined，即为本意obj[key] = value;
writable:默认为false，只有其值为true时，属性值才能被改写；
set/get：为属性提供getter和setter方法。
</blockquote>
为了实现第一个需求，我们需要为每一个属性均提供getter/setter：
function Observer(data) {
this.data = data;
this.makeObserver(data);
}
Observer.prototype.makeObserver = function(data){
if(typeof data !== "object"){
throw "please input object!"
}
let val;
//在对象中遍历，只能用for..in..但是这个方法会将原型链上的属性方法均会遍历
//因此用Object.hasOwnProperty进行过滤，只保留自身对象上的
for(let key in data){
if(data.hasOwnProperty(key)){
val = data[key];
//如果还是引用类型，则迭代直至所有的属性均绑定了get/set
if(typeof val === "object"){
new Observer(val)
}
this.convert(key,val);
}
}
}
Observer.prototype.convert = function(){
Object.defineProperty(this.data,key,{
enumerable:true,
configurable:true,
get:function () {
console.log("你访问了" + key);
return val;
},
set:function (newVal,func) {
console.log("你设置了" + key + "新的值为" + newVal);
if(newVal == val) return;
//如果值为对象，那么还得给对象里的属性绑定setter/getter
if(typeof newVal == "object"){
new Observer(newVal);
}
val = newVal;
return val;
}
})
}
二
绑定了getter,setter后，只是进行了数据获取/修改后的反馈，并没有涉及到触发数据改动后的回调。我们可以用事件触发的思路，也就是利用发布订阅（观察者）模式来进行函数回调。
简单来说：就是单独创建一个中间层，用以统一管理事件，该中间层给出两个接口，一个用于订阅事件，一个用于发布事件；
一个简单的实现：
//发布订阅模式，一个中间层（包括一个订阅接口，一个取消接口，一个发布接口）
function PubSub(){
this.handlers = {};
}
PubSub.prototype.on = function (eventType,handler) {
if (!(eventType in this.handlers)){
this.handlers[eventType] = [];
}
this.handlers[eventType].push(handler);
return this;
}
PubSub.prototype.emit = function (eventType) {
if(!this.handlers[eventType]) return;
var handlerArgs = [].slice.call(arguments,1); //刨除eventType，保留其他参数
for(var i = 0; i < this.handlers[eventType].length;i++){
this.handlers[eventType][i].apply(this,handlerArgs); //实际上等于func(..rest);
}
return this;
}
PubSub.prototype.off = function (eventType) {
if(!(eventType in this.handlers)) return;
delete this.handlers[eventType];
return this;
}
Observer.prototype.$watch = function(attr, callback){
this.eventBus.on(attr, callback);
};
第二个需求变为：
let app1 = new Observer({
name: 'youngwind',
age: 25
});
// 你需要实现 $watch 这个 API
app1.$watch('age', function(age) {
console.log(`我的年纪变了，现在已经是：${age}岁了`)
});
app1.data.age = 100; // 输出：'我的年纪变了，现在已经是100岁了'
此时，我们在第一个需求的基础上，利用观察者模式的思想添加中间层：
function Observer(data) {
this.data = data;
this.makeObserver(data);
this.eventBus = new PubSub();
}
//该方法就是给属性绑get/set
Observer.prototype.makeObserver = function (data) {
if(typeof data !== "object"){
throw "please input object!"
}
let val;
//在对象中遍历，只能用for..in..但是这个方法会将原型链上的属性方法均会遍历
//因此用Object.hasOwnProperty进行过滤，只保留自身对象上的
for(let key in data){
if(data.hasOwnProperty(key)){
val = data[key];
//如果还是引用类型，则迭代直至所有的属性均绑定了get/set
if(typeof val === "object"){
new Observer(val)
}
this.convert(key,val);
}
}
};
Observer.prototype.convert = function (key,val) {
var that = this;
Object.defineProperty(this.data,key,{
enumerable:true,
configurable:true,
get:function () {
console.log("你访问了" + key);
return val;
},
set:function (newVal,func) {
console.log("你设置了" + key + "新的值为" + newVal);
if(newVal == val) return;
if(typeof newVal == "object"){
new Observer(newVal);
}
that.eventBus.emit(key,newVal); //触发订阅
val = newVal;
return val;
}
})
};
//发布订阅模式，一个中间层（包括一个订阅接口，一个取消接口，一个发布接口）
function PubSub(){
this.handlers = {};
}
PubSub.prototype.on = function (eventType,handler) {
if (!(eventType in this.handlers)){
this.handlers[eventType] = [];
}
this.handlers[eventType].push(handler);
return this;
}
PubSub.prototype.emit = function (eventType) {
if(!this.handlers[eventType]) return;
var handlerArgs = [].slice.call(arguments,1); //刨除eventType，保留其他参数
for(var i = 0; i < this.handlers[eventType].length;i++){
this.handlers[eventType][i].apply(this,handlerArgs); //实际上等于func(..rest);
}
return this;
}
PubSub.prototype.off = function (eventType) {
if(!(eventType in this.handlers)) return;
delete this.handlers[eventType];
return this;
}
Observer.prototype.$watch = function(attr, callback){
this.eventBus.on(attr, callback);
};
let app1 = new Observer({
name: 'youngwind',
age: 25
});
// 你需要实现 $watch 这个 API
app1.$watch('age', function(age) {
console.log(`我的年纪变了，现在已经是：${age}岁了`)
});
app1.data.age = 100; // 输出：'我的年纪变了，现在已经是100岁了'
网友评论