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