JavaScript|JavaScript ES6 Module模块详解 JavaScriptES6Module模块详解

0.什么是Module
1.Module 的加载

1.1 方式一
1.2 方式二

2.导出和导入

2.1 一个模块的导出可以被其它模块导入，并访问。
2.2 没有导出，也可以将其导入
2.3 被导入的代码都会执行一遍，也仅会执行一遍

3.export default 和对应的 import

4.export 和对应的 import

5.Module 的注意事项

总结

0.什么是Module 历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。
在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。
模块系统主要解决的问题：

模块化的问题
消除全局变量
管理加载顺序

1.Module 的加载使用 < script >标签加载模块时需要添加 type=“module”。

1.1 方式一

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 = https://www.it610.com/article/`nick:${Base.nick},age:${Base.age}.`; export default src;

输出结果：

nick:admin,age:19.

2.2 没有导出，也可以将其导入
例2：About.js不导出，在首页将其导入。

index.html

About.js

const src = 'https://www.it610.com/article/Hello World!'; console.log(src);

输出结果：

Hello World!

2.3 被导入的代码都会执行一遍，也仅会执行一遍
例3：导入3次About.js，观察导出结果。

index.html

About.js

const src = 'https://www.it610.com/article/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 = 'https://www.it610.com/article/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.复合写法导出的，无法在当前模块中使用
复合写法，导入后导出：