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>
