内存优化：数据驱动实时更新前端显示-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44649210/article/details/120720256

利用数据驱动将数据之间的操作放到内存中，可以减少对页面元素的获取操作

对创建的对象进行监听其数据变化，每次有变化时更改页面元素的内容

<body>

    <input type="text" id="price">
    <input type="text" id="number">
    <span id="showData"></span>
</body>
<script>
    // let showData = document.getElementById("showData");
    // let price = document.getElementById("price");
    // let number = document.getElementById("number");
    // //es6之前写法
    // let obj = {};
    // Object.defineProperty(obj, 'price', {
    //     set(parameter) {
    //         price = parameter;
    //         operate();
    //     },
    //     get() {
    //         return price;
    //     }
    // });
    // Object.defineProperty(obj, 'number', {
    //     set(parameter) {
    //         number = parameter;
    //         operate();
    //     },
    //     get() {
    //         return number;
    //     }
    // });

    // function operate() {
    //     showData.innerHTML = obj.number * obj.price;
    // }

    // //绑定事件
    // price.oninput = function () {
    //     obj.price = this.value;
    // }
    // number.oninput = function () {
    //     obj.number = this.value;
    // }


    //es6写法
    let showData = document.getElementById("showData");
    let price = document.getElementById("price");
    let number = document.getElementById("number");

    let obj = new Proxy({}, {
        set(target, key, value) {
            target[key] = value;
            operate();
        },
        get(target, key) {
            return target[key];
        }
    });

    function operate() {
        showData.innerHTML = obj.number * obj.price;;
    }

    //绑定事件
    price.oninput = function () {
        obj.price = this.value;
    }
    number.oninput = function () {
        obj.number = this.value;
    }
</script>