Object.defineProperty自己完成一个双向绑定
Object.defineProperty方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象
value: 设置属性的值
writable: 值是否可以重写。true | false
enumerable: 目标属性是否可以被枚举。true | false
configurable: 目标属性是否可以被删除或是否可以再次修改特性 true | false
set: 目标属性设置值的方法
get:目标属性获取值的方法
Object.defineProperty(user, "name", {
get: function() {
console.log("你是不是来获取值啦");
return defaultName;
},
set: function(newValue) {
console.log("设置新值");
defaultName = newValue;
document.querySelector("#model").value = newValue;
document.querySelector("#modelText").textContent = newValue;
console.log("实现 模型 => 视图");
}
})
setTimeout(() => {
//改变值
user.name = "啦啦啦";
}, 2000);
var user = {};
var defaultName = 'tom';
var model = document.querySelector('#model');
var modelText = document.querySelector('#modelText');
Object.defineProperty(user, 'name', {
get: function() {
return defaultName;
},
set: function(newVal) {
defaultName = newVal;
model.value = newVal;
modelText.textContent = newVal;
}
})
model.addEventListener('keyup', function() {
user.name = this.value;
console.log("实现 视图 => 模型");
})