const queue = new Set()
const observe = fn => queue.add(fn)
const observable = obj => new Proxy(obj, { set })
function set(target, key, value, receiver) {
const res = Reflect.set(target, key, value, receiver)
queue.forEach(observer => observer())
return res
}
const person = observable({
name: 'zhangsan',
age: 12
})
function print() {
console.log(person.name)
}
observe(print)
person.name = 'sisi'
<label for="input" id="lable"></label>
<input type="text" id="input">
var obj = {
name: ''
}
Object.defineProperty(obj, 'name', { //重写set方法
set: function (value) {
document.getElementById('input').value = value;
document.getElementById('lable').innerHTML = value;
}
})
document.getElementById("input").addEventListener('input', function (e) {
obj.name = e.target.value
})