ES6学习14（模块）

历史上，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.jsvar counter = 3;function incCounter() {  counter++;}module.exports = {  counter: counter,  incCounter: incCounter,};// main.jsvar mod = require('./lib');console.log(mod.counter);  // 3mod.incCounter();console.log(mod.counter); // 3

上面代码说明，lib.js模块加载以后，它的内部变化就影响不到输出的mod.counter了。这是因为mod.counter是一个原始类型的值，会被缓存。除非写成一个函数，才能得到内部变动后的值：

// lib.jsvar counter = 3;function incCounter() {  counter++;}module.exports = {  get counter() {    return counter  },  incCounter: incCounter,};

ES6模块的运行机制与CommonJS不一样，它遇到模块加载命令import时，不会去执行模块，而是只生成一个动态的只读引用。等到真的需要用到时，再到模块里面去取值，换句话说，ES6的输入有点像Unix系统的“符号连接”，原始值变了，import输入的值也会跟着变。因此，ES6模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。

// lib.jsexport let counter = 3;export function incCounter() {  counter++;}// main.jsimport { counter, incCounter } from './lib';console.log(counter); // 3incCounter();console.log(counter); // 4

由于ES6输入的模块变量，只是一个“符号连接”，所以这个变量是只读的，对它进行重新赋值会报错：

// lib.jsexport let obj = {};// main.jsimport { obj } from './lib';obj.prop = 123; // OKobj = {}; // 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 = trueconsole.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属性的值赋给变量avar a = require('./a.js');//由于a并没有执行完，所以这里输出的是：在 b.js 之中，a.done = falseconsole.log('在 b.js 之中，a.done = %j', a.done);exports.done = true;//接下来b没有打扰的执行完了，转回aconsole.log('b.js 执行完毕');

main.js：

//开始执行avar 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，所以先执行bimport {bar} from './b.js';console.log('a.js');//这时b已经执行完了，所以bar是有的，输出'bar'console.log(bar);export let foo = 'foo';// b.js//开始执行b时a已经执行了，所以不会重复执行，而是继续往下执行bimport {foo} from './a.js';console.log('b.js');//这时由于a没有执行完，foo值没有，所以这里输出undefinedconsole.log(foo);export let bar = 'bar';//b执行完，转回去执行a

输出：

$ babel-node a.jsb.jsundefineda.jsbar

我们来看一个复杂一点的例子：

// even.js//转去执行oddimport { 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

运行：

//先执行evenimport * as m from './even.js';console.log(m.even(10));//trueconsole.log(m.counter);//6console.log(m.even(20));//trueconsole.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); // 1console.log(constants.B); // 3// test2.js 模块import {A, B} from './constants';console.log(A); // 1console.log(B); // 3