利用JavaScriptProxy实现动态DOM值更新的示例-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39174318/article/details/138186873

<!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>

简易响应式