目录
- 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 方式一
<script type="module"> import module from "./module.js"; </script>
1.2 方式二
<script src="./module.js" type="module"></script>
2.导出和导入
2.1 一个模块的导出可以被其它模块导入,并访问。
例1:使用About.js调用Base.js内的Base对象,并在首页打印。
index.html
<script type="module"> import About from "./js/About.js"; console.log(About); </script>
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
<script type="module"> import "./js/About.js"; </script>
About.js
const src = 'Hello World!'; console.log(src);
输出结果:
Hello World!
2.3 被导入的代码都会执行一遍,也仅会执行一遍
例3:导入3次About.js,观察导出结果。
index.html
<script type="module"> import "./js/About.js"; import "./js/About.js"; import "./js/About.js"; </script>
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
<script type="module"> import bbb from "./js/About.js"; console.log(bbb); </script>
About.js
const src = 'Hello World!'; export default src;
输出结果:
Hello World!
4.export 和对应的 import
使用 export 进行导出时,import 的名字不能随意起。
例5:使用 export 进行导出。
index.html
<script type="module"> import { age, nick } from "./js/About.js"; console.log(nick, age); </script>
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';
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注NICE源码的更多内容!