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

由于本文只关注逻辑的实现代码所以简陋了ui界面但恰好也说明了数据变化的问题可能您的经常使用{computed,watch}vue等框架实现了实时更新的数据变化省去了很多操作，但是本文将带你了解响应原生的实现。示例图假如我们添加了几个商品输入框模拟变化的价格数量，那么在现实的js代码中你是否是通过绑定每个事件对每次商品的加减进行总价的重新计算呢，上代码：<!DOCTYPE html>&l

让世界更web一点

6984人浏览 · 2021-06-25 18:27:30

让世界更web一点 · 2021-06-25 18:27:30 发布

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

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

示例图

在这里插入图片描述
假如我们添加了几个商品输入框模拟变化的价格数量，那么在现实的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做到监听每个商品的价格变化，监听到数据变化后我们重新定于总价，这样大大的符降低了我们的代码和复杂度

效果图在这里插入图片描述
：
如果您喜欢记得点赞和关注

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^