超级厉害的JavaScript —— ECMAScript 6 标准（14） —— Module

什么是Module

Module就是ES6使JavaScript原生支持模块体系，现在一个.js文件就是一个模块了。既然是模块，Module的全部操作都是围绕import和export两个命令展开的。

---

export

有了模块，首先就是要约定导出了什么，这时就需要export命令了：

// profile.jsexport var firstName = 'Michael';export function multiply(x, y) {};//一次输出多个var firstName = 'Michael';var lastName = 'Jackson';var year = 1958;export {firstName, lastName, year};

需要注意的是，如果直接输出变量名是会报错的：

// 报错export 1;// 报错var m = 1;export m;// 正确export var m = 1;// 正确，建议使用这种形式var m = 1;export {m};

另外，export输出的值是动态绑定的：

// 报错export 1;// 报错var m = 1;export m;// 正确export var foo = 'bar';setTimeout(() => foo = 'baz', 500);

500毫秒后输出的变量的值会是baz。

---

import

import命令就是加载export命令定义的对外接口。import接受一对大括号，指定要从模块里导入的变量，大括号里面的变量名，必须与模块里的对外接口名称相称：

// main.js，//./profile里面export了firstName, lastName, yearimport {firstName, lastName, year} from './profile';function setName(element) {  element.textContent = firstName + ' ' + lastName;}

这里.js路径是可以省略。
import命令是编译阶段执行的，所以不能使用表达式和变量

// 报错import { 'f' + 'oo' } from 'my_module';

补一句，import语句是 Singleton 模式。

---

export default

当export的时候，会定义了对外接口，import的时候也要定义一样的对外接口接收。现在我不想直到输出模块做什么，只管import就好，这时就要用export default：

export default function () {  console.log('foo');}//这样import的时候就可以不用"{}"，也可以随便命名import customName from './export-default';customName(); // 'foo'

不过export default只能使用一次，因为有两个default，导入的时候就不直到是哪一个了。
使用export default的同时，其实也能export其他变量或方法：

import default, { each } from 'lodash';

这里default就要放在”{ } “外面，其他对外接口就要在”{ } “里面。

---

as

as是别名操作，在import和export操作中都可以使用：

import { v2 as streamV2} from './profile';export {v1 as streamV1};

这样import后的v2接口就使用streamV2变量；export后的v1变量就使用streamV1作为对外接口。

*

*是在加载的时候使用整体加载，不需要一个个列出对外接口。
circle.js现在有两个对外接口area和circumference：

// circle.jsexport function area(radius) {  return Math.PI * radius * radius;}export function circumference(radius) {  return 2 * Math.PI * radius;}

使用*就会整体加载这两个对外接口，并构成一个对象：

import * as circle from './circle';console.log('圆面积：' + circle.area(4));console.log('圆周长：' + circle.circumference(14));

注意，import的时候使用了别名构成circle对象，不然就没地方放方放了。

---