search

博客列表 >使用原生 js 完成一个购物车页面和 ES6 中模块的导入问题

使用原生 js 完成一个购物车页面和 ES6 中模块的导入问题

祥子弟弟
祥子弟弟原创
2021年02月09日 16:58:141155浏览

一、实现一个购物车

购物车要实现的功能

  1. 全选框选中时，底下的单个商品复选框按钮要全部选中

  2. 单个商品复选框中只要有一个没有被选中，则全选复选框取消选中

  3. 改变商品数量的时候，后边的金额会自动进行加减

  4. 总价和总数量中只计算当前勾选的商品，但是没有勾选的商品中数量和金额可以变动

整个购物车的简陋样子如下：

先完成功能 1，2（功能 1，2 后边会和 3，4 进行一下合并）

首先要做的就是拿到全选复选框和全部的单选复选框，然后对复选框添加 “change” 事件。完成 1，2 功能

  1. // 1.获取全选复选框，所有单品的复选框
  2. const checkAll = document.querySelector("#check-all");
  3. // console.log(checkAll);
  4. const checkItems = document.querySelectorAll('input[name="item"]');
  5. // console.log(checkItems);
  7. // 2.为全选复选框按钮添加事件：change,当前值改变会触发事件
  8. checkAll.onchange = (ev) => {
  9.   // console.log(ev.target.checked);
  10.   // 当全选复选框是checked时，对每个单品复选框都要进行checked选中
  11.   checkItems.forEach((item) => (item.checked = ev.target.checked));
  12. };
  14. // 为每个单独的复选框添加事件：change
  15. checkItems.forEach(
  16.   // 对单个复选框状态进行判断，如果有一个不为checked状态，则全选复选框不选中
  17.   (item) =>
  18.     (item.onchange = () =>
  19.       (checkAll.checked = [...checkItems].every((item) => item.checked)))
  20. );
  22. // 使用jQuery完成上边的内容，逻辑思路和原生js相同
  23. $("#check-all").on("change", (ev) => {
  24.   // 对全选复选框添加change事件
  25.   // 当全选复选框的值改变时，对所有的单品复选框进行同步更新它的选中情况
  26.   $('input[name="item"]').each(function () {
  27.     // change事件发生时，对每个单品的选中情况进行同步
  28.     this.checked = ev.target.checked;
  29.   });
  30. });
  31. $('input[name="item"]').each(function () {
  32.   // 对每个单品的复选框添加change事件
  33.   // 对这个单品复选框集合的checked情况进行every()筛选，
  34.   // 当所有的单品复选框都选中时，匹配全选复选框
  35.   this.onchange = function () {
  36.     // console.log($("#check-all")[0].checked);
  37.     // console.log([...$('input[name="item"]')]);
  38.     $("#check-all")[0].checked = [...$('input[name="item"]')].every(
  39.       (item) => item.checked
  40.     );
  41.   };
  42. });

效果如图

