基本概述#

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

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案

1
    // CommonJS模块
2
    let { stat, exists, readFile } = require('fs')
3

4
    // 等同于
5
    let _fs = require('fs')
6
    let stat = _fs.stat
7
    let exists = _fs.exists
8
    let readfile = _fs.readfile

上面代码的实质是整体加载fs模块(即加载fs的所有方法)，生成一个对象(_fs)，然后再从这个对象上面读取 3 个方法。这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”

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

1
  // ES6模块
2
  import { stat, exists, readFile } from "fs"

上面代码的实质是从fs模块加载 3 个方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。当然，这也导致了没法引用 ES6 模块本身，因为它不是对象

由于 ES6 模块是编译时加载，使得静态分析成为可能。有了它，就能进一步拓宽 JavaScript 的语法，比如引入宏(macro)和类型检验(type system)这些只能靠静态分析实现的功能。 除了静态加载带来的各种好处，ES6 模块还有以下好处。

• 不再需要UMD模块格式了，将来服务器和浏览器都会支持 ES6 模块格式。目前，通过各种工具库，其实已经做到了这一点。
• 将来浏览器的新 API 就能用模块格式提供，不再必须做成全局变量或者navigator对象的属性。
• 不再需要对象作为命名空间(比如Math对象)，未来这些功能可以通过模块提供。

严格模式#

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)

上面这些限制，模块都必须遵守。 其中，尤其需要注意this的限制。ES6 模块之中，顶层的this指向undefined，即不应该在顶层代码使用this

export 命令#

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

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

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。 如果您希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。

1
    export var firstName = 'Michael'
2
    export var lastName = 'Jackson'
3
    export function fun() {
4
      console.log("fun");
5
  }

1
    var firstName = 'Michael'
2
    var lastName = 'Jackson'
3
    function fun() {
4
      console.log("fun");
5
  }
6

7
    export { firstName, lastName, fun }

import 命令#

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

1
  import { firstName, lastName, fun } from "./profile.js"

1
  import { lastName as surname } from "./profile.js"

1
    import * as info from './profile.js'

1
  import * as info from './profile.js'
2
  info.firstName = 'a'
3
  // Cannot assign to read only property 'firstName' of object '[object Module]'

export default 命令#

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

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

1
    export default function () {
2
        console.log('foo')
3
    }

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

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

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

export default命令用在非匿名函数前，也是可以的

1
    export default function foo() {
2
        console.log('foo')
3
    }
4

5
    // 或者写成
6

7
    function foo() {
8
        console.log('foo')
9
    }
10

11
    export default foo

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

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

1
    // 第一组
2
    export default function crc32() {
3
        // 输出
4
        // ...
5
    }
6

7
    import crc32 from 'crc32' // 输入
8

9
    // 第二组
10
    export function crc32() {
11
        // 输出
12
        // ...
13
    }
14

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

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

export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。所以，import 命令后面才不用加大括号，因为只可能唯一对应export default命令。

本质上，export default就是输出一个叫做default的变量或方法，然后系统允许您为它取任意名字

所以，下面的写法是有效的

1
    function add(x, y) {
2
        return x * y
3
    }
4
    export { add as default }
5
    // 等同于
6
    // export default add
7

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

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

1
    // 正确
2
    export var a = 1
3

4
    // 正确
5
    var a = 1
6
    export default a
7

8
    // 错误
9
    export default var a = 1

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

1
  import _ from "lodash"

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

1
  import _, { each, each as forEach } from "lodash"

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

1
    export default function (obj) {}
2

3
    export function each(obj, iterator, context) {}
4

5
    export { each as forEach }

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

export default也可以用来输出类

1
    export default class {}
2

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

export 与 import 的复合写法#

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

1
    export { foo, bar } from 'my_module'
2

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

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

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

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

1
  // 接口改名
2
  export { foo as myFoo } from "my_module"
3

4
  // 整体输出
5
  export * from "my_module"

默认接口的写法如下

1
  export { default } from "foo"

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

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

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

默认接口也可以改名为具名接口

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

下面三种import语句，没有对应的复合写法。

1
    import * as someIdentifier from 'someModule'
2
    import someIdentifier from 'someModule'
3
    import someIdentifier, { namedIdentifier } from 'someModule'

模块的继承#

模块之间也可以继承。

假设有一个circleplus模块，继承了circle模块

1
    export * from 'circle'
2
    export var e = 2.71828182846
3
    export default function (x) {
4
        return Math.exp(x)
5
    }

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

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

1
    export { area as circleArea } from 'circle'

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

加载上面模块的写法如下

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

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

跨模块常量#

由于const声明的常量只在当前代码块有效，如果想设置跨模块的常量(即跨多个文件)，或者说一个值要被多个模块共享，可以采用下面的写法

1
    // constants.js 模块
2
    export const A = 1
3
    export const B = 3
4
    export const C = 4
5

6
    // test1.js 模块
7
    import * as constants from './constants'
8
    console.log(constants.A) // 1
9
    console.log(constants.B) // 3
10

11
    // test2.js 模块
12
    import { A, B } from './constants'
13
    console.log(A) // 1
14
    console.log(B) // 3

如果要使用的常量非常多，可以建一个专门的constants目录，将各种常量写在不同的文件里面，保存在该目录下

1
    export const db = {
2
        url: 'https://my.couchdbserver.local:5984',
3
        admin_username: 'admin',
4
        admin_password: 'admin password',
5
    }
6

7
    // constants/user.js
8
    export const users = ['root', 'admin', 'staff', 'ceo', 'chief', 'moderator']

然后，将这些文件输出的常量，合并在index.js里面

1
    export { db } from './db'
2
    export { users } from './users'

使用的时候，直接加载index.js就可以了。

1
  import { db, users } from "./constants/index"

import()#

1
    // 报错
2
    if (x === 2) {
3
        import MyModual from './myModual'
4
    }

1
    const path = './' + fileName
2
    const myModual = require(path)

1
  import(specifier)

1
    const main = document.querySelector('main')
2

3
    import(`./section-modules/${someVariable}.js`)
4
        .then((module) => {
5
            module.loadPageInto(main)
6
        })
7
        .catch((err) => {
8
            main.textContent = err.message
9
        })

1
    button.addEventListener('click', (event) => {
2
        import('./dialogBox.js')
3
            .then((dialogBox) => {
4
                dialogBox.open()
5
            })
6
            .catch((error) => {
7
                /* Error handling */
8
            })
9
    })

1
    if (condition) {
2
        import('moduleA').then()
3
    } else {
4
        import('moduleB').then()
5
    }

1
  import(f()).then()

1
    import('./myModule.js').then(({ export1, export2 }) => {
2
        // ...·
3
    })

1
    import('./myModule.js').then((myModule) => {
2
        console.log(myModule.default)
3
    })
4

5
  //上面的代码也可以使用具名输入的形式
6
    import('./myModule.js').then(({ default: theDefault }) => {
7
        console.log(theDefault)
8
    })

1
    Promise.all([
2
        import('./module1.js'),
3
        import('./module2.js'),
4
        import('./module3.js')])
5
    .then(([module1, module2, module3]) => {
6

7
    })

1
    async function main() {
2
        const myModule = await import('./myModule.js')
3
        const { export1, export2 } = await import('./myModule.js')
4
        const [module1, module2, module3] = await Promise.all([
5
            import('./module1.js'),
6
            import('./module2.js'),
7
            import('./module3.js'),
8
        ])
9
    }
10
    main()