程序员

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