接下来完成功能 3，4，将功能 3，4 涉及到的内容写到一个函数中，因为 3，4 中的功能涉及到功能 1，2，所以后边还需要做一次整合

  1. // 自动计算函数
  2. function autoCalculate() {
  3.   // 对后边数量以及单价，总计进行自动计算
  4.   // 需要获取到所有的数量，以及所有的单价
  5.   // 因为拿到的数据都是string，所以需要想办法转换成数值
  6.   // const prices = document.querySelectorAll(".price");
  7.   // 因为数据进行运算的时候是会发生类型转换的，所以可以直接进行转换它
  8.   // 也可以使用parseInt()方法，将字符串转为数值
  10.   // 获取到当前的单价数组，为后面的计算金额
  11.   const priceArr = [...document.querySelectorAll(".price")].map(
  12.     (item) => item.textContent * 1
  13.   );
  14.   // console.log(priceArr);
  16.   // 获取到被选中事件的索引值
  17.   // const checkedArr = [];
  18.   // [...checkItems].forEach((ev, index) => {
  19.   //   if (ev.checked === true) {
  20.   //     checkedArr.push(index);
  21.   //   }
  22.   // });
  23.   // console.log(checkedArr);
  25.   // const numbers = document.querySelectorAll('input[type="number"]');
  26.   // console.log(numbers[0].value);
  28.   // 对商品的复选框状态进行判断，从而获取商品的总数和总金额
  30.   // 对当前的数量数组进行获取
  31.   const numArr = [...document.querySelectorAll('input[type="number"]')].map(
  32.     (item) => item.value * 1
  33.   );
  34.   // console.log(numArr);
  36.   // 使用filter()方法，以当前价格的复选框状态作为判断条件，获取到所有的checked为true的单价
  37.   const checkedPrice = priceArr.filter(
  38.     (item, index) => [...checkItems][index].checked
  39.   );
  40.   // console.log(totalPrice);
  41.   // 获取到所有checked为true的数量
  42.   const checkedNum = numArr.filter(
  43.     (item, index) => [...checkItems][index].checked
  44.   );
  45.   // console.log(totalNum);
  47.   // 商品总数的获取，可以使用reduce()方法进行累加操作
  48.   // console.log(numArr.reduce((pre, cur) => pre + cur));
  49.   // 当reduce()中的参数值为空时，reduce()方法会报错，所以需要进行判断
  50.   let sum = 0;
  51.   if (checkedNum.length !== 0) {
  52.     sum = checkedNum.reduce((pre, cur) => pre + cur);
  53.   }
  55.   // 计算商品的金额：单价 * 数量，还是使用reduce()方法进行计算
  56.   // 商品的金额是不随复选框的变动而变动的，它只和数量的变动相关
  57.   const amountArr = [priceArr, numArr].reduce((total, curr) =>
  58.     total.map((item, index) => item * curr[index])
  59.   );
  61.   // 计算已选中商品的金额数组
  62.   const checkedAmount = amountArr.filter(
  63.     (item, index) => [...checkItems][index].checked
  64.   );
  65.   // console.log(checkedAmount);
  66.   // console.log(amount);
  68.   // 计算已选中商品的总金额
  69.   let totalAmount = 0;
  70.   if (checkedAmount.length !== 0) {
  71.     totalAmount = checkedAmount.reduce((pre, cur) => pre + cur);
  72.   }
  73.   // console.log(totalAmount);
  75.   // 将计算结果渲染到购物车中
  76.   // 总数量
  77.   document.querySelector("#sum").textContent = sum;
  78.   // 总金额
  79.   document.querySelector("#total-amount").textContent = totalAmount;
  80.   // 每个商品的金额
  81.   // 根据当前商品的索引和amountArr商品价格数组的索引对应，然后填充到内容中
  82.   document
  83.     .querySelectorAll(".amount")
  84.     .forEach((item, index) => (item.textContent = amountArr[index]));
  85. }
  87. // 获取到所有的数量控件
  88. const numInput = document.querySelectorAll('input[type="number"]');
  89. // console.log(numInput);
  90. // 用户更新数量时触发自动计算，添加change事件
  91. numInput.forEach((ev) => (ev.onchange = autoCalculate));
  92. // 刚加载时，也应该触发自动计算事件
  93. window.onload = autoCalculate;
  95. // 在这块儿对前边的复选框功能做了一下整合，所以只需要这一段代码就好，前边的可以注释掉
  96. // 当取消单个选中时，触发计算事件
  97. checkItems.forEach((item) =>
  98.   item.addEventListener("change", function () {
  99.     checkAll.checked = [...checkItems].every((item) => item.checked);
  100.     autoCalculate();
  101.   })
  102. );
  103. // 当全选复选框值发生变动时，自动计算被触发
  104. checkAll.addEventListener("change", function (ev) {
  105.   checkItems.forEach((item) => (item.checked = ev.target.checked));
  106.   autoCalculate();
  107. });

因为要完成功能 3，4，涉及到功能 1，2 中的复选框的 change 事件，所以进行了整合，前边功能 1，2 的代码可以注释掉

完成的效果图如下

二、ES6 中模块导入问题

首先要知道什么是模块？模块就是一个 js 代码块。一个封装成模块的 js 文件,内部成员对外不见,除非导出来。模块要写到一个独立 的 js 文件中,并使用一些特别的语法和关键字

其次是模块解决了什么问题？

  1. 可维护性: 每个模块是独立的,各写各个互不影响,出错直接定位责任人

  2. 可复用性: 只需要一条 import 指令就可以导入

  3. 避免污染全局空间: 模块处在自己的命名空间内

  4. 模块解决了 js 的模块化开发与代码封装问题

模块的导入

