JavaScript购物车优化渲染教程

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《JavaScript购物车渲染优化教程》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

本文旨在解决 JavaScript 购物车中仅显示最后一个商品的问题。通过修改循环内的 HTML 赋值方式，避免每次循环覆盖之前的商品信息。同时，提供更高效的购物车渲染方法，一次性构建完整的 HTML 字符串，减少浏览器重绘次数，提升用户体验。

在 JavaScript 购物车实现中，经常会遇到只显示购物车中最后一个商品的问题。这通常是由于在循环中错误地覆盖了 innerHTML 属性导致的。以下将详细介绍如何解决这个问题，并提供一种更高效的购物车渲染方法。

问题分析

原始代码的问题在于，每次循环都使用 cartItems.innerHTML = cartHTML 覆盖了 cartItems 元素的内容。因此，循环结束后，cartItems 中只保留了最后一个商品的信息。

解决方案：累加 HTML 字符串

最直接的解决方案是使用 += 运算符，将新的 HTML 字符串累加到 cartItems.innerHTML 中。这样，每次循环都会将新的商品信息添加到现有内容之后，从而显示所有商品。

for (var i = 0; i < cartData.length; i++) {
    this["cartData" + i] = cartData[i];

    let cartHTML = `
        <tr class="cart-row">
            <td><a href="#" type="button" class="cart-remove-button"><i class="far fa-times-circle"></i></a></td>
            <td><img src="${cartData[i][2]}" alt=""></td>
            <td>${cartData[i][0]}</td>
            <td class="cart-price">DZD ${cartData[i][1]}</td>
            <td>&lt;input class=&quot;cart-quantity-input&quot; type=&quot;number&quot; value=&quot;1&quot;&gt;</td>
            <td class="cart-sub-total">DZD ${cartData[i][1]}</td>
        </tr>`;

    cartItems.innerHTML += cartHTML;
}

更优方案：一次性渲染

虽然上述解决方案可以解决问题，但效率不高。每次修改 innerHTML 都会触发浏览器的重绘（repaint）和回流（reflow），这会消耗大量的资源。为了优化性能，建议一次性构建完整的 HTML 字符串，然后将其赋值给 innerHTML。

let cartRows = "";

for (var i = 0; i < cartData.length; i++) {
    this["cartData" + i] = cartData[i];

    const cartRow = `
        <tr class="cart-row">
            <td><a href="#" type="button" class="cart-remove-button"><i class="far fa-times-circle"></i></a></td>
            <td><img src="${cartData[i][2]}" alt=""></td>
            <td>${cartData[i][0]}</td>
            <td class="cart-price">DZD ${cartData[i][1]}</td>
            <td>&lt;input class=&quot;cart-quantity-input&quot; type=&quot;number&quot; value=&quot;1&quot;&gt;</td>
            <td class="cart-sub-total">DZD ${cartData[i][1]}</td>
        </tr>`;

    cartRows += cartRow;
}

cartItems.innerHTML = cartRows;

代码解释

1. 首先，定义一个空字符串 cartRows，用于存储所有商品的 HTML 代码。
2. 在循环中，将每个商品的 HTML 代码添加到 cartRows 中。
3. 循环结束后，将完整的 cartRows 字符串赋值给 cartItems.innerHTML。

注意事项

• 确保 cartItems 元素在 HTML 中已经存在，并且是正确的容器。
• 在实际项目中，建议使用模板引擎（如 Handlebars、Mustache）或现代 JavaScript 框架（如 React、Vue、Angular）来管理 HTML 代码，这样可以提高代码的可维护性和可读性。
• 考虑对 cartData 进行错误处理，例如，如果 cartData 为空，则显示一个空购物车的提示信息。

总结

通过修改 HTML 赋值方式，可以解决 JavaScript 购物车中只显示最后一个商品的问题。为了提高性能，建议采用一次性渲染的方式，避免频繁修改 innerHTML 属性。在实际项目中，可以结合模板引擎或现代 JavaScript 框架，构建更健壮、可维护的购物车功能。

理论要掌握，实操不能落！以上关于《JavaScript购物车优化渲染教程》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！