数据双向绑定原理
Object.defineProperty(obj, prop, descriptor)
该方法的主要作用就是修改传入对象的属性特性
- 数据描述
Object.defineProperty(obj,'name',{
configurable: true, // false 不可以删除
enumerable: true, // false 在枚举时会忽略
value: undefined, // 任意类型的值，默认为undefined
writable:true // false 不可以通过数据运算符进行赋值
});
- 存储器描述
Object.defineProerty(obj,'name',{
get:function(){
return value;
},
set:function(val){
value = val;
}
});
当该属性被修改或者读取时就会执行对应的set get方法
发布-订阅模式
发布-订阅模式又叫观察者模式，它定义了对象间的一种一对多的关系，让多个观察者对象同时监听头一个主题对象，当一个对象发生改变时，所有依赖它的对象都将得到通知。
订阅：数组中添加函数或对象。
发布：遍历数组执行函数或对象方法。
简单实现一个发布订阅模式
//封装一个全局的watcher
var watcher = (function() {
//初始化
var list = [],
listen,
trigger,
remove;
//将fn挂载在list数组上
listen = function(key, fn) {
if(!list[key]) {
list[key] = [];
}
//将函数加入key属性下的数组中
if(fn || typeof fn === 'function') {
list[key].push(fn);
}
}
trigger = function() {
var args = arguments//缓存参数
var key = [].prototype.shift.call(args);//拿到传入的第一个参数
var fns = list[key];
if(!fn || fns.length === 0) {
return;
}
fns.forEach((fn) => {
fn.apply(this, args)//此时args去掉了第一个参数
})
}
//移除某个回调函数
remove = function(key, fn) {
var fns = list[key];
if(!fn || fns.length === 0) {
return;
}
fns.forEach((_fn, i) => {
if(_fn === fn) {
fns.splice(i, 1);//删除
}
})
}
return {
listen,
trigger,
remove
}
})()
//简单测试一下
watcher.listen('clickdoor', function(time, count) {
console.log('敲门时间'+ time + '次数' + count);
})
//当敲门时触发trigger函数
watcher.trigger('clickdoor', 10000, 50)//敲门时间10000次数50
有了发布-订阅模式和Object.defineProperty()便能设计出一个简单的vue
网友评论