几种双向绑定的做法
目前几种主流的mvc(vm)框架都实现了单向数据绑定,我认为的双向数据绑定其实就是在单向绑定的基础上给可输入元素(input,textare等)添加了change事件,来动态的修改model和view。
实现数据绑定的做法大致如下几种:
发布者-订阅者模式(backbone.js)
脏值检查(angular.js)
数据劫持(vue.js)
发布者-订阅者模式: 一般通过sub,pub的方式实现数据和视图绑定,更新数据的方法通常做法是vm.set('property',value)由于对这种方式不太熟悉,所以留一个链接,这篇文章讲的比较详细点击这里
脏值检查: angular.js通过脏值检测的方式对比数据是否更新,来决定是否更新视图,最简单的方式是通过setInterval()定时轮询检测数据变动,当然Googke不会这么low,angular有在指定事件触发后才进入脏值检测
DOM事件,譬如输入文本,点击按钮.
XHR响应时间($http)
浏览器Location变更事件($location)
Timer事件($timeout,$interval)
执行$digest()或$apply()
数据劫持: Vue.js则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的seeter,getter在数据变动时给订阅者发送消息,出发相应的监听回调.
思路整理
已经了解到Vue是通过数据劫持的方式来做数据绑定,其中最核心的方法便是通过Object.defineproperty()来实现对属性的劫持,达到监听数据变动的目的,无疑这个方法是本文中最重要的,最基础的内容之一,如果不熟悉Object.defineproperty
点击这里
实现双向绑定则必须实现以下的几点
实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如果有变动则拿到最新值并通知订阅者
实现一个指令解析器Compiled,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数
实现一个Watcher,作为链接Observer和Compiled的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图
mvvm入口函数,整合以上三者
上述流程如图所示 :
[图片上传中。。。（1）]1.实现Observer
OK,思路已经整理完毕,也已经比较明确相关模块功能了,我们已经知道可以利用Object.defineProperty()来监听属性变动,那么需要 Observer的数据对象进行递归遍历,包括子属性对象的属性,都加上setter和getter这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化。。。相关代码为 :
[图片上传中。。。（2）]上面这段代码我们已经可以监听每个数据的变化了,那么监听到变化之后剩下就是怎么通知给订阅者了,所以接下来我们需要实现一个消息订阅器,很简单,维护一个数组,用来收集订阅者,数组变动触发notify,在调用订阅者的update方法,代码改善后就是这样:
var data = {name: '钢铁侠'};observer(data);data.name = '蜘蛛侠'; // 监听到值变化了 钢铁侠 --> dmqfunction observer(data){ if (!data||typeof data!='object'){ return ; } //取出所有属性遍历 Object.keys(data).forEach(function(key){ defineReactive(data,key,data[key]); })}function defineReactive (data,key,val){ var dep=new Dep(); observer(val);//监听子属性 Object.defineProperty(data,key,{ enumerable:yrue,//可枚举 configurable:false,//不能被重新定义 get:function(){ return val; }, set :function(newVal){ if (val==newVal) return ; console.log('监听到值变化了',val+'-->'+newVal) val=newVal; dep.notify(); } })}function Dep(){ this.subs=[]}Dep.prototype={ addSub:function(sub){ this.subs.push(sub) }, notify:function(){ this.subs.forEach(function(sub){ sub.update(); }) }}
那么问题来了,谁是订阅者,怎么往订阅器添加订阅者? 没错,上面的思路整理中我们已经明确订阅者应该是Watcher,而且var dep=new Dep();是在defineProperty方法内部定义的,所以想通过dep添加订阅者,就必须要在闭包内操作,所以我们需要在getter里面动手脚:
var data = {name: '钢铁侠'};observer(data);data.name = '蜘蛛侠'; // 监听到值变化了 钢铁侠 --> dmqfunction observer(data){ if (!data||typeof data!='object'){ return ; } //取出所有属性遍历 Object.keys(data).forEach(function(key){ defineReactive(data,key,data[key]); })}function defineReactive (data,key,val){ var dep=new Dep(); observer(val);//监听子属性 Object.defineProperty(data,key,{ enumerable:yrue,//可枚举 configurable:false,//不能被重新定义 get:function(){ return val; }, get:function(){ //由于在闭包内添加watcher,所以通过Dep定义一个全局target属性,暂存warcher,添加完移除 Dep.target &&dep.addDep(Dep.target); return val; }, set :function(newVal){ if (val==newVal) return ; console.log('监听到值变化了',val+'-->'+newVal) val=newVal; dep.notify(); } })}function Dep(){ this.subs=[]}Dep.prototype={ addSub:function(sub){ this.subs.push(sub) }, notify:function(){ this.subs.forEach(function(sub){ sub.update(); }) }}//warcher.jsWarcher.prototype={ get:function(key){ Dep.target=this; //触发属性的getter,从而添加订阅者 this.value=data[key] Dep.target=null; }}
这里已经实现一个Observer了,已经具备了监听数据和数据变化通知订阅者的功能,那么接下来就是Compile了; 下面是完整代码
function Observer(data) { this.data = data; this.walk(data);}Observer.prototype = { walk: function(data) { var me = this; 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) { var dep = new Dep(); var childObj = observe(val); Object.defineProperty(data, key, { enumerable: true, // 可枚举 configurable: false, // 不能再define get: function() { if (Dep.target) { dep.depend(); } return val; }, set: function(newVal) { if (newVal === val) { return; } val = newVal; // 新的值是object的话，进行监听 childObj = observe(newVal); // 通知订阅者 dep.notify(); } }); }};function observe(value, vm) { if (!value || typeof value !== 'object') { return; } return new Observer(value);};var uid = 0;function Dep() { this.id = uid++; this.subs = [];}Dep.prototype = { addSub: function(sub) { this.subs.push(sub); }, depend: function() { Dep.target.addDep(this); }, removeSub: function(sub) { var index = this.subs.indexOf(sub); if (index != -1) { this.subs.splice(index, 1); } }, notify: function() { this.subs.forEach(function(sub) { sub.update(); }); }};Dep.target = null;
