ES6模块化开发

一、ES6模块化的基本介绍

1、

ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

2、

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。

3、ES6模块的使用：

 使用export规定模块的对外接口，使用import用于输入其他模块提供的功能

4、定义模块export语法

 var a = 10;
	var b = 20;
	export {b};
	var c = "admin"
	export {c as name};
	export {a,b,c};
	export {a as num1, b as num2, c as name};
	export default {num1:a, num2:b, name:c} 

5、加载模块import语法

    import {a} from   "./module.js";
    import {b} from  "./module.js";
    import {c} from  "./module.js";
    import {a,b,c} from  "./module.js";
    import {num1,num2,num3} from  "./module.js”;
    import {num1 as n1, num2 as n2, num3 as n3} from   "./module.js";
    import obj from   "./module.js";

6、注意

• 1. export和import关键字，只能存在于顶层作用域内，不能存在局部或块级作用域
• 2. 在ES6的模块化中，所有语法自动处在严格模式下
• 3. export是声明关键字，声明一个对外接口
• 4. export声明的接口必须和模块内部的变量建立一一对应的关系
• 5. export声明的接口与对应的值是动态绑定，即可以拿到模块内部实时修改的值
  • var a = 10; setTimeout(()=>{ a = 20; },1000) export {a};
  • import {a} from "../module/mA"; console.log(a) //10; setTimeout(()=>{ console.log(a) //20; },1000)
• 6. export和import时，都可以使用as关键字，重命名接口
• 7. 使用default关键字，设置默认接口，一个模块中只允许出现一次default
  • export default {a,b,c,fn,obj};
• 8. import在使用接口时，必须将接口放在花括号内，除非export暴露接口时使用了default关键字
  • import * as qwe from "../module/mA"; console.log(qwe.default.a);
• 9. import加载的接口是只读的，不允许被修改，如果接口是对象，可以修改属性
• 10. import具有提升效果
• 11. 由于import是静态执行，所以不能使用表达式和变量
• 12. 当import后没有接收接口，会执行整个模块文件
  • import "../module/mA";
• 13. 可以使用通配符*加载整个模块的接口（需要配合as使用），返回一个模块对象
• 14. ES6的模块化不是对象，而是通过export输出对应的代码，再通过import输入
• 15. import加载模块的输入接口是静态加载，指定接口的情况下，只加载接口部分