ES6中Module语法与加载实现
欢迎访问我的博客,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~
前言
在前三篇文章中一次介绍了CommonJS,AMD,CMD,他们都需要单独载入文件
在阮一峰老师的module一文中写到,ES6 在语言标准的层面上,实现的模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案
引入ES6模块的好处
- 静态加载是提高效率
- 不再需要
UMD
模块格式了,将来服务器和浏览器都会支持 ES6 模块格式。目前,通过各种工具库,其实已经做到了这一点- 将来浏览器的新 API 就能用模块格式提供,不再必须做成全局变量或者
navigator
对象的属性- 不再需要对象作为命名空间(比如
Math
对象),未来这些功能可以通过模块提供
静态加载带来的好处
commonJS
require
实际上是整体加载fs
模块,然后在需要使用的时候使用
1 | // CommonJS模块 |
ES6
ES6
中的import
可以在编译时,按照需要去加载所需要的模块,这个时候就相当于只加载了大括号里的3个方法,相比上面CommonJS
中使用require
加载整个fs
模块好很多
1 | import { stat, exists, readFile } from 'fs' |
ES6中Module语法
模块功能主要由两个命令构成:
export
和import
export命令
规定对外接口
输出变量:
1 | // poeple.js |
上述代码认为是一个模块,利用
export
向外输出三个变量
也可以在大括号内一块输出
1 | // poeple.js |
输出函数或类:
1 | export function add (x, y) { |
输出变量改别名:
利用
as
关键字
1 | function a1 () {} |
import命令
加载模块
1 | import { name, height, age } from './people.js' |
import
语句可以选择性的只加载需要的模块,更加节省了资源
模块的整体加载
星号(
*
)指定一个对象,所有输出值都加载在这个对象上面
那上面的例子
1 | import * as people from './people.js' |
export default命令
从前面的例子可以看出,使用
import
命令的时候,用户需要知道所要加载的变量名或函数名,否则无法加载
为了给用户提供方便,让他们不用阅读文档就能加载模块,就要用到
export default
命令,为模块指定默认输出
1 | // export-default.js |
其他模块加载该模块时,
import
命令可以为该匿名函数指定任意名字
1 | // import-default.js |
跨模块常量
const
声明的常量只在当前代码块有效。如果想设置跨模块的常量(即跨多个文件),或者说一个值要被多个模块共享,可以采用下面的写法
1 | // constants.js 模块 |
ES6中的Module加载实现
在浏览器和
Node
之中加载ES6
模块
浏览器加载
浏览器加载 ES6 模块,也使用
<script>
标签,但是要加入type="module"
属性,以此属性告诉浏览器,这加载的是一个 ES6 模块
1 | <script type="module" src="./foo.js"></script> |
该加载是异步加载,不会造成阻塞,按出现顺序加载,相当于
H5
中的defer
1 | <script type="module" src="./foo.js"></script> |
同样的可以使用
async
属性,但此时不按顺序加载,依然是异步的,只不过不知道会先加载哪一个
1 | <script type="module" src="./foo.js" async></script> |
文章推荐
参考文章
- 阮一峰老师的ES6 标准入门