幾種雙向綁定的做法
目前幾種主流的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;
