Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 【JS】JS模块化实战-购物车
Blogger Information
Blog 94
fans 0
comment 0
visits 92489
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
【JS】JS模块化实战-购物车
可乐随笔
Original
338 people have browsed it

JS模块化实战-购物车

HTML示范代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>购物车</title>
  8.     <link rel="stylesheet" href="static/css/cart.css" />
  9.   </head>
  10.   <body>
  11.     <div class="cart">
  12.       <table>
  13.         <caption>
  14.           我的购物车
  15.         </caption>
  17.         <thead>
  18.           <tr>
  19.             <td><input type="checkbox" name="check-all" /></td>
  20.             <td>编号</td>
  21.             <td>品名</td>
  22.             <td>单位</td>
  23.             <td>单价</td>
  24.             <td>数量</td>
  25.             <td>金额</td>
  26.           </tr>
  27.         </thead>
  28.       </table>
  29.     </div>
  30.     <script type="module">
  31.       //（一）商品信息
  32.       const items = [
  33.         { id: 286, name: '酸奶', units: '箱', price: 50, num: 1 },
  34.         { id: 870, name: '苹果', units: '千克', price: 10, num: 1 },
  35.         { id: 633, name: '外-套', units: '件', price: 300, num: 6 },
  36.         { id: 153, name: '皮鞋', units: '双', price: 400, num: 2 },
  37.         { id: 109, name: '手机', units: '台', price: 5000, num: 1 },
  38.       ];
  39.       //(二) 导入购物车模块
  40.       import Cart from './modules/cart.js';
  42.       //(三) 实例化购物车类
  43.       const cart = new Cart(items);
  45.       //(四) 获取购物车（表格）
  46.       const table = document.querySelector('table');
  48.       //(五) 将商品渲染到购物车元素中 tbody
  49.       const tbody = table.createTBody();
  50.       items.forEach(function (item, key) {
  51.         //1. 创建模板字符串：tr
  52.         const tr = `
  53.                 <tr>
  54.                     <td><input type = "checkbox" name = "check" checked></td>
  55.                     <td>${item.id}</td>
  56.                     <td>${item.name}</td>
  57.                     <td>${item.units}</td>
  58.                     <td>${item.price}</td>
  59.                     <td><input type = "number" name = "" value = "${item.num}"</td>
  60.                     <td class="money">${cart.money[key]}</td>
  61.                 </tr>
  62.             `;
  63.         //2.将内容填充到tbody,将模板字符串解析成html并添加到tbody中
  64.         tbody.insertAdjacentHTML('beforeend', tr);
  65.       });
  67.       //(六) 将相关统计数据（总数量，总金额）添加到tfoot中
  68.       const tfoot = table.createTFoot();
  69.       let tr = `
  70.         <tr>
  71.             <td colspan="5">总计：</td>
  72.             <td class = "total">${cart.total}</td>
  73.             <td class = "total-money">${cart.totalMoney}</td>
  74.         </tr>
  75.       `;
  76.       tfoot.insertAdjacentHTML('beforeend', tr);
  78.       //(七) 更新数量，实时计算出结果并显示出来
  79.       //(1).拿到所有的数量控件
  80.       const nums = table.querySelectorAll('input[type=number]');
  81.       //(2).为每一个数量控件添加事件监听：input
  82.       nums.forEach(function (num, key) {
  83.         num.oninput = function () {
  84.           //1.计算总数量
  85.           items[key].num = num.value * 1;
  86.           cart.total = cart.getTotal(items);
  87.           //2.计算每个商品金额
  88.           cart.money[key] = num.value * 1 * items[key].price;
  89.           //3.计算商品总金额
  90.           cart.totalMoney = cart.money.reduce((acc,cur) => acc + cur);
  91.           //4.将数据渲染到指定元素
  92.           table.querySelector('.total').textContent = cart.total;
  93.           table.querySelector('.total-money').textContent = cart.totalMoney;
  94.           table.querySelectorAll('.money')[key].textContent = cart.money[key];
  95.         };
  96.       });
  97.     </script>
  98.   </body>
  99. </html>

JS示范代码

  1. //默认导出
  2. //购物车模块
  4. export default class {
  5.     //构造器
  6.     constructor(items) {
  7.         //1.商品总数量
  8.         this.total = this.getTotal(items);
  10.         //2.每个商品金额（数组）
  11.         this.money = this.getMoney(items);
  13.         //3.商品总金额
  14.         this.totalMoney = this.getTotalMoney();
  15.     }
  17.     getTotal(items) {
  18.         //1.数量数组：每个商品的数量num字段组成的数组
  19.         //forEach没有返回，map也是循环，但有返回
  20.         let numArr = items.map((item) => item.num);
  21.         // console.log(numArr);
  22.         //2.数组求和
  23.         return numArr.reduce((acc, cur) => acc + cur);
  24.     }
  25.     getMoney(items) {
  26.         return items.map((item) => item.price * item.num);
  28.     }
  29.     getTotalMoney(items) {
  30.         return this.money.reduce((acc, cur) => acc + cur);
  32.     }
  34. }
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post