溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下javascript實現(xiàn)數(shù)據(jù)雙向綁定的示例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
前端數(shù)據(jù)的雙向綁定方法
前端的視圖層和數(shù)據(jù)層有時需要實現(xiàn)雙向綁定(two-way-binding)，例如mvvm框架，數(shù)據(jù)驅動視圖，視圖狀態(tài)機等，研究了幾個目前主流的數(shù)據(jù)雙向綁定框架，總結了下。目前實現(xiàn)數(shù)據(jù)雙向綁定主要有以下三種。
1、手動綁定
比較老的實現(xiàn)方式，有點像觀察者編程模式，主要思路是通過在數(shù)據(jù)對象上定義get和set方法(當然還有其它方法)，調用時手動調用get或set數(shù)據(jù)，改變數(shù)據(jù)后出發(fā)UI層的渲染操作；以視圖驅動數(shù)據(jù)變化的場景主要應用與input、select、textarea等元素，當UI層變化時，通過監(jiān)聽dom的change，keypress，keyup等事件來出發(fā)事件改變數(shù)據(jù)層的數(shù)據(jù)。整個過程均通過函數(shù)調用完成。
<!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){
/**
* 調用屬性指令，這里可以使用數(shù)據(jù)改變檢測
*/
command[attr.nodeName.slice(2)].call(elem, data[attr.nodeValue]);
elem.command.push(attr.nodeName.slice(2));
}
}
}
}
/**
* 設置數(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、臟檢查機制
以典型的mvvm框架angularjs為代表，angular通過檢查臟數(shù)據(jù)來進行UI層的操作更新。關于angular的臟檢測，有幾點需要了解些： - 臟檢測機制并不是使用定時檢測。 - 臟檢測的時機是在數(shù)據(jù)發(fā)生變化時進行。 - angular對常用的dom事件，xhr事件等做了封裝， 在里面觸發(fā)進入angular的digest流程。 - 在digest流程里面， 會從rootscope開始遍歷， 檢查所有的watcher。 （關于angular的具體設計可以看其他文檔，這里只討論數(shù)據(jù)綁定），那我們看下臟檢測該如何去做：主要是通過設置的數(shù)據(jù)來需找與該數(shù)據(jù)相關的所有元素，然后再比較數(shù)據(jù)變化，如果變化則進行指令操作
<!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) {
/**
* 調用屬性指令
*/
var dataKey = elem.getAttribute('ng-bind') || undefined;
/**
* 進行數(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) {
/**
* 調用屬性指令
*/
var dataKey = elem.getAttribute('ng-bind') || undefined;
/**
* 進行臟數(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這里關鍵的是需要手動調用$digest方法來啟動臟檢測
*/
$digest('value');
}, 2000)
</script>
</body>
</html>3、前端數(shù)據(jù)劫持(Hijacking)
第三種方法則是avalon等框架使用的數(shù)據(jù)劫持方式。基本思路是使用Object.defineProperty對數(shù)據(jù)對象做屬性get和set的監(jiān)聽，當有數(shù)據(jù)讀取和賦值操作時則調用節(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) {
/**
* 調用屬性指令
*/
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.");
}
}
/**
* 初始化數(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進行hack，defineProperty支持IE8。例如使用es5-shim.js就可以了。（IE8以下瀏覽器忽略）
以上是“javascript實現(xiàn)數(shù)據(jù)雙向綁定的示例”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內容。
