JavaScript模块(ES6)

在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，但估计没人会这么做。

JavaScript模块(ES6)