观察者模式
- 根据观察者模式的思想,实现数据更新时,页面也同步更新
<div id="container"></div>
function observer(target) {
const div = document.getElementById("container")
const obj = new Proxy(target,{
set(target,prop,value){
Reflect.set(target,prop,value)
render()
},
get(target,prop){
return Reflect.get(target,prop)
}
})
render()
function render() {
let html = ""
for (const prop of Object.keys(obj)) {
html += `
<p>
<span>${prop}</span>
<span>${obj[prop]}</span>
</p>
`
}
div.innerHTML = html;
}
return obj;
}
const target = {
a: 4,
b: 3
}
target.a = 10
const proxy = observer(target)