在 ES6 之前的模块导入方式是利用 script 标签的 src 属性

  1. <script src="module1.js"></script>

ES6 之后的模块导入方式

  1. <!-- 导入模块时，必须让type类型为module -->
  2. <script type="module">
  3.   // 导入语句，import
  4.   // 前面的./不能省略
  5.   import { userName, hello, User } from "./module1.js";
  6. </script>

在模块中将想要对外部访问的成员前边加上export关键字，就可以在需要导入的地方使用 import 语句进行导入，除了单个的成员前边加上export关键字之外，还可以对需要导出的所有成员进行统一导出

  1. // 导出语句 export
  3. // export let userName = "小红";
  5. let userName = "小红";
  7. function hello(name) {
  8.   return "Hello" + name;
  9. }
  11. class User {
  12.   constructor(name, age) {
  13.     this.name = name;
  14.     this.age = age;
  15.   }
  16.   show() {
  17.     return this.name + "今年" + this.age + "了";
  18.   }
  19. }
  20. // 模块中的私有成员，不能被外部访问
  21. let gender = "男";
  23. // 统一导出
  25. export { userName, hello, User };

导入模块之后就可以去使用模块中定义的成员了。

模块中的别名导出导入

为什么要进行别名导入呢？因为有时候会在当前作用域中定义和模块中同名的变量，别名的导入导出是为了不与当前作用域的变量重名。

模块中成员的导出过程

  1. // 在统一导出的时候进行别名化
  2. export { userName as name, hello as hi, User };

脚本中对于模块的导入过程（如果导入的成员在模块中已经进行了别名化处理，那么在使用 import 语句导入的时候，就必须使用别名导入，不然无效）

  1. <script type="module">
  2.   // import语句不允许写在后边
  3.   // import { userName, hello } from "./module2.js";
  4.   // 如果模块中定义了别名，再导入的时候就只能使用别名导入
  5.   //   import { userName, echo } from "./module2.js";
  6.   //   import { name, echo } from "./module2.js";
  7.   //   console.log(name);
  8.   //   let userName;
  10.   // 别名导入
  11.   import { name as firstName, echo } from "./module2.js";
  12.   // 别名的导入导出是为了不与当前作用域的变量重名
  13. </script>

在对别名的导入过程中，如果当前作用域还是有同名成员时，还可以进行别名处理

模块中默认成员的导入导出

模块中默认成员与普通成员的区别：

  • 单一成员导出区别：
  1. // default可以视为一个变量，default = userName;相当于赋值
  2. // 默认成员
  3. export default userName = "小红";
  4. // 一个模块中只允许一个默认导出
  6. // 一般成员
  7. export function hello(name) {
  8.   return "Hello" + name;
  9. }
  • 统一导出的区别
  1. // 将成员导出，将hello视为默认成员导出，其他成员为普通成员
  2. export { userName, hello as default, gender };
  • 模块中默认成员与普通成员的导入的区别
  1. <script type="module">
  2.   //   默认模块导入
  3.   // 导入默认成员与普通模块的最大区别在于没有大括号
  4.   // 导入既有默认成员，又有非默认成员
  5.   import hello, { userName, gender } from "./module3.js";
  6. </script>

模块命名空间的作用

命名空间：是一个容器，内部可以包含任何类型的数据，命名空间是一个对象，可以挂载到当前的全局中。

使用一般的导入模块方式和使用命名空间导入模块的方式

一般方式

  1. <script type="module">
  2.   // 使用一般方式导入
  3.   import { userName, hello, User } from "./module1.js";
  4. </script>

使用命名空间的方式导入

  1. <script type="module">
  2.   // 使用命名空间来导入
  3.   import * as nameSpace from "./module1.js";
  4.   // 可以在当前作用域随便声明变量，不怕与模块中成员同名，因为命名空间是一个对象
  5.   let userName;
  6.   let hello = () => {};
  7.   class User {}
  8.   // 查看/使用模块中的成员
  9.   console.log(nameSpace);
  10.   console.log(nameSpace.userName);
  11.   console.log(nameSpace.hello(nameSpace.userName));
  12.   console.log(new nameSpace.User("小兰", 18).show());
  13. </script>
上一条：定义一个接口和抽象类、对比接口与抽象类的区别与联系下一条：jQuery 中常用的 DOM 操作以及使用 jQuery 完成跨域请求操作
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多