day03-模块化编程

名字容易忘记

模块化编程

1.基本介绍

• 传统的非模块化开发有如下的缺点：（1）命名冲突（2）文件依赖
  
• JavaScript代码越来越庞大，JavaScript引入模块化编程，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块
  
• JavaScript使用“模块”（module）的概念来实现模块化编程，解决非模块化编程问题。
  
• 模块化也是ES6新特性
  

2.模块化编程原理示意图

3.模块化编程的分类

• CommonJS模块化规范/ES5的写法
  
• ES6模块化规范
  

3.1CommonJS模块化规范/ES5的写法

3.1.1介绍

• 每个js文件就是一个模块，有自己的作用域。在文件中定义的变量、函数、类/对象，都是私有的，对其他js文件不可见
  
• CommonJS使用module.exports={}或者exports={}导出模块，使用let/const 名称=require("xx.js")导入模块
  

3.1.2应用实例

• 需求说明
  
  
  
  • 编写function.js，该文件有函数，变量，常量，对象，数组....
    
  • 要求在use.js，可以使用到function.js中定义的函数/变量/常量/对象
    
  • 请用模块化编程的方式完成，尽量将各种写法都写一下
    
  
  
• 思路分析
  
  
  
• 代码应用
  function.js
  1. //定义一些对象，变量，常量，函数等
  2. const sum = function (a, b) {
  3.     return parseInt(a) + parseInt(b);
  4. }
  6. const sub = function (a, b) {
  7.     return parseInt(a) - parseInt(b);
  8. }
  10. let name = "jack";
  12. const PI = 3.14;
  14. const monster = {
  15.     name: "牛魔王",
  16.     age: 500,
  17.     hi() {
  18.         console.log("hi 你好，牛魔王");
  19.     }
  20. }
  22. //导出
  23. /**
  24. * 1.module.exports 导出模块
  25. * 2.把你需要导出的数据，写入到{}中即可
  26. * 3.可以全部导出，也可以部分导出
  27. * 4.理解：相当于把所有导出的数据当做一个对象
  28. * 5.如果属性名和属性值（即要导出的函数/变量/对象...）的名字相同，可以简写
  29. * 6.module.exports ={} 也可以简写为 exports= {}
  30. */
  31. exports = {
  32.     //简写
  33.     sum,
  34.     sub,
  35.     name,
  36.     PI
  37. }
  38. // module.exports = {
  39. //完整的写法--属性：属性值
  40. // sum: sum,
  41. // sub: sub,
  42. // myname: name,
  43. // PI: PI
  44. // }

  复制代码
  use.js
  1. //导入
  2. /**
  3. * 1.在es5中，通过require 把对应文件.js 中的数据/对象 引入
  4. * 2.通过 对象.属性 的形式使用
  5. * 3.如果我们导入时，不需要所有的数据，可以导入部分数据
  6. */
  7. const m = require("./function.js");
  8. const {sub} = require("./function.js");
  10. //使用
  11. console.log(m.sub("100", "200"));
  12. console.log(m.sum(10, 90));
  13. console.log(m.name);
  14. console.log(m.PI);
  15. console.log(sub(19, 3));

  复制代码

3.2ES6模块化规范

3.2.1介绍

• ES6使用
  （1）export{对象/函数/变量/常量等} （批量导出）
  （2）export 定义 = {} （定义导出）
  （3）export default {}（默认导出）
  以上三种方式都可导出模块
  
• 如果使用的是批量导出或定义导出的，导入时要用import {} from "xx.js"形式
  如果用默认导出的，导入时要用 import 名称 from "xx.js"形式
  

3.2.2应用实例-批量导出形式

• 需求说明
  
  
  
  • 编写common.js，该文件有函数，变量，常量，对象
    
  • 要求在use_common.js中，可以使用到common.js中定义的 函数/变量/常量/对象
    
  • 请使用ES6模块化编程的方式完成
    
  
  
• 代码实现
  common.js
  1. //定义一些对象，变量，常量，函数等
  2. const sum = function (a, b) {
  3.     return parseInt(a) + parseInt(b);
  4. }
  6. const sub = function (a, b) {
  7.     return parseInt(a) - parseInt(b);
  8. }
  10. let name = "jack";
  12. const PI = 3.14;
  14. const monster = {
  15.     name: "牛魔王",
  16.     age: 500,
  17.     hi() {
  18.         console.log("hi 你好，牛魔王");
  19.     }
  20. }
  23. /**
  24. * es6之批量导出
  25. * 1.export 就是导出模块/数据
  26. * 2.可以全部导出，也可以部分导出
  27. */
  28. export {
  29.     sum,
  30.     sub,
  31.     name,
  32.     monster
  33. }

  复制代码
  use_common.js
  1. /**
  2. * 导入
  3. * 1.可以使用{} 来接收导出的数据
  4. * 2.可以全部接收，也可以选择的接收
  5. * 3.细节：导入{}中的名字，要求和导出{}中的名称一致
  6. */
  7. import {monster, name} from "./common.js";
  9. //使用
  10. console.log(monster);
  11. console.log(name);

  复制代码

