本篇文章主要介紹了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中文網其他相關文章！
