前端數(shù)據(jù)的雙向綁定方法
前端的視圖層和數(shù)據(jù)層有時需要實(shí)現(xiàn)雙向綁定(two-way-binding)，例如mvvm框架，數(shù)據(jù)驅(qū)動視圖，視圖狀態(tài)機(jī)等，研究了幾個目前主流的數(shù)據(jù)雙向綁定框架，總結(jié)了下。目前實(shí)現(xiàn)數(shù)據(jù)雙向綁定主要有以下三種。
1、手動綁定
比較老的實(shí)現(xiàn)方式，有點(diǎ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é)點(diǎn)屬性 */ 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的臟檢測，有幾點(diǎn)需要了解些： - 臟檢測機(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)行指令操作
新聞熱點(diǎn)
疑難解答
圖片精選
