diff --git a/docs/module.md b/docs/module.md
index be2a4a3..8eba4bc 100644
--- a/docs/module.md
+++ b/docs/module.md
@@ -1,12 +1,10 @@
# Module
-ES6的Class只是面向对象编程的语法糖,升级了ES5的构造函数的原型链继承的写法,并没有解决模块化问题。Module功能就是为了解决这个问题而提出的。
+历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如 Ruby 的`require`、Python 的`import`,甚至就连 CSS 都有`@import`,但是 JavaScript 任何这方面的支持都没有,这对开发大型的、复杂的项目形成了巨大障碍。
-历史上,JavaScript一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如Ruby的`require`、Python的`import`,甚至就连CSS都有`@import`,但是JavaScript任何这方面的支持都没有,这对开发大型的、复杂的项目形成了巨大障碍。
+在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。
-在ES6之前,社区制定了一些模块加载方案,最主要的有CommonJS和AMD两种。前者用于服务器,后者用于浏览器。ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案。
-
-ES6模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS和AMD模块,都只能在运行时确定这些东西。比如,CommonJS模块就是对象,输入时必须查找对象属性。
+ES6 模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS 和 AMD 模块,都只能在运行时确定这些东西。比如,CommonJS 模块就是对象,输入时必须查找对象属性。
```javascript
// CommonJS模块
@@ -19,36 +17,26 @@ let stat = _fs.stat, exists = _fs.exists, readfile = _fs.readfile;
上面代码的实质是整体加载`fs`模块(即加载`fs`的所有方法),生成一个对象(`_fs`),然后再从这个对象上面读取3个方法。这种加载称为“运行时加载”,因为只有运行时才能得到这个对象,导致完全没办法在编译时做“静态优化”。
-ES6模块不是对象,而是通过`export`命令显式指定输出的代码,输入时也采用静态命令的形式。
+ES6 模块不是对象,而是通过`export`命令显式指定输出的代码,再通过`import`命令输入。
```javascript
// ES6模块
import { stat, exists, readFile } from 'fs';
```
-上面代码的实质是从`fs`模块加载3个方法,其他方法不加载。这种加载称为“编译时加载”,即ES6可以在编译时就完成模块加载,效率要比CommonJS模块的加载方式高。当然,这也导致了没法引用ES6模块本身,因为它不是对象。
+上面代码的实质是从`fs`模块加载3个方法,其他方法不加载。这种加载称为“编译时加载”或者静态加载,即 ES6 可以在编译时就完成模块加载,效率要比 CommonJS 模块的加载方式高。当然,这也导致了没法引用 ES6 模块本身,因为它不是对象。
-由于ES6模块是编译时加载,使得静态分析成为可能。有了它,就能进一步拓宽JavaScript的语法,比如引入宏(macro)和类型检验(type system)这些只能靠静态分析实现的功能。
+由于 ES6 模块是编译时加载,使得静态分析成为可能。有了它,就能进一步拓宽 JavaScript 的语法,比如引入宏(macro)和类型检验(type system)这些只能靠静态分析实现的功能。
-除了静态加载带来的各种好处,ES6模块还有以下好处。
+除了静态加载带来的各种好处,ES6 模块还有以下好处。
-- 不再需要UMD模块格式了,将来服务器和浏览器都会支持ES6模块格式。目前,通过各种工具库,其实已经做到了这一点。
-- 将来浏览器的新API就能用模块格式提供,不再必要做成全局变量或者`navigator`对象的属性。
+- 不再需要`UMD`模块格式了,将来服务器和浏览器都会支持 ES6 模块格式。目前,通过各种工具库,其实已经做到了这一点。
+- 将来浏览器的新 API 就能用模块格式提供,不再必要做成全局变量或者`navigator`对象的属性。
- 不再需要对象作为命名空间(比如`Math`对象),未来这些功能可以通过模块提供。
-浏览器使用ES6模块的语法如下。
-
-```html
-
-```
-
-上面代码在网页中插入一个模块`foo.js`,由于`type`属性设为`module`,所以浏览器知道这是一个ES6模块。
-
-Node的默认模块格式是CommonJS,目前还没决定怎么支持ES6模块。所以,只能通过Babel这样的转码器,在Node里面使用ES6模块。
-
## 严格模式
-ES6的模块自动采用严格模式,不管你有没有在模块头部加上`"use strict";`。
+ES6 的模块自动采用严格模式,不管你有没有在模块头部加上`"use strict";`。
严格模式主要有以下限制。
@@ -68,13 +56,13 @@ ES6的模块自动采用严格模式,不管你有没有在模块头部加上`"
- 不能使用`fn.caller`和`fn.arguments`获取函数调用的堆栈
- 增加了保留字(比如`protected`、`static`和`interface`)
-上面这些限制,模块都必须遵守。由于严格模式是ES5引入的,不属于ES6,所以请参阅相关ES5书籍,本书不再详细介绍了。
+上面这些限制,模块都必须遵守。由于严格模式是 ES5 引入的,不属于 ES6,所以请参阅相关 ES5 书籍,本书不再详细介绍了。
-## export命令
+## export 命令
模块功能主要由两个命令构成:`export`和`import`。`export`命令用于规定模块的对外接口,`import`命令用于输入其他模块提供的功能。
-一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用`export`关键字输出该变量。下面是一个JS文件,里面使用`export`命令输出变量。
+一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用`export`关键字输出该变量。下面是一个 JS 文件,里面使用`export`命令输出变量。
```javascript
// profile.js
@@ -188,13 +176,12 @@ foo()
上面代码中,`export`语句放在函数之中,结果报错。
-## import命令
+## import 命令
-使用`export`命令定义了模块的对外接口以后,其他JS文件就可以通过`import`命令加载这个模块(文件)。
+使用`export`命令定义了模块的对外接口以后,其他 JS 文件就可以通过`import`命令加载这个模块。
```javascript
// main.js
-
import {firstName, lastName, year} from './profile';
function setName(element) {
@@ -202,14 +189,22 @@ function setName(element) {
}
```
-上面代码的`import`命令,就用于加载`profile.js`文件,并从中输入变量。`import`命令接受一个对象(用大括号表示),里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(`profile.js`)对外接口的名称相同。
+上面代码的`import`命令,用于加载`profile.js`文件,并从中输入变量。`import`命令接受一对大括号,里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(`profile.js`)对外接口的名称相同。
-如果想为输入的变量重新取一个名字,import命令要使用`as`关键字,将输入的变量重命名。
+如果想为输入的变量重新取一个名字,`import`命令要使用`as`关键字,将输入的变量重命名。
```javascript
import { lastName as surname } from './profile';
```
+`import`后面的`from`指定模块文件的位置,可以是相对路径,也可以是绝对路径,`.js`路径可以省略。如果只是模块名,不带有路径,那么必须有配置文件,告诉 JavaScript 引擎该模块的位置。
+
+```javascript
+import {myMethod} from 'util';
+```
+
+上面代码中,`util`是模块文件名,由于不带有路径,必须通过配置,告诉引擎怎么取到这个模块。
+
注意,`import`命令具有提升效果,会提升到整个模块的头部,首先执行。
```javascript
@@ -218,7 +213,56 @@ foo();
import { foo } from 'my_module';
```
-上面的代码不会报错,因为`import`的执行早于`foo`的调用。
+上面的代码不会报错,因为`import`的执行早于`foo`的调用。这种行为的本质是,`import`命令是编译阶段执行的,在代码运行之前。
+
+由于`import`是静态执行,所以不能使用表达式和变量,这些只有在运行时才能得到结果的语法结构。
+
+```javascript
+// 报错
+import { 'f' + 'oo' } from 'my_module';
+
+// 报错
+let module = 'my_module';
+import { foo } from module;
+
+// 报错
+if (x === 1) {
+ import { foo } from 'module1';
+} else {
+ import { foo } from 'module2';
+}
+```
+
+上面三种写法都会报错,因为它们用到了表达式、变量和`if`结构。在静态分析阶段,这些语法都是没法得到值的。
+
+最后,`import`语句会执行所加载的模块,因此可以有下面的写法。
+
+```javascript
+import 'lodash';
+```
+
+上面代码仅仅执行`lodash`模块,但是不输入任何值。
+
+如果多次重复执行同一句`import`语句,那么只会执行一次,而不会执行多次。
+
+```javascript
+import 'lodash';
+import 'lodash';
+```
+
+上面代码加载了两次`lodash`,但是只会执行一次。
+
+```javascript
+import { foo } from 'my_module';
+import { bar } from 'my_module';
+
+// 等同于
+import { foo, bar } from 'my_module';
+```
+
+上面代码中,虽然`foo`和`bar`在两个语句中加载,但是它们对应的是同一个`my_module`实例。也就是说,`import`语句是 Singleton 模式。
+
+## export 与 import 复合的写法
如果在一个模块之中,先输入后输出同一个模块,`import`语句可以与`export`语句写在一起。
@@ -235,21 +279,13 @@ export default es6;
另外,ES7有一个[提案](https://github.com/leebyron/ecmascript-more-export-from),简化先输入后输出的写法,拿掉输出时的大括号。
```javascript
-// 提案的写法
-export v from 'mod';
-
// 现行的写法
export {v} from 'mod';
+
+// 提案的写法
+export v from 'mod';
```
-`import`语句会执行所加载的模块,因此可以有下面的写法。
-
-```javascript
-import 'lodash';
-```
-
-上面代码仅仅执行`lodash`模块,但是不输入任何值。
-
## 模块的整体加载
除了指定加载某个输出值,还可以使用整体加载,即用星号(`*`)指定一个对象,所有输出值都加载在这个对象上面。
@@ -612,6 +648,24 @@ $ babel-node main.js
这就证明了`x.js`和`y.js`加载的都是`C`的同一个实例。
+## 浏览器的模块加载
+
+浏览器使用 ES6 模块的语法如下。
+
+```html
+
+```
+
+上面代码在网页中插入一个模块`foo.js`,由于`type`属性设为`module`,所以浏览器知道这是一个 ES6 模块。
+
+浏览器对于带有`type="module"`的`