前端數(shù)據(jù)的雙向綁定方法
前端的視圖層和數(shù)據(jù)層有時需要實現(xiàn)雙向綁定(two-way-binding)，例如mvvm框架，數(shù)據(jù)驅(qū)動視圖，視圖狀態(tài)機(jī)等，研究了幾個目前主流的數(shù)據(jù)雙向綁定框架，總結(jié)了下。目前實現(xiàn)數(shù)據(jù)雙向綁定主要有以下三種。
1、手動綁定
比較老的實現(xiàn)方式，有點像觀察者編程模式，主要思路是通過在數(shù)據(jù)對象上定義get和set方法(當(dāng)然還有其它方法)，調(diào)用時手動調(diào)用get或set數(shù)據(jù)，改變數(shù)據(jù)后出發(fā)UI層的渲染操作；以視圖驅(qū)動數(shù)據(jù)變化的場景主要應(yīng)用與input、select、textarea等元素，當(dāng)UI層變化時，通過監(jiān)聽dom的change，keypress，keyup等事件來出發(fā)事件改變數(shù)據(jù)層的數(shù)據(jù)。整個過程均通過函數(shù)調(diào)用完成。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>data-binding-method-set</title></head><body> <input q-value="value" type="text" id="input"> <div q-text="value" id="el"></div> <script> var elems = [document.getElementById('el'), document.getElementById('input')]; var data = { value: 'hello!' }; var command = { text: function(str){ this.innerHTML = str; }, value: function(str){ this.setAttribute('value', str); } }; var scan = function(){ /** * 掃描帶指令的節(jié)點屬性 */ for(var i = 0, len = elems.length; i < len; i++){ var elem = elems[i]; elem.command = []; for(var j = 0, len1 = elem.attributes.length; j < len1; j++){ var attr = elem.attributes[j]; if(attr.nodeName.indexOf('q-') >= 0){ /** * 調(diào)用屬性指令，這里可以使用數(shù)據(jù)改變檢測 */ command[attr.nodeName.slice(2)].call(elem, data[attr.nodeValue]); elem.command.push(attr.nodeName.slice(2)); } } } } /** * 設(shè)置數(shù)據(jù)后掃描 */ function mvSet(key, value){ data[key] = value; scan(); } /** * 數(shù)據(jù)綁定監(jiān)聽 */ elems[1].addEventListener('keyup', function(e){ mvSet('value', e.target.value); }, false); scan(); /** * 改變數(shù)據(jù)更新視圖 */ setTimeout(function(){ mvSet('value', 'fuck'); },1000) </script></body></html>2、臟檢查機(jī)制
以典型的mvvm框架angularjs為代表，angular通過檢查臟數(shù)據(jù)來進(jìn)行UI層的操作更新。關(guān)于angular的臟檢測，有幾點需要了解些： - 臟檢測機(jī)制并不是使用定時檢測。 - 臟檢測的時機(jī)是在數(shù)據(jù)發(fā)生變化時進(jìn)行。 - angular對常用的dom事件，xhr事件等做了封裝， 在里面觸發(fā)進(jìn)入angular的digest流程。 - 在digest流程里面， 會從rootscope開始遍歷， 檢查所有的watcher。 （關(guān)于angular的具體設(shè)計可以看其他文檔，這里只討論數(shù)據(jù)綁定），那我們看下臟檢測該如何去做：主要是通過設(shè)置的數(shù)據(jù)來需找與該數(shù)據(jù)相關(guān)的所有元素，然后再比較數(shù)據(jù)變化，如果變化則進(jìn)行指令操作
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>data-binding-drity-check</title></head><body> <input q-event="value" ng-bind="value" type="text" id="input"> <div q-event="text" ng-bind="value" id="el"></div> <script> var elems = [document.getElementById('el'), document.getElementById('input')]; var data = { value: 'hello!' }; var command = { text: function(str) { this.innerHTML = str; }, value: function(str) { this.setAttribute('value', str); } }; var scan = function(elems) { /** * 掃描帶指令的節(jié)點屬性 */ for (var i = 0, len = elems.length; i < len; i++) { var elem = elems[i]; elem.command = {}; for (var j = 0, len1 = elem.attributes.length; j < len1; j++) { var attr = elem.attributes[j]; if (attr.nodeName.indexOf('q-event') >= 0) { /** * 調(diào)用屬性指令 */ var dataKey = elem.getAttribute('ng-bind') || undefined; /** * 進(jìn)行數(shù)據(jù)初始化 */ command[attr.nodeValue].call(elem, data[dataKey]); elem.command[attr.nodeValue] = data[dataKey]; } } } } /** * 臟循環(huán)檢測 * @param {[type]} elems [description] * @return {[type]} [description] */ var digest = function(elems) { /** * 掃描帶指令的節(jié)點屬性 */ for (var i = 0, len = elems.length; i < len; i++) { var elem = elems[i]; for (var j = 0, len1 = elem.attributes.length; j < len1; j++) { var attr = elem.attributes[j]; if (attr.nodeName.indexOf('q-event') >= 0) { /** * 調(diào)用屬性指令 */ var dataKey = elem.getAttribute('ng-bind') || undefined; /** * 進(jìn)行臟數(shù)據(jù)檢測，如果數(shù)據(jù)改變，則重新執(zhí)行指令，否則跳過 */ if(elem.command[attr.nodeValue] !== data[dataKey]){ command[attr.nodeValue].call(elem, data[dataKey]); elem.command[attr.nodeValue] = data[dataKey]; } } } } } /** * 初始化數(shù)據(jù) */ scan(elems); /** * 可以理解為做數(shù)據(jù)劫持監(jiān)聽 */ function $digest(value){ var list = document.querySelectorAll('[ng-bind='+ value + ']'); digest(list); } /** * 輸入框數(shù)據(jù)綁定監(jiān)聽 */ if(document.addEventListener){ elems[1].addEventListener('keyup', function(e) { data.value = e.target.value; $digest(e.target.getAttribute('ng-bind')); }, false); }else{ elems[1].attachEvent('onkeyup', function(e) { data.value = e.target.value; $digest(e.target.getAttribute('ng-bind')); }, false); } setTimeout(function() { data.value = 'fuck'; /** * 這里問啥還要執(zhí)行$digest這里關(guān)鍵的是需要手動調(diào)用$digest方法來啟動臟檢測 */ $digest('value'); }, 2000) </script></body></html>3、前端數(shù)據(jù)劫持(Hijacking)
第三種方法則是avalon等框架使用的數(shù)據(jù)劫持方式。基本思路是使用Object.defineProperty對數(shù)據(jù)對象做屬性get和set的監(jiān)聽，當(dāng)有數(shù)據(jù)讀取和賦值操作時則調(diào)用節(jié)點的指令，這樣使用最通用的=等號賦值就可以了。具體實現(xiàn)如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>data-binding-hijacking</title></head><body> <input q-value="value" type="text" id="input"> <div q-text="value" id="el"></div> <script> var elems = [document.getElementById('el'), document.getElementById('input')]; var data = { value: 'hello!' }; var command = { text: function(str) { this.innerHTML = str; }, value: function(str) { this.setAttribute('value', str); } }; var scan = function() { /** * 掃描帶指令的節(jié)點屬性 */ for (var i = 0, len = elems.length; i < len; i++) { var elem = elems[i]; elem.command = []; for (var j = 0, len1 = elem.attributes.length; j < len1; j++) { var attr = elem.attributes[j]; if (attr.nodeName.indexOf('q-') >= 0) { /** * 調(diào)用屬性指令 */ command[attr.nodeName.slice(2)].call(elem, data[attr.nodeValue]); elem.command.push(attr.nodeName.slice(2)); } } } } var bValue; /** * 定義屬性設(shè)置劫持 */ var defineGetAndSet = function(obj, propName) { try { Object.defineProperty(obj, propName, { get: function() { return bValue; }, set: function(newValue) { bValue = newValue; scan(); }, enumerable: true, configurable: true }); } catch (error) { console.log("browser not supported."); } } /** * 初始化數(shù)據(jù) */ scan(); /** * 可以理解為做數(shù)據(jù)劫持監(jiān)聽 */ defineGetAndSet(data, 'value'); /** * 數(shù)據(jù)綁定監(jiān)聽 */ if(document.addEventListener){ elems[1].addEventListener('keyup', function(e) { data.value = e.target.value; }, false); }else{ elems[1].attachEvent('onkeyup', function(e) { data.value = e.target.value; }, false); } setTimeout(function() { data.value = 'fuck'; }, 2000) </script></body></html>但值得注意的是defineProperty支持IE8以上的瀏覽器，這里可以使用__defineGetter__ 和 __defineSetter__ 來做兼容但是瀏覽器兼容性的原因，直接用defineProperty就可以了。至于IE8瀏覽器仍需要使用其它方法來做hack。如下代碼可以對IE8進(jìn)行hack，defineProperty支持IE8。例如使用es5-shim.js就可以了。（IE8以下瀏覽器忽略）
4、小結(jié)
首先這里的例子只是簡單的實現(xiàn)，讀者可以深入感受三種方式的異同點，復(fù)雜的框架也是通過這樣的基本思路滾雪球滾大的。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
