购物车实例

    <script type="module">
      // 商品信息
      const items = [
        { id: 286, name: "酸奶", units: "箱", price: 50, num: 1 },
        { id: 870, name: "苹果", units: "千克", price: 10, num: 1 },
        { id: 633, name: "外套", units: "件", price: 300, num: 1 },
        { id: 153, name: "皮鞋", units: "双", price: 400, num: 1 },
        { id: 109, name: "手机", units: "台", price: 5000, num: 1 },
      ];
      // 导入购物车模块
      import Cart from "./modules/cart.js";
      // 实例化购物车类
      const cart = new Cart(items);
      // 获取购物车
      const table = document.querySelector("table");
      // 将商品渲染到购物车元素中tbody
      // 创建tbody：商品容器
      const tbody = table.createTBody();
      // 创建tbody的内容，商品列表
      items.forEach(function (item, key) {
        // 创建商品模板字符串
        const tr = `
              <tr>
                  <td><input type="checkbox" name="" class="check" checked/></td>
                  <td>${item.id}</td>
                  <td>${item.name}</td>
                  <td>${item.units}</td>
                  <td>${item.price}</td>
                  <td>
                      <input type="number" name="" value="${item.num}" min='1'/>
                  </td>
                  <td class='money'>${cart.money[key]}</td>
              </tr>`;
        // 将内容填充到tbody
        tbody.insertAdjacentHTML("beforeend", tr);
      });
      // 将相关统计数据(总数量,总金额),填充到tfoot中
      const tfoot = table.createTFoot();
      let tr = `
          <tr>
            <td colspan='5'>总计:</td>
            <td class='total'>${cart.total}</td>
            <td class='total-money'>${cart.totalMoney}</td>
          </tr>
        `;
      tfoot.insertAdjacentHTML("beforeend", tr);
      // 更新数据,实时计算出结果并显示出来
      // 拿到所有的数量控件
      const nums = table.querySelectorAll("input[type=number]");
      // 为每一个数量控件添加事件监听:input
      nums.forEach(function (num, key) {
        num.oninput = function () {
          // 计算总数量
          items[key].num = num.value * 1;
          cart.total = cart.getTotal(items);
          // 计算每个商品金额
          // cart.money[key] = num.value * 1 * items[key].price;
          cart.money[key] = cart.getMoney(items)[key];
          // 计算商品总金额
          cart.totalMoney = cart.getTotalMoney();
          //  将数据渲染到指定元素上
          table.querySelector(".total").textContent = cart.total;
          table.querySelectorAll(".money")[key].textContent = cart.money[key];
          table.querySelector(".total-money").textContent = cart.totalMoney;
        };
      });
      // 选项按钮
      const checkAll = document.querySelector(".check-all");
      const tbodyCheck = document.querySelectorAll(".check");
      checkAll.onclick = function () {
        for (var i = 0; i < tbodyCheck.length; i++) {
          tbodyCheck[i].checked = checkAll.checked;
        }
      };
      for (var i = 0; i < tbodyCheck.length; i++) {
        tbodyCheck[i].onclick = function () {
          let num = 0;
          for (var i = 0; i < tbodyCheck.length; i++) {
            if (tbodyCheck[i].checked) num++;
          }
          if (num === tbodyCheck.length) {
            checkAll.checked = true;
          } else {
            checkAll.checked = false;
          }
        };
      }
    </script>

// 默认导出
// 购物车模块
export default class {
  // 构造器
  constructor(items) {
    // 1. 商品总数量
    this.total = this.getTotal(items);
    // 2. 每个商品金额(数组)
    this.money = this.getMoney(items);
    // 3. 商品总金额
    this.totalMoney = this.getTotalMoney();
  }
  // (一) 计算商品总数量
  getTotal(items) {
    // 1. 数量数组: 每个商品的数量num字段组成的数组
    let numArr = items.map(function (item) {
      return item.num;
    });
    // 2. 计算总数量
    return numArr.reduce(function (acc, cur) {
      return acc + cur;
    });
  }
  // (二) 计算每个商品的金额
  getMoney(items) {
    // 金额 = 数量 * 单价
    return items.map(function (item) {
      return item.num * item.price;
    });
  }
  // (三) 计算商品总金额
  getTotalMoney() {
    return this.money.reduce(function (acc, cur) {
      return acc + cur;
    });
  }
}