历史上,JavaScript一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如Ruby的require、Python的import,甚至就连CSS都有@import,但是JavaScript任何这方面的支持都没有,这对开发大型的、复杂的项目形成了巨大障碍。
ES6模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS和AMD模块,都只能在运行时确定这些东西。比如,CommonJS模块就是对象,输入时必须查找对象属性。
ES6模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS和AMD模块,都只能在运行时确定这些东西。比如,CommonJS模块就是对象,输入时必须查找对象属性:
// CommonJS模块
let { stat, exists, readFile } = require('fs');
// 等同于
let _fs = require('fs');
let stat = _fs.stat, exists = _fs.exists, readfile = _fs.readfile;
上面代码的实质是整体加载fs模块(即加载fs的所有方法),生成一个对象(_fs),然后再从这个对象上面读取3个方法。这种加载称为“运行时加载”,因为只有运行时才能得到这个对象,导致完全没办法在编译时做“静态优化”。
ES6模块不是对象,而是通过export命令显式指定输出的代码,输入时也采用静态命令的形式。
// ES6模块
import { stat, exists, readFile } from 'fs';
上面代码的实质是从fs模块加载3个方法,其他方法不加载。这种加载称为“编译时加载”,即ES6可以在编译时就完成模块加载,效率要比CommonJS模块的加载方式高。当然,这也导致了没法引用ES6模块本身,因为它不是对象。
浏览器使用ES6模块的语法如下:
<script type="module" src="foo.js"></script>
上面代码在网页中插入一个模块foo.js,由于type属性设为module,所以浏览器知道这是一个ES6模块。
严格模式
ES6的模块自动采用严格模式,不管你有没有在模块头部加上”use strict”;。
严格模式主要有以下限制。
- 变量必须声明后再使用
- 函数的参数不能有同名属性,否则报错
- 不能使用with语句
- 不能对只读属性赋值,否则报错
- 不能使用前缀0表示八进制数,否则报错
- 不能删除不可删除的属性,否则报错
- 不能删除变量delete prop,会报错,只能删除属性delete global[prop]
- eval不会在它的外层作用域引入变量
- eval和arguments不能被重新赋值
- arguments不会自动反映函数参数的变化
- 不能使用arguments.callee
- 不能使用arguments.caller
- 禁止this指向全局对象
- 不能使用fn.caller和fn.arguments获取函数调用的堆栈
- 增加了保留字(比如protected、static和interface)
export命令
一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。
使用export可以输出变量,方法,类:
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
function multiply(x, y) {
return x * y;
};
class Person {
}
export {
firstName,
lastName,
year,
multiply as mul,
Person
};
export语句输出的接口,与其对应的值是动态绑定关系,即通过该接口,可以取到模块内部实时的值。
上面的例子中如果5秒后year变量变成了2016,那5秒后你在外面读到的也是2016。
setTimeout(() => year = 2016, 5000);
最后,export命令可以出现在模块的任何位置,只要处于模块顶层就可以。如果处于块级作用域内,就会报错,import命令也是如此。这是因为处于条件代码块之中,就没法做静态优化了,违背了ES6模块的设计初衷。
import
使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件)。
import {firstName, lastName, mul, year} from './ModuleC';
大括号里面的变量名,必须与被导入模块对外接口的名称相同。如果想为输入的变量重新取一个名字,import命令要使用as关键字,将输入的变量重命名。
import命令具有提升效果,会提升到整个模块的头部,首先执行。
如果有很多变量不想一个一个写可以直接这样:
import * as module from './ModuleC';
module.year;
如果只是想运行一个模块而不加载:
import 'lodash';
export default
从前面的例子可以看出,使用import命令的时候,用户需要知道所要加载的变量名或函数名,否则无法加载。但是,用户肯定希望快速上手,未必愿意阅读文档,去了解模块有哪些属性和方法。
为了给用户提供方便,让他们不用阅读文档就能加载模块,就要用到export default命令,为模块指定默认输出。
// 输出
export default function crc32() {
// ...
}
// 输入
import crc32 from 'crc32';
显然,一个模块只能有一个默认输出,因此export deault命令只能使用一次。所以,import命令后面才不用加大括号,因为只可能对应一个方法。
本质上,export default就是输出一个叫做default的变量或方法,然后系统允许你为它取任意名字。所以,下面的写法是有效的。
export {add as default};
// 等同于
// export default add;
如果想在一条import语句中,同时输入默认方法和其他变量,可以写成下面这样。
import customName, { otherMethod } from './export-default';
模块的继承
假设有一个circleplus模块,继承了circle模块。
export * from 'circle';
export var e = 2.71828182846;
export default function(x) {
return Math.exp(x);
}
上面代码中的export ,表示再输出circle模块的所有属性和方法。注意,export 命令会忽略circle模块的default方法。然后,上面代码又输出了自定义的e变量和默认方法。
ES6模块加载的实质
ES6模块加载的机制,与CommonJS模块完全不同。CommonJS模块输出的是一个值的拷贝,而ES6模块输出的是值的引用。
我们先来看下一个CommonJS的例子:
// lib.js
var counter = 3;
function incCounter() {
counter++;
}
module.exports = {
counter: counter,
incCounter: incCounter,
};
// main.js
var mod = require('./lib');
console.log(mod.counter); // 3
mod.incCounter();
console.log(mod.counter); // 3
上面代码说明,lib.js模块加载以后,它的内部变化就影响不到输出的mod.counter了。这是因为mod.counter是一个原始类型的值,会被缓存。除非写成一个函数,才能得到内部变动后的值:
// lib.js
var counter = 3;
function incCounter() {
counter++;
}
module.exports = {
get counter() {
return counter
},
incCounter: incCounter,
};
ES6模块的运行机制与CommonJS不一样,它遇到模块加载命令import时,不会去执行模块,而是只生成一个动态的只读引用。等到真的需要用到时,再到模块里面去取值,换句话说,ES6的输入有点像Unix系统的“符号连接”,原始值变了,import输入的值也会跟着变。因此,ES6模块是动态引用,并且不会缓存值,模块里面的变量绑定其所在的模块。
// lib.js
export let counter = 3;
export function incCounter() {
counter++;
}
// main.js
import { counter, incCounter } from './lib';
console.log(counter); // 3
incCounter();
console.log(counter); // 4
由于ES6输入的模块变量,只是一个“符号连接”,所以这个变量是只读的,对它进行重新赋值会报错:
// lib.js
export let obj = {};
// main.js
import { obj } from './lib';
obj.prop = 123; // OK
obj = {}; // TypeError
可以对obj添加属性,但是重新赋值就会报错。因为变量obj指向的地址是只读的,不能重新赋值,这就好比main.js创造了一个名为obj的const变量。
最后,export通过接口,输出的是同一个值。不同的脚本加载这个接口,得到的都是同样的实例。
循环加载
“循环加载”(circular dependency)指的是,a脚本的执行依赖b脚本,而b脚本的执行又依赖a脚本。
CommonJS模块的加载原理
CommonJS的一个模块,就是一个脚本文件。require命令第一次加载该脚本,就会执行整个脚本,然后在内存生成一个对象。
{
id: '...',
exports: { ... },
loaded: true,
...
}
该对象的id属性是模块名,exports属性是模块输出的各个接口,loaded属性是一个布尔值,表示该模块的脚本是否执行完毕。其他还有很多属性,这里都省略了。
以后需要用到这个模块的时候,就会到exports属性上面取值。即使再次执行require命令,也不会再次执行该模块,而是到缓存之中取值。也就是说,CommonJS模块无论加载多少次,都只会在第一次加载时运行一次,以后再加载,就返回第一次运行的结果,除非手动清除系统缓存。
CommonJS模块的循环加载
CommonJS模块的重要特性是加载时执行,即脚本代码在require的时候,就会全部执行。一旦出现某个模块被”循环加载”,就只输出已经执行的部分,还未执行的部分不会输出。
我们来看一个例子,假设a和b互相引用彼此
a.js:
//a先开始执行
exports.done = false;
//执行到这句时发现引用了b,转去执行b,这时a并没有执行完
var b = require('./b.js');
//这里从b跳回来了,由于b已经执行完了:在 a.js 之中,b.done = true
console.log('在 a.js 之中,b.done = %j', b.done);
exports.done = true;
//a执行完,循环加载处理结束
console.log('a.js 执行完毕');
b.js:
//由于a里引用了b,b开始执行了
exports.done = false;
//执行到这里发现引用了a,a已经执行了,不会再执行一遍
//而是从已经生成的模块a的对象中获取exports属性的值赋给变量a
var a = require('./a.js');
//由于a并没有执行完,所以这里输出的是:在 b.js 之中,a.done = false
console.log('在 b.js 之中,a.done = %j', a.done);
exports.done = true;
//接下来b没有打扰的执行完了,转回a
console.log('b.js 执行完毕');
main.js:
//开始执行a
var a = require('./a.js');
//这里要注意了,执行到这里的时候b是已经执行一遍的,b不会再执行一遍,而是直接去取内存中b对应的那个对象,否则输出不会是下面这个样子
var b = require('./b.js');
console.log('在 main.js 之中, a.done=%j, b.done=%j', a.done, b.done);
输出:
//在 b.js 之中,a.done = false
//b.js 执行完毕
//在 a.js 之中,b.done = true
//a.js 执行完毕
//在 main.js 之中, a.done=true, b.done=true
ES6模块的循环加载
ES6处理“循环加载”与CommonJS有本质的不同。ES6模块是动态引用,如果使用import从一个模块加载变量(即import foo from ‘foo’),那些变量不会被缓存,而是成为一个指向被加载模块的引用,需要开发者自己保证,真正取值的时候能够取到值。
我们还是来看a和b互相引用的例子,我们直接执行a:
// a.js如下
//a首先加载b,所以先执行b
import {bar} from './b.js';
console.log('a.js');
//这时b已经执行完了,所以bar是有的,输出'bar'
console.log(bar);
export let foo = 'foo';
// b.js
//开始执行b时a已经执行了,所以不会重复执行,而是继续往下执行b
import {foo} from './a.js';
console.log('b.js');
//这时由于a没有执行完,foo值没有,所以这里输出undefined
console.log(foo);
export let bar = 'bar';
//b执行完,转回去执行a
输出:
$ babel-node a.js
b.js
undefined
a.js
bar
我们来看一个复杂一点的例子:
// even.js
//转去执行odd
import { odd } from './odd'
//这是第二行输出
console.log('in even');
export var counter = 0;
//这句执行完,由于是引用,在odd模块里的even函数就真正有了意义
export function even(n) {
counter++;
//这里的odd函数由于odd模块已经执行完所以可以直接获取到真正的函数
return n == 0 || odd(n - 1);
}
// odd.js
//由于even已经执行了,even指向even模块导出的even的引用
import { even } from './even';
//第一行输出这个
console.log('in odd');
export function odd(n) {
//这里虽然其实并没有even实际的函数,但是引用是存在的
//等一会儿跳回even执行完,这个函数就有实际的作用了
//而在CommonJS中,这里会去读even模块生成的对象中的exports中的值
//这时exports中的这个值还是undefined,这里就报错了
return n != 0 && even(n - 1);
}
//执行完odd回去执行even
运行:
//先执行even
import * as m from './even.js';
console.log(m.even(10));
//true
console.log(m.counter);
//6
console.log(m.even(20));
//true
console.log(m.counter);
//17
跨模块常量
const声明的常量只在当前代码块有效。如果想设置跨模块的常量(即跨多个文件),可以采用下面的写法。
// constants.js 模块
export const A = 1;
export const B = 3;
export const C = 4;
// test1.js 模块
import * as constants from './constants';
console.log(constants.A); // 1
console.log(constants.B); // 3
// test2.js 模块
import {A, B} from './constants';
console.log(A); // 1
console.log(B); // 3