用object.defineproperty()和proxy实现简单的双向绑定,并比较两者优劣
程序员文章站
2022-07-12 22:57:05
...
<input id='input'>
<p id='p'></p>
1.object.defineproperty()
const input = document.getElementById('input');
const p = document.getElementById('p');
var obj = {};
Object.defineProperty(obj, 'text', {
get: function() {
console.log('get val');
},
set: function(newVal) {
document.getElementById('span').innerHTML = newVal;
}
});
const input = document.getElementById('input');
input.addEventListener('keyup', function(e){
obj.text = e.target.value;
})
2.proxy
const input = document.getElementById('input');
const p = document.getElementById('p');
const obj = {};
const newObj = new Proxy(obj, {
get: function(target, key, receiver) {
console.log(`getting ${key}!`);
return Reflect.get(target, key, receiver);
},
set: function(target, key, value, receiver) {
console.log(target, key, value, receiver);
if (key === 'text') {
input.value = value;
p.innerHTML = value;
}
return Reflect.set(target, key, value, receiver);
},
});
input.addEventListener('keyup', function(e) {
newObj.text = e.target.value;
});
proxy的优势:
1.Proxy可以直接监听对象而非属性
2.Proxy可以直接监听数组的变化
3.Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等是Object.defineProperty不具备的。
上一篇: 在ubuntu中命令openssl x509如何使用
下一篇: 使用 openssl 生成证书