<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<label for="name">Name (4 to 8 characters):</label>
<input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10" />
<span id="value"></span>
<script>
const bucket = new Set()
const data = {}
const result = new Proxy(data, {
set(target, prop, value) {
target[prop] = value;
console.log('set value')
bucket.forEach((fn) => fn());
return true;
},
get(target, prop) {
bucket.add(handleSetValue);
console.log('get value')
return target[prop];
}
})
const input = document.getElementById("name");
input.addEventListener("input", function(event) {
result.name = event.target.value; // 触发set操作, 执行bucket里的副作用函数
console.log("input changed")
});
const value = document.getElementById("value");
function handleSetValue() {
value.innerHTML = result.name + '!';
console.log("value changed")
}
function init() {
console.log(result.name) // 调用一下Proxy的get方法, 收集副作用函数
}
init()
</script>
</body>
</html>
扫一扫
3847
评论 1
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
