ES6中Module语法与加载实现

ES6中Module语法与加载实现

欢迎访问我的博客,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~

前言

在前三篇文章中一次介绍了CommonJS,AMD,CMD,他们都需要单独载入文件

在阮一峰老师的module一文中写到,ES6 在语言标准的层面上,实现的模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案

引入ES6模块的好处

  • 静态加载是提高效率
  • 不再需要UMD模块格式了,将来服务器和浏览器都会支持 ES6 模块格式。目前,通过各种工具库,其实已经做到了这一点
  • 将来浏览器的新 API 就能用模块格式提供,不再必须做成全局变量或者navigator对象的属性
  • 不再需要对象作为命名空间(比如Math对象),未来这些功能可以通过模块提供

静态加载带来的好处

commonJS

require实际上是整体加载fs模块,然后在需要使用的时候使用

1
2
3
4
5
6
7
8
// CommonJS模块
let { stat, exists, readFile } = require('fs')

// 等同于
let _fs = require('fs')
let stat = _fs.stat
let exists = _fs.exists
let readfile = _fs.readfile

ES6

ES6中的import可以在编译时,按照需要去加载所需要的模块,这个时候就相当于只加载了大括号里的3个方法,相比上面CommonJS中使用require加载整个fs模块好很多

1
import { stat, exists, readFile } from 'fs'

ES6中Module语法

模块功能主要由两个命令构成:exportimport

export命令

规定对外接口

输出变量

1
2
3
4
// poeple.js
export var name = 'zhangsan'
export var height = 180
export var age = 18

上述代码认为是一个模块,利用export向外输出三个变量

也可以在大括号内一块输出

1
2
3
4
5
6
// poeple.js
var name = 'zhangsan'
var height = 180
var age = 18

export { name, height, age }

输出函数或类

1
2
3
export function add (x, y) {
return x + y
}

输出变量改别名

利用as关键字

1
2
3
4
5
6
7
8
function a1 () {}
function a2 () {}
function a3 () {}
export {
a1 as s1,
a2 as s2,
a3 as s3
}

import命令

加载模块

1
2
3
4
5
import { name, height, age } from './people.js'

function getPeople () {
return `${name} is ${height} cm`
}

import语句可以选择性的只加载需要的模块,更加节省了资源

模块的整体加载

星号(*)指定一个对象,所有输出值都加载在这个对象上面

那上面的例子

1
import * as people from './people.js'

export default命令

从前面的例子可以看出,使用import命令的时候,用户需要知道所要加载的变量名或函数名,否则无法加载

为了给用户提供方便,让他们不用阅读文档就能加载模块,就要用到export default命令,为模块指定默认输出

1
2
3
4
// export-default.js
export default function () {
console.log('foo')
}

其他模块加载该模块时,import命令可以为该匿名函数指定任意名字

1
2
3
// import-default.js
import something from './export-default'
something() // 'foo'

跨模块常量

const声明的常量只在当前代码块有效。如果想设置跨模块的常量(即跨多个文件),或者说一个值要被多个模块共享,可以采用下面的写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// constants.js 模块
export const A = 1;
export const B = 3;
export const C = 4;

// test1.js 模块
import * as constants from './constants';
console.log(constants.A); // 1
console.log(constants.B); // 3

// test2.js 模块
import {A, B} from './constants';
console.log(A); // 1
console.log(B); // 3

ES6中的Module加载实现

在浏览器和 Node 之中加载 ES6 模块

浏览器加载

浏览器加载 ES6 模块,也使用<script>标签,但是要加入type="module"属性,以此属性告诉浏览器,这加载的是一个 ES6 模块

1
<script type="module" src="./foo.js"></script>

该加载是异步加载,不会造成阻塞,按出现顺序加载,相当于H5中的defer

1
2
3
<script type="module" src="./foo.js"></script>
<!-- 等同于 -->
<script type="module" src="./foo.js" defer></script>

同样的可以使用async属性,但此时不按顺序加载,依然是异步的,只不过不知道会先加载哪一个

1
<script type="module" src="./foo.js" async></script>

文章推荐

参考文章

本文标题:ES6中Module语法与加载实现

文章作者:王工头

发布时间:2019年01月31日 - 17:29:43

最后更新:2019年01月31日 - 23:39:26

原始链接:https://qqqww.com/ES6中Module语法与加载实现/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------本文结束感谢大佬们的阅读-------------