本篇文章主要介紹了javascript實現資料雙向綁定的三種方式小結,前端的視圖層和資料層有時需要實現雙向綁定,目前實作數據雙向綁定主要有三種,有興趣的可以了解一下。
前端資料的雙向綁定方法
前端的視圖層和資料層有時需要實作雙向綁定(two-way-binding),例如mvvm框架,資料驅動視圖,視圖狀態機等,研究了幾個目前主流的資料雙向綁定框架,總結了下。目前實作資料雙向綁定主要有以下三種。
1、手動綁定
比較舊的實作方式,有點像觀察者程式設計模式,主要想法是透過在資料物件上定義get和set方法(當然還有其它方法),呼叫時手動呼叫get或set數據,改變資料後出發UI層的渲染操作;以視圖驅動資料變更的場景主要應用與input、select、textarea等元素,當UI層變化時,透過監聽dom的change,keypress,keyup等事件來出發事件改變資料層的資料。整個過程均透過函數呼叫完成。
<!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"> <p q-text="value" id="el"></p> <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(){ /** * 扫描带指令的节点属性 */ 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){ /** * 调用属性指令,这里可以使用数据改变检测 */ command[attr.nodeName.slice(2)].call(elem, data[attr.nodeValue]); elem.command.push(attr.nodeName.slice(2)); } } } } /** * 设置数据后扫描 */ function mvSet(key, value){ data[key] = value; scan(); } /** * 数据绑定监听 */ elems[1].addEventListener('keyup', function(e){ mvSet('value', e.target.value); }, false); scan(); /** * 改变数据更新视图 */ setTimeout(function(){ mvSet('value', 'fuck'); },1000) </script> </body> </html>
2、髒檢查機制
以典型的mvvm框架angularjs為代表,angular透過檢查髒資料來進行UI層的操作更新。關於angular的髒檢測,有幾點需要了解一些: - 髒檢測機制並不是使用定時檢測。 - 髒檢測的時機是在資料發生變化時進行。 - angular對常用的dom事件,xhr事件等做了封裝, 在裡面觸發進入angular的digest流程。 - 在digest流程裡面, 會從rootscope開始遍歷, 檢查所有的watcher。 (關於angular的具體設計可以看其他文檔,這裡只討論資料綁定),那我們看下臟檢測該如何去做:主要是透過設定的資料來需找與該資料相關的所有元素,然後再比較資料變化,如果變化則進行指令操作
<!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"> <p q-event="text" ng-bind="value" id="el"></p> <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) { /** * 扫描带指令的节点属性 */ 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) { /** * 调用属性指令 */ var dataKey = elem.getAttribute('ng-bind') || undefined; /** * 进行数据初始化 */ command[attr.nodeValue].call(elem, data[dataKey]); elem.command[attr.nodeValue] = data[dataKey]; } } } } /** * 脏循环检测 * @param {[type]} elems [description] * @return {[type]} [description] */ var digest = function(elems) { /** * 扫描带指令的节点属性 */ 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) { /** * 调用属性指令 */ var dataKey = elem.getAttribute('ng-bind') || undefined; /** * 进行脏数据检测,如果数据改变,则重新执行指令,否则跳过 */ if(elem.command[attr.nodeValue] !== data[dataKey]){ command[attr.nodeValue].call(elem, data[dataKey]); elem.command[attr.nodeValue] = data[dataKey]; } } } } } /** * 初始化数据 */ scan(elems); /** * 可以理解为做数据劫持监听 */ function $digest(value){ var list = document.querySelectorAll('[ng-bind='+ value + ']'); digest(list); } /** * 输入框数据绑定监听 */ 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'; /** * 这里问啥还要执行$digest这里关键的是需要手动调用$digest方法来启动脏检测 */ $digest('value'); }, 2000) </script> </body> </html>
3、前端資料劫持(Hijacking)
第三種方法則是avalon等框架所使用的數據劫持方式。基本想法是使用Object.defineProperty對資料物件做屬性get和set的監聽,當有資料讀取和賦值運算時則呼叫節點的指令,這樣使用最通用的=等號賦值就可以了。具體實作如下:
<!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"> <p q-text="value" id="el"></p> <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() { /** * 扫描带指令的节点属性 */ 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) { /** * 调用属性指令 */ command[attr.nodeName.slice(2)].call(elem, data[attr.nodeValue]); elem.command.push(attr.nodeName.slice(2)); } } } } var bValue; /** * 定义属性设置劫持 */ 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."); } } /** * 初始化数据 */ scan(); /** * 可以理解为做数据劫持监听 */ defineGetAndSet(data, 'value'); /** * 数据绑定监听 */ 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進行hack,defineProperty支援IE8。例如使用es5-shim.js就可以了。 (IE8以下瀏覽器忽略)
4、小結
#首先這裡的例子只是簡單的實現,讀者可以深入感受三種方式的異同點,複雜的框架也是透過這樣的基本想法滾雪球滾大的。
以上是關於javascript實現資料雙向綁定的三種方法分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!