一、两个model之间的双向绑定
var o = {
a: 0
}
o.b = o.a + 1;
console.log(o.a); // "0"
console.log(o.b); // "1"
//更新o.a
o.a = 5;
o.b = o.a + 1;
console.log(o.a); // "5"
console.log(o.b); // "6"
//更新o.b
o.b = 10;
o.a = o.b / 5;
o.b = o.a + 1;
console.log(o.a); // "2"
console.log(o.b); // "3"var o = {
a: 0
}
Object.defineProperty(o, "b", {
get: function () {
return this.a + 1;
},
set: function (value) {
this.a = value / 5;
}
});
console.log(o.a); // "0"
console.log(o.b); // "1"
// 更新o.a
o.a = 5;
console.log(o.a); // "5"
console.log(o.b); // "6"
// 更新o.b
o.b = 10;
console.log(o.a); // "2"
console.log(o.b); // "3"二、model和view之间的双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生js实现数据双向绑定</title>
</head>
<body>
<input type="text" id="J_input">
<script>
//数据层Model
var dataObj = {
nkey:'camille'
}
//视图层view
var J_input = document.getElementById('J_input');
//逻辑层viewModel
function manualBind(nkey,nvalue){
dataObj.nkey = nvalue;
J_input.value = nvalue;//属性设置
//J_input.setAttribute('value',nvalue);会直接在dom中看到属性，属于添加属性的方法。
}
/**
* 功能：改变view，更新model
* 测试方法：在文本框输入不同内容，在控制台打印dataObj.nkey，即可看到dataObj.nkey最新值。
*/
J_input.addEventListener('keyup',function(e){
manualBind('nkey',e.target.value);
},false);
/**
* 功能：改变model，更新view
* 测试方法：
* 1、在控制台写dataObj.nkey = 'username';并手动调用manualBind('nkey',dataObj.nkey);
* 2、打印document.getElementById('J_input').value;即可看到view层的变化。
*/
// manualBind('nkey','camille666');
</script>
</body>
</html>