console
function observer(target) {
const div = document.getElementById("container");
const ob = {};
const props = Object.keys(target);
for (const prop of props) {
Object.defineProperty(ob, prop, {
get() {
return target[prop];
},
set(val) {
console.log(`setting!`)
target[prop] = val;
debugger;
render();
},
enumerable: true
})
}
render();
function render() {
let html = "";
for (const prop of Object.keys(ob)) {
html += `<p>
<span>hello${prop}:</span>
<span>${ob[prop]}</span>
</p>`
}
div.innerHTML = html;
}
return ob;
}
debugger;
const target = {
a: 1,
b: 4
}
const obj = observer(target);
setTimeout(function() {
obj.a = 45;
}, 1000)
<div id='container'></div>