如臂使指 ：JS 中的 Module 语法

前言

 从前 JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的 require、Python 的 import，甚至就连 CSS 都有 @import，而 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目开发形成了巨大的障碍。

在 ES6 之前，最主要的模块加载方案是用于服务器的 CommonJS，以及用于浏览器的 AMD。

而 ES6 在语言标准的层面上，以一种非常简单的方式实现了模块功能，成为浏览器和服务器通用的模块解决方案。

下面来逐步深入地看一下它的具体用法和应用场景。

---

「 静态加载 」

ES6 模块不是对象，而是通过 export 命令显式指定输出的代码，再通过 import 命令输入。

// ES6模块
import { mapState } from 'vueX'

上面代码的实质是从 vueX 模块加载 mapState 方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。

但同时也导致了没法引用 ES6 模块本身，因为它不是对象。

编译时加载使得静态分析成为可能，可以进一步拓宽 JavaScript 的语法，比如引入 宏（macro）和 类型检验（type system）等只能靠静态分析实现的功能。

「 严格模式 」

ES6 的模块自动采用严格模式，不管开发者有没有在模块头部加上  ' use strict '。

「 export 」

模块功能主要由两个命令构成：export  和  import。

export 命令用于规定模块的对外接口，import 命令用于输入其他模块提供功能。

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。

希望外部能够读取模块内部的某个变量，就必须使用 export 关键字输出该变量。下面是一个 JS 文件，里面使用 export 命令输出变量。

export const firstName = '朱'
export const lastName = '明'
export const year = 1368

上面代码保存了用户信息，ES6将其视作一个模块，里面用 export 命令对外部输出了三个变量。

除了像上面这样，export 的写法还有另外一种：

const firstName = '朱'
const lastName = '明'
const year = 1368

export { firstName, lastName, year }

上面代码在 export 命令后面，使用大括号指定所要输出的一组变量。这和前一种写法（直接放置在 const 语句前）是等价的，但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部，一眼看清楚输出了那些变量。

export 命令除了输出变量，还可以输出函数和类（class）。

export function mcTracer(x, y) {
  return x * y
}

上面代码对外输出一个函数 mcTracer 。

「 as 关键字重命名 」

通常情况下，export 输出的变量就是本来的名字，但是可以使用 as 关键字重命名。

function v1() { ... }
function v2() { ... }

export {
  v1 as version1,
  v2 as version2
}

上面代码使用 as 关键字，重命名了函数 v1 和 v2 的对外接口。

需要特别注意的是， export 命令规定的是对外的接口，必须与模块内部的变量建立一一对应的关系。

// 报错
export 1

// 报错
let m = 1
export m

上面两种写法都会报错，因为没有提供对外的接口。第一种写法直接输出 1，第二种写法通过变量 m，还是直接输出 1。1只是一个值，不是接口。正确的写法是下面这样。

// 写法一
export let m = 1

// 写法二
let m = 1
export { m }

// 写法三
let n = 1
export {n as m}

上面展示了三种正确的写法，规定了对外的接口 m。其他脚本可以通过这个接口，取到值1。它们实质上是在接口名和模块内部变量之间建立了一一对应的关系。

同样的，function 和 class 的输出，也必须遵守这样的写法。

// 报错
function f() {}
export f

// 正确
export function f() {}

// 正确
function f() {}
export { f }

另外，export 语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。

export let heart = '宋'
setTimeout(() => heart = '明', 400)

上面代码输出变量 heart，值为 ‘宋’，400毫秒之后变成 ‘明’，这一点与 CommonJS 规范完全不同。

export 命令可以出现在模块的任何位置，只要处于模块顶层就可以。

但处于块级作用域内会报错

import 命令也是如此。这样做的原因，是为了秉承「静态优化」的初衷。

function foo() {
  export default 'bar'
  // SyntaxError
}
foo()

上面代码中，export 语句放在函数之中，结果报错。

 「 import 」

使用 export 命令定义了模块的对外接口之后，其他的 JS 文件就可以通过 import 命令加载这个模块。

// main.js

import { firstName, lastName, year } from './mingDynasty.js'

function setName(element) {
  element.textContent = firstName + ' ' + lastName
}