3.2.3应用实例-其他导出形式

• 定义导出
  

common2.js

1. //定义一些对象，变量，常量，函数等
3. //定义导出
4. //定义sum函数时，就直接导出
5. //如果在定义时导出的数据，在导入时要保持名称一致
6. export const sum = function (a, b) {
7.     return parseInt(a) + parseInt(b);
8. }

复制代码

use_common2.js

1. //可以导入模块/数据
3. import {sum} from "./common2.js";
5. //使用
6. console.log(sum(10, 40));

复制代码

• 默认导出
  

common3.js

1. //定义一些对象，变量，常量，函数等
3. //演示默认导出
4. //可以这样理解，类似于把{}内的数据当做一个对象导出
5. export default {
6.     sum(a, b) {
7.         return parseInt(a) + parseInt(b);
8.     },
9.     sub(a, b) {
10.         return parseInt(a) - parseInt(b);
11.     }
12. }

复制代码

use_common3.js

1. //导入默认导出的模块/数据
2. //m的名称是可以自定义的，因此就可以解决命名冲突的问题
3. import m from "./common3.js";
5. //以 对象.属性 的形式使用
6. console.log(m.sum(11, 22));
7. console.log(m.sub(88, 66));

复制代码

3.2.4注意事项和细节

• ES6的模块化无法在Node.js中执行，需要用Babel转码ES5后再执行
  
• export不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量，函数，数组，对象
  
• 没有导出的数据不能使用
  
• ES6的导出方式有很多，不同的导出方式对导入方式也有影响
  

4.练习

• 请编写一个文件hw_common.js，该文件有对象cat（属性有name，age，cry() ），对象dog（属性有name，age，hi() ）
  
  
  
  • 使用批量导出
    
  • 使用定义导出
    
  • 使用默认导出
    
  hw_common.js
  （1）批量导出：
  1. const cat = {
  2.     name: "猫猫",
  3.     age: 2,
  4.     cry() {
  5.         console.log("喵喵");
  6.     }
  7. }
  9. const dog = {
  10.     name: "狗狗",
  11.     age: 3,
  12.     hi() {
  13.         console.log("旺旺");
  14.     }
  15. }
  17. //批量导出
  18. export {cat,dog}

  复制代码
  （2）定义导出
  1. export const cat = {
  2.     name: "猫猫",
  3.     age: 2,
  4.     cry() {
  5.         console.log("喵喵");
  6.     }
  7. }
  9. export const dog = {
  10.     name: "狗狗",
  11.     age: 3,
  12.     hi() {
  13.         console.log("旺旺");
  14.     }
  15. }

  复制代码
  （3）默认导出
  1. //默认导出
  2. //注意写法有一些变化，把我们的两个对象当做{}的属性即可
  3. export default {
  4.     cat: {
  5.         name: "猫猫",
  6.         age: 2,
  7.         cry() {
  8.             console.log("喵喵");
  9.         }
  10.     },
  12.     dog: {
  13.         name: "狗狗",
  14.         age: 3,
  15.         hi() {
  16.             console.log("旺旺");
  17.         }
  18.     }
  19. }

  复制代码
• 编写use_common.js，在该文件中使用hw_common.js导出的模块/数据，注意体会使用特点
  导入默认导出的数据：
  1. //导入默认导出的数据
  2. import m from "./hw_common.js";
  3. //使用
  4. console.log(m.cat.name, m.cat.age, m.cat.cry());
  5. console.log(m.dog.name, m.dog.age, m.dog.hi());

  复制代码
  导入 批量导出或定义导出 的数据：
  1. //导入 批量导出或定义导出 的数据
  2. import {dog, cat} from "./hw_common.js";
  3. //使用
  4. console.log(dog.name,dog.hi());
  5. console.log(cat.name,cat.cry());

  复制代码
• a.js有一个dog对象（含有hi()方法），b.js也有一个dog对象（含有say()方法），请使用模块化的编程思路，在a.js能使用到不同的dog对象，请编程完成。
  

  使用默认导出解决命名冲突
  

  b.js
  1. //默认导出
  2. export default {
  3.     dog: {
  4.         say() {
  5.             console.log("say...")
  6.         }
  7.     }
  8. }

  复制代码
  a.js
  1. const dog = {
  2.     hi() {
  3.         console.log("hi..")
  4.     }
  5. }
  7. //导入默认导出的数据
  8. import dog2 from "./b.js";
  10. //使用
  11. console.log(dog2.dog.say(), dog.hi());

  复制代码

来源:https://www.cnblogs.com/liyuelian/p/17031363.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！