这篇文章主要介绍了ES6新特性之模块Module用法,简要说明了模块Module的概念、功能并结合实例形式分析了模块Module的使用方法与相关注意事项,需要的朋友可以参考下
0.什么是Module
历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。
在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。
模块系统主要解决的问题：
- 模块化的问题
- 消除全局变量
- 管理加载顺序
1.Module 的加载
使用
1.2 方式二
2.导出和导入
2.1 一个模块的导出可以被其它模块导入，并访问。
例1：使用About.js调用Base.js内的Base对象，并在首页打印。
index.html
Base.js
const Base = { nick: 'admin', age: 19 } export default Base; About.js
import Base from '../js/Base.js'; const src = `nick:${Base.nick},age:${Base.age}.`; export default src; 输出结果：
nick:admin,age:19.
2.2 没有导出，也可以将其导入
例2：About.js不导出，在首页将其导入。
index.html
About.js
const src = 'Hello World!'; console.log(src);
输出结果：
Hello World!
2.3 被导入的代码都会执行一遍，也仅会执行一遍
例3：导入3次About.js，观察导出结果。
index.html
About.js
const src = 'Hello World!'; console.log(src);
输出结果：
Hello World!
3.export default 和对应的 import
export default 用于导出一个默认值，一个模块只能有一个。
使用 export default 进行导出时，import 的名字可以随意起。
例4：使用 export default 进行导出，import 的名字随意起。
index.html
About.js
const src = 'Hello World!'; export default src;
输出结果：
Hello World!
4.export 和对应的 import
使用 export 进行导出时，import 的名字不能随意起。
例5：使用 export 进行导出。
index.html
About.js
const age = 18; export {age}; // export age; × // export const age = 18; √ export const nick = 'admin'; 输出结果：
admin 18
5.Module 的注意事项
1.模块中，顶层的 this 指向 undefined；
2import 具有提升效果，会提升到整个模块的头部，率先执行；
3.import 执行的时候，代码还没执行；
4.import 和 export 只能在模块的顶层，不能在代码块中执行；
5.import() 可以按条件导入；
6.复合写法导出的，无法在当前模块中使用
复合写法，导入后导出：
export About from './js/About.js';
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注0133技术站的更多内容！
