前端數(shù)據(jù)的雙向綁定方法
前端的視圖層和數(shù)據(jù)層有時(shí)需要實(shí)現(xiàn)雙向綁定（two-way-binding）色迂，例如mvvm框架除呵，數(shù)據(jù)驅(qū)動(dòng)視圖巧号，視圖狀態(tài)機(jī)等浓瞪，研究了幾個(gè)目前主流的數(shù)據(jù)雙向綁定框架，總結(jié)了下女轿。目前實(shí)現(xiàn)數(shù)據(jù)綁定主要有以下三種箭启。
- 手動(dòng)綁定
比較老的實(shí)現(xiàn)方式，有點(diǎn)像觀察者編程模式蛉迹，主要思路是通過(guò)在數(shù)據(jù)對(duì)象上定義get和set方法（當(dāng)然還有其它方法）傅寡，調(diào)用時(shí)手動(dòng)調(diào)用get或set數(shù)據(jù)，改變數(shù)據(jù)后觸發(fā)UI層的渲染操作；以視圖驅(qū)動(dòng)數(shù)據(jù)變化的場(chǎng)景主要應(yīng)用于input荐操、select芜抒、textarea等元素，當(dāng)UI層變化時(shí)托启，通過(guò)監(jiān)聽dom的change宅倒，keypress，keyup等事件來(lái)觸發(fā)事件改變數(shù)據(jù)層的數(shù)據(jù)屯耸。整個(gè)過(guò)程均通過(guò)函數(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ù)改變檢測(cè)
*/
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>
- 臟檢查機(jī)制
以典型的mvvm框架angularjs為代表疗绣，angular通過(guò)檢查臟數(shù)據(jù)來(lái)進(jìn)行UI層的操作更新线召。關(guān)于angular的臟檢測(cè)，有幾點(diǎn)需要了解:
- 臟檢測(cè)機(jī)制并不是使用定時(shí)檢測(cè)
- 臟檢測(cè)的時(shí)機(jī)是在數(shù)據(jù)發(fā)生變化時(shí)進(jìn)行
- angular對(duì)常用的dom事件多矮，xhr事件等做了封裝缓淹，在里面觸發(fā)進(jìn)入angular的digest流程
- 在digest流程里面，會(huì)從rootscope開始遍歷工窍，檢查所有的watcher
臟檢測(cè)如何去做割卖，主要是通過(guò)設(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é)點(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-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)檢測(cè)
* @param {[type]} elems [description]
* @return {[type]} [description]
*/
var digest = function(elems) {
/**
* 掃描帶指令的節(jié)點(diǎn)屬性
*/
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ù)檢測(cè)，如果數(shù)據(jù)改變罢维，則重新執(zhí)行指令淹仑，否則跳過(guò)
*/
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';
/**
* 這里問(wèn)啥還要執(zhí)行$digest這里關(guān)鍵的是需要手動(dòng)調(diào)用$digest方法來(lái)啟動(dòng)臟檢測(cè)
*/
$digest('value');
}, 2000)
</script>
</body>
</html>
- 前端數(shù)據(jù)劫持（Hijacking）
第三種方法則是avalon等框架使用的數(shù)據(jù)劫持方式》畏酰基本思路是使用Object.defineProperty對(duì)數(shù)據(jù)對(duì)象做屬性get和set的監(jiān)聽匀借，當(dāng)有數(shù)據(jù)讀取和賦值操作時(shí)則調(diào)用節(jié)點(diǎn)的指令，這樣使用最通用的=等號(hào)賦值就可以了平窘。具體實(shí)現(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é)點(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)用屬性指令
*/
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來(lái)做兼容但是瀏覽器兼容性的原因，直接用defineProperty就可以了瑰艘。至于IE8瀏覽器仍需要使用其它方法來(lái)做hack是鬼。如下代碼可以對(duì)IE8進(jìn)行hack，defineProperty支持IE8紫新。例如使用es5-shim.js就可以了均蜜。（IE8以下瀏覽器忽略）