上面代码的 import 命令，用于加载 mingDynasty.js 文件，并从中输入变量。import 命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（mingDynasty.js）对外接口的名称相同。

如果想为输入的变量重新取一个名字， import 命令要使用 as 关键字，将输入变量重命名。

import { lastName as surname } from './mingDynasty.js'

import 命令输入的变量都是只读的，因为它的本质是输入接口。[

import {a} from './xxx.js'

a = {}

// Syntax Error : 'a' is read-only

上面代码中，脚本加载了变量a，对其重新赋值就会报错，因为a是一个只读的接口。但是，如果a是一个对象，改写a的属性是允许的。

import { a } from './xxx.js'

a.foo = 'hello'  // 合法操作

上面代码中，a的属性可以成功改写，并且其他模块也可以独到改写后的值。

不过，这种写法很难查错，建议凡是输入的变量，都当作完全只读，轻易不要改变它的属性。

import 后面的 from 指定模块文件的位置，可以是相对路径，也可以是绝对路径。如果只是模块名，不带有路径，那么必须有配置文件，告诉 JavaScript 引擎该模块的位置。

import { appMethod } from 'util'

上面代码中，util 是模块文件名，由于不带有路径，必须通过配置，告诉引擎怎么取到这个模块。

注意，import 命令具有提升效果，会提升到整个模块的头部，首先执行。

foo()

import { foo } from 'my_module'

上面的代码不会报错，因为 import 的执行早于 foo 的调用。这种行为的本质是，import 命令是编译阶段执行的，在代码执行之前。由于 import 是静态执行，所以不能使用表达式和变量，这些是只有在运行时才能得到结果的语法结构。

// 报错
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 语句会执行所加载的模块，因此可以有下面的写法。

import 'lodash'

上面代码仅仅执行 lodash 模块，但不是输入任何值。

如果多次重复执行用一句 import 语句，那么只会执行一次，而不会执行多次。

import 'lodash'
import 'lodash'

上面代码加载了两次 lodash，但是只会执行一次。

import { foo } from 'my_module'
import { bar } from 'my_module'

// 等同于
import { foo, bar } from 'my_module'

上面代码中，虽然 foo 和 bar 在两个语句中加载，但是它们对应得的是同一个 my_module 实例。也就是说，import 语句是 Singleton 模式。

目前阶段，通过 Babel 转码， CommonJS 模块的 require 命令和 ES6 模块的 import 命令，可以写在同一个模块里面，但是最好不要这样做。因为 import 在静态解析阶段执行，所以它是一个模块之中最早执行的。下面的代码可能不会得到预期结果。

require('core-js/modules/es6.symbol')
require('core-js/modules/es6.promise')
import React from 'React'

「 模块的整体加载 」

除了指定加载某个输出值，还可以使用整体加载，即用星号（ * ）指定一个对象，所有输出值都加载在这个对象上面。

下面是一个 circle.js 文件，它输出两个方法 area 和 circumference。

// circle.js

export function area(radius) {
  return Math.PI * radius * radius
}

export function circumference(radius) {
  return 2 * Math.PI * radius
}

现在，加载这个模块。

// main.js

import { area, circumference } from './circle'

console.log('圆面积：' + area(4))
console.log('圆周长：' + circumference(14))

上面写法是逐一指定要加载的方法，整体加载的写法如下。

import * as circle from './circle'

console.log('圆面积：' + circle.area(4))
console.log('圆周长：' + circle.circumference(14))

注意，模块整体加载所在的那个对象（上例是circle），应该是可以静态分析的，所以不允许运行时改变。下面的写法都是不允许的。

import * as circle from './circle'

// 下面两行都是不允许的
circle.foo = 'hello'
circle.area = function () {}

「 export default 」

从前面的例子可以看出，使用 import 命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。

为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到 export default 命令，为模块指定默认输出。

// export-default.js
export default function () {
  console.log('foo')
}

上面代码是一个模块文件 export-default.js，它的默认输出是一个函数。

其他模块加载该模块时，import 命令可以为该匿名函数指定任意名字。

// import-default.js
import customName from './export-default'
customName() // 'foo'

上面代码的 import 命令，可以用任意名称指向 export - default.js 输出的方法，这时就不需要知道原模块输出的函数名。但是此时的 import 命令后面，不能用大括号。

export default 命令可以用在非匿名函数前：

// export-default.js
export default function foo() {
  console.log('foo')
}

// 或者写成

function foo() {
  console.log('foo')
}

export default foo

上面代码中，foo 函数的函数名 foo，在模块外外部是无效的。加载的时候，视同匿名函数的加载。

下面比较一下默认输出和正常输出：

// 第一组
export default function crc32() { // 输出
  // ...
}

import crc32 from 'crc32' // 输入

// 第二组
export function crc32() { // 输出
  // ...
}

import {crc32} from 'crc32' // 输入

上面的代码有两组写法，使用 export default 时，对应的 import 语句不需要使用大括号。不使用时，需要大括号。

本质上，export default 就是输出一个叫做 default 的变量或方法，然后系统允许你为他取任意名字。所以下面的写法是有效的。

// modules.js
function add(x, y) {
  return x * y
}
export { add as default }
// 等同于
// export default add

// app.js
import { default as foo } from 'modules'
// 等同于
// import foo from 'modules'

正是因为 export default 命令其实只是输出一个叫做 default 的变量，所以它后面不能跟变量声明语句。

// 正确
export var a = 1

// 正确
var a = 1
export default a

// 错误
export default var a = 1

上面代码中，export default a 的含义是将变量 a 的值赋给变量 default。所以，最后一种写法会报错。

同样地，因为 export default 命令的本质是将后面的值，赋给 default 变量，所以可以直接将一个值写在 export default 之后。

// 正确
export default 42

// 报错
export 42

上面代码中，最后一句报错是因为没有指定对外的接口，而前一句指定对外接口为 default。

有了 export default 命令，输入模块时就非常直观了，比如输入 lodash 模块为例：

import _ from 'lodash'

如果想在一条 import 语句中，同时输入默认方法和其他接口，可以写成下面这样：

import _, { each, forEach } from 'lodash'

对应上面代码的 export 语句如下：

export default function (obj) {
  // ···
}

export function each(obj, iterator, context) {
  // ···
}

export { each as forEach }

上面代码的最后一行的意思是，暴露出 forEach 接口，默认指向 each 接口，即 forEach 和 each 指向同一个方法。

export default 也可以用来输出类：

// MyClass.js
export default class { ... }

// main.js
import MyClass from 'MyClass'
let o = new MyClass()

「 export 与 import 的复合写法 」

如果在一个模块之中，先输入后输出同一个模块，import 语句可以与 export 语句写在一起。

export { foo, bar } from 'my_module'

// 可以简单理解为
import { foo, bar } from 'my_module'
export { foo, bar }

上面代码中，export 和 import 语句可以结合在一起，写成一行。但在这之后，foo 或 bar 实际上并没有被导入当前模块，只是相对于对外转发了这两个接口，导致当前模块不能直接使用 foo 和 bar。

模块的接口改名和整体输出，也可以采用这种写法。

// 接口改名
export { foo as myFoo } from 'my_module'

// 整体输出
export * from 'my_module'

默认接口的写法如下。

export { default } from 'foo'

具名接口改为默认接口的写法如下：

export { es6 as default } from './someModule'

// 等同于
import { es6 } from './someModule'
export default es6

同样地，默认接口也可以改名为具名接口：

export { default as es6 } from './someModule'

「 模块的继承 」

模块之间也可以继承。假设有一个 circleplus 模块，继承了 circle 模块。

// circleplus.js

export * from 'circle'
export let e = 2.71828182846
export default function(x) {
  return Math.exp(x)
}

上面代码中的 export *，表示再输出 circle 模块的所有属性和方法。注意，export *命令会忽略 circle 模块的 default 方法。然后，上面代码又输出了自定义的 e 变量和默认方法。

这时，也可以将 circle 的属性或方法，改名后再输出。

// circleplus.js

export { area as circleArea } from 'circle'

上面代码表示，只输出 circle 模块的 area 方法，且将其改名为 circleArea。

加载上面模块的写法如下：

// main.js

import * as math from 'circleplus'
import exp from 'circleplus'
console.log(exp(math.e))

上面代码中的 import exp 表示，将 circleplus 模块的默认方法加载为 exp 方法