详细解读：如何用原生 JavaScript 实现功能齐备的购物车

购物车不仅是电商平台的核心，也是前端面试中考察事件处理、节点操作和业务逻辑闭环的经典题目。本文将带你从零开始，使用原生 JavaScript 构建一个逻辑严密的购物车系统。

一、购物车逻辑架构图#

在动手写代码前，我们需要理清“数据”、“视图”与“交互”的关系：

二、核心功能模块设计#

我们将功能拆解为四个核心模块，确保代码的可维护性。

1. 商品列表动态渲染#

在实际开发中，商品数据通常来自 API。我们使用 template literals（模板字符串）来代替繁琐的字符串拼接，使代码更易读。

1
// 使用 ES6 语法优化渲染逻辑
2
const renderProductList = (data) => {
3
    const oUl = document.querySelector("#box ul");
4
    oUl.innerHTML = data.map((item, index) => `
5
        <li>
6
            <div class="pro_img"><img src="${item.imgUrl}" width="150" height="150"></div>
7
            <h4 class="pro_name"><a href="#">${item.proName}</a></h4>
8
            <p class="pro_price">${item.proPrice}元</p>
9
            <p class="pro_rank">${item.proComm}万人好评</p>
10
            <div class="add_btn" data-index="${index}">加入购物车</div>
11
        </li>
12
    `).join('');
13
};

2. 事件委托：处理动态生成的节点#

由于购物车里的商品是动态添加的，直接给“删除”或“加减”按钮绑定事件会导致新生成的按钮失效。事件委托是最佳解决方案。

3. 核心交互逻辑实现#

我们通过监听购物车容器的点击事件，通过 target.classList 来判断用户点击的是哪个功能按钮：

1
// 统一管理购物车内的点击行为
2
oCar.onclick = function(e) {
3
    const tar = e.target;
4

5
    // 数量增加
6
    if (tar.classList.contains('count_i')) {
7
        let numNode = tar.parentNode.querySelector('.c_num');
8
        numNode.innerText = parseInt(numNode.innerText) + 1;
9
        updateSubtotal(tar);
10
    }
11

12
    // 选中/取消选中
13
    if (tar.classList.contains('i_check')) {
14
        tar.classList.toggle('i_acity');
15
        checkAllStatus(); // 检查是否需要同步更新全选按钮
16
    }
17

18
    getAmount(); // 无论什么操作，最后统一计算总价
19
};

三、性能与体验优化建议#

1. 数据驱动 (State Management)#

目前的实现是直接从 DOM 节点读取价格和数量。在大型项目中，建议先维护一个 cartList 数组（状态），每次操作先修改数组，再根据数组渲染视图。这能避免频繁读取 DOM 带来的性能损耗。

2. 防抖与节流 (Debounce & Throttle)#

当用户疯狂点击“+”号时，不应立即向后端发送请求。可以使用节流技术，在用户停止点击后的 300ms 再同步最终数量。

3. 本地持久化#

使用 localStorage 存储购物车数据，确保用户刷新页面后，选中的商品不会消失。

四、总结#

实现购物车的难点不在于 UI 布局，而在于状态同步。当数量变化、选中状态变化或删除商品时，必须确保“小计”与“总计”能实时反馈准确。

一、 购物车逻辑架构图#

二、 核心功能模块设计#