在ES6之前，为了实现JS模块化，出现了很多标准，通用的有CommonJS和AMD。ES6终于将模块设计标准化了，和CommonJS和AMD不同之处在于，ES6的模块已经静态化了，能在编译时就确定模块的依赖关系，输入输出变量，而不必等到运行时才去确定这些东西。
（本篇参照了阮一峰的《ES6标准入门》一书的Module章节，建议大家购买学习。）
例如，CommonJS标准里：
let { stat, exists, readFile } = require('fs');
上例中加载fs模块后，会生成一个匿名module.exports对象，里面包含了在fs内所有暴露出来的接口。再从这些接口中取出stat，exists，readFile赋值给同名的局部变量。这就是运行时加载，只有代码执行到require时才能得到这个对象。
ES6的模块module不是对象，而是用export命令将需要的代码整体输出，用import命令将需要的代码整体输入。例如改写成：
import { stat, exists, readFile } from 'fs';
在编译时就能完成加载，且只加载这3个方法，其他方法不加载。这就是编译时加载，效率要比CommonJS要高。
ES6中模块的语法用export和import。
export
和CommonJS一样，每个模块都是一个独立的文件，用export暴露出变量和方法：
export var name = 'Jack';
export var location = 'Shanghai';
export function add(n1, n2) {
return n1 + n2;
};
上面这样语法上是OK的，export可以出现在文件的顶层作用域的任何位置（但不能出现在非顶层作用域，即块级作用域内不能出现export。Import同样如此）。但并不是最佳实践。通常会将需要暴露的变量和方法用大括号包起来，放在文件末尾。这样该模块对外暴露了哪些内容就一目了然了：
var name = 'Jack';
var location = 'Shanghai';
function add(n1, n2) {
return n1 + n2;
}
export {name, location, add};
可以用default关键字为懒得去查接口文档的用户提供一个默认接口，显然一个模块可以暴露出任意多的接口，但default接口最多只能有一个。例如：
export default function () {
console.log('default interface');
};
用default暴露的接口是个匿名接口，import时可以为该匿名接口随意起名：
import showLog from './sampleModule';
showLog(); //default interface
因为default暴露的接口是个匿名接口，因此你就算改成：
export default function show() { … }
//或者
function show() { … }
export default show;
在模块外部，show也是不可见的，import后仍旧是个匿名接口。
现实中常用export default输出类：
export default class { ... }
import MyClass from './MyClass';
还有些小细节，例如通常export输出的接口就是本来的名字，但是可以使用as关键字重命名：
export {name as personName, location, add};
import
上面sampleModule.js模块的代码：
var name = 'Jack';
var location = 'Shanghai';
function add(n1, n2) {
return n1 + n2;
}
export default function () {
console.log('default interface');
};
export {name, location, add};
用import来加载其他JS模块中用export暴露出来的内容：
import {name, location, add} from './sampleModule';
语法和CommonJS的require命令没啥区别。如果觉得模块的接口名不太好，可以用as关键字重新取个合适的名字：
import { add as addScore } from './sampleModule';
上面这样用大括号可以加载模块暴露出来的某些接口，但要加载export default默认接口时，import语句后面不需要大括号，直接给匿名接口起名即可：
import showLog from './sampleModule';
要在一条import语句中，同时加载默认接口和其他接口，可以这样：
import showLog, {name, location, add} from './sampleModule';
如果想加载除default外的所有接口，可以简单点用星号代替（注意无法加载default接口）：
import * as sample from './sampleModule';
console.log(sample.name); //Jack
console.log(sample.location); //Shanghai
console.log(sample.add(1,2)); //3
还有些小细节可以知道一下，例如import会自动提升到头部并率先执行，所以就算你在文件末尾import也OK，但估计没人会这么做。
网友评论