原生js实现购物车数据响应驱动+响应式原理

由于本文只关注逻辑的实现代码所以简陋了ui界面但恰好也说明了数据变化的问题

可能您的经常使用{computed,watch}vue等框架实现了实时更新的数据变化省去了很多操作,但是本文将带你了解响应原生的实现。

  • 示例图

原生js实现购物车数据响应驱动+响应式原理_第1张图片
假如我们添加了几个商品输入框模拟变化的价格数量,那么在现实的js代码中你是否是通过绑定每个事件对每次商品的加减进行总价的重新计算呢,
上代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            height: 100px;
            width: 100px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
<div>
    <span>模拟商品价格1:</span>
    <input oninput="postpar(event)" />
    <span>模拟商品价格2:</span>
    <input oninput="postpar1(event)" />
</div>
    <span>总购物价格:</span>
    <span id="number">0</span>
    <script>
        var numer = {
            s1: 0,
            v2: 0
        }
        Object.keys(numer).forEach(key => {  
            Object.defineProperty(numer, key, {
                enumerable: true,
        configurable: false,
                get: function () {
                    return value
                },
                set: function (newva) {
                    value = newva;
                 document.getElementById("number").innerText=numer.s1+numer.s1
                }
            })
        });

        function postpar(event) {
            numer.s1 = parseInt(event.target.value)
            console.log(numer);
        }
        function postpar1(event) {
            numer.v2 = parseInt(event.target.value)
        }

    </script>
</body>

</html>

我们使用object.keys遍历每个价格属性绑定 Object.defineProperty做到监听每个商品的价格变化,监听到数据变化后我们重新定于总价,这样大大的符降低了我们的代码和复杂度

效果图原生js实现购物车数据响应驱动+响应式原理_第2张图片

如果您喜欢记得点赞和关注

你可能感兴趣的:(js,ts,css,html)