在互联网的洪荒时代，网站主要用 HTMLå’Œ CSS 开发的。如果将 JavaScript 加载到页面中，通常是以小片段的形式提供效果和交互，一般会把所有的 JavaScript 代码全都写在一个文件中，并加载到一个 script æ ‡ç­¾ä¸­ã€‚尽管可以把 JavaScript 拆分为多个文件，但是所有的变量和函数仍然会被添加到全局作用域中。

但是后来 JavaScript 在浏览器中发挥着重要的作用，迫切需要使用第三方代码来完成常见任务，并且需要把代码分解为模块化的文件，避免污染全局命名空间。

ECMAScript 2015 规范在 JavaScript 语言中引入了 module，也有了 import å’Œ export 语句。在本文中，我们一起来学习 JavaScript 模块，以及怎样用 import å’Œ export æ¥ç»„织代码。

模块化编程

在 JavaScript 中出现模块的概念之前，当我们想要把自己的代码组织为多个块时，一般会创建多个文件，并且将它们链接为单独的脚本。下面先举例说明，首先创建一个 index.html æ–‡ä»¶å’Œä¸¤ä¸ªJavaScript文件“ functions.js å’Œ script.js。

index.html æ–‡ä»¶ç”¨æ¥æ˜¾ç¤ºä¸¤ä¸ªæ•°å­—的和、差、乘积和商，并链接到 script æ ‡ç­¾ä¸­çš„两个 JavaScript 文件。打开 index.html å¹¶æ·»åŠ ä»¥ä¸‹ä»£ç ï¼š

index.html

  
    
    

    
  

  
    
Answers
    

 and 


    
Addition
    


    
Subtraction
    


    
Multiplication
    


    
Division
    


    
    
  

这个页面很简单，就不详细说明了。

functions.js æ–‡ä»¶ä¸­åŒ…含将会在第二个脚本中用到的数学函数。打开文件并添加以下内容：

functions.js

function sum(x, y) {
  return x + y
}

function difference(x, y) {
  return x - y
}

function product(x, y) {
  return x * y
}

function quotient(x, y) {
  return x / y
}

最后，script.js æ–‡ä»¶ç”¨æ¥ç¡®å®š x å’Œ y 的值，以及调用前面那些函数并显示结果：

script.js

const x = 10
const y = 5

document.getElementById('x').textContent = x
document.getElementById('y').textContent = y

document.getElementById('addition').textContent = sum(x, y)
document.getElementById('subtraction').textContent = difference(x, y)
document.getElementById('multiplication').textContent = product(x, y)
document.getElementById('division').textContent = quotient(x, y)

保存之后在浏览器中打开 index.html å¯ä»¥çœ‹åˆ°æ‰€æœ‰ç»“果：

对于只需要一些小脚本的网站，这不失为一种有效的组织代码的方法。但是这种方法存在一些问题：

• 污染全局命名空间：你在脚本中创建的所有变量（sum、 difference ç­‰ï¼‰çŽ°åœ¨éƒ½å­˜åœ¨äºŽ window å¯¹è±¡ä¸­ã€‚如果你打算在另一个文件中使用另一个名为 sum çš„变量，会很难知道在脚本的其它位置到底用的是哪一个值变量，因为它们用的都是相同的 window.sum å˜é‡ã€‚唯一可以使变量私有的方法是将其放在函数的作用域中。甚至在 DOM 中名为 x çš„ id å¯èƒ½ä¼šå’Œ var x å­˜åœ¨å†²çªã€‚

• 依赖管理：必须从上到下依次加载脚本来确保可以使用正确的变量。将脚本分别保存存为不同文件会产生分离的错觉，但本质上与放在页面中的单个  ä¸­ç›¸åŒã€‚

在 ES6 把原生模块添加到 JavaScript 语言之前，社区曾经尝试着提供了几种解决方案。第一个解决方案是用原生 JavaScript 编写的，例如将所有代码都写在 objects 或立即调用的函数表达式（IIFE）中，并将它们放在全局命名空间中的单个对象上。这是对多脚本方法的一种改进，但是仍然存在将至少一个对象放入全局命名空间的问题，并没有使在第三方之间一致地共享代码的问题变得更加容易。

之后又出现了一些模块解决方案：CommonJS 是一种在 Node.js 实现的同步方法，异步模块定义（AMD）是一种异步方法，还有支持前面两种样式的通用方法——通用模块定义（UMD）。

这些解决方案的出现使我们可以更轻松地以包的形式共享和重用代码，也就是可以分发和共享的模块，例如 npm。但是由于存在许多解决方案，并且都不是 JavaScript 原生的，所以需要依靠 Babel、Webpack 或 Browserify之类的工具才能在浏览器中使用。

由于多文件方法存在许多问题，并且解决方案很复杂，所以开发人员对把模块化开发的方法引入 JavaScript 语言非常感兴趣。于是 ECMAScript 2015 开始支持 JavaScript module。

module æ˜¯ä¸€ç»„代码，用来提供其他模块所使用的功能，并能使用其他模块的功能。 export æ¨¡å—提供代码，import æ¨¡å—使用其他代码。模块之所以有用，是因为它们允许我们重用代码，它们提供了许多可用的稳定、一致的接口，并且不会污染全局命名空间。

模块（有时称为 ES 模块）现在可以在原生 JavaScript 中使用，在本文中，我们一起来探索怎样在代码中使用及实现。

原生 JavaScript 模块

JavaScript 中的模块使用import å’Œ export å…³é”®å­—：

• import：用于读取从另一个模块导出的代码。

• export：用于向其他模块提供代码。

接下来把前面的的 functions.js æ–‡ä»¶æ›´æ–°ä¸ºæ¨¡å—并导出函数。在每个函数的前面添加 export ã€‚

functions.js

export function sum(x, y) {  return x + y
}export function difference(x, y) {  return x - y
}export function product(x, y) {  return x * y
}export function quotient(x, y) {  return x / y
}

在 script.js ä¸­ç”¨ import ä»Žå‰é¢çš„ functions.js æ¨¡å—中检索代码。

注意：import å¿…须始终位于文件的顶部，然后再写其他代码，并且还必须包括相对路径（在这个例子里为 ./）。

把 script.js ä¸­çš„代码改成下面的样子：

script.js

import { sum, difference, product, quotient } from './functions.js'const x = 10const y = 5document.getElementById('x').textContent = xdocument.getElementById('y').textContent = ydocument.getElementById('addition').textContent = sum(x, y)document.getElementById('subtraction').textContent = difference(x, y)document.getElementById('multiplication').textContent = product(x, y)document.getElementById('division').textContent = quotient(x, y)

注意：要通过在花括号中命名单个函数来导入。

为了确保代码作为模块导入，而不是作为常规脚本加载，要在 index.html ä¸­çš„ script æ ‡ç­¾ä¸­æ·»åŠ type="module"。任何使用 import æˆ– export çš„代码都必须使用这个属性：

index.html

由于受限于 CORS 策略，必须在服务器环境中使用模块，否则会出现下面的错误：

Access to script at 'file:///Users/your_file_path/script.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

模块与常规脚本不一样的地方：

• 模块不会向全局（window）作用域添加任何内容。

• 模块始终处于严格模式。

• 在同一文件中把同一模块加载两次不会出问题，因为模块仅执行一次

• 模块需要服务器环境。

模块仍然经常与打包程序（如 Webpack）一起配合使用，用来增加对浏览器的支持和附加功能，但它们也可以直接用在浏览器中。

接下来探索更多使用 import å’Œ export è¯­æ³•çš„方式。

命名导出

如前所述，使用 export è¯­æ³•å…è®¸ä½ åˆ†åˆ«å¯¼å…¥æŒ‰åç§°å¯¼å‡ºçš„值。以这个 function.js çš„简化版本为例：

functions.js

export function sum() {}export function difference() {}

这样允许你用花括号按名称导入 sum å’Œ difference：

script.js

import {sum, difference} from './functions.js'

也可以用别名来重命名该函数。这样可以避免在同一模块中产生命名冲突。在这个例子中，sum å°†é‡å‘½åä¸º add，而 difference å°†é‡å‘½åä¸º subtract。

script.js

import {
  sum as add,
  difference as subtract
} from './functions.js'add(1, 2) // 3

在这里调用 add() å°†äº§ç”Ÿ sum() å‡½æ•°çš„结果。

使用 * è¯­æ³•å¯ä»¥å°†æ•´ä¸ªæ¨¡å—的内容导入到一个对象中。在这种情况下，sum å’Œ difference å°†æˆä¸º mathFunctions å¯¹è±¡ä¸Šçš„方法。

script.js

import * as mathFunctions from './functions.js'mathFunctions.sum(1, 2) // 3mathFunctions.difference(10, 3) // 7

原始值、函数表达式和定义、异步函数、类和实例化的类都可以导出，只要它们有标识符就行：

// åŽŸå§‹å€¼export const number = 100export const string = 'string'export const undef = undefinedexport const empty = nullexport const obj = {name: 'Homer'}export const array = ['Bart', 'Lisa', 'Maggie']// å‡½æ•°è¡¨è¾¾å¼export const sum = (x, y) => x + y// å‡½æ•°å®šä¹‰export function difference(x, y) {  return x - y
}// åŒ¿åå‡½æ•°export async function getBooks() {}// ç±»export class Book {  constructor(name, author) {    this.name = name    this.author = author
  }
}// å®žä¾‹åŒ–ç±»export const book = new Book('Lord of the Rings', 'J. R. R. Tolkein')

所有这些导出都可以成功被导入。接下来要探讨的另一种导出类型称为默认导出。

默认导出

在前面的例子中我们导出了多个命名的导出，并分别或作为一个对象导入了每个导出，将每个导出作为对象上的方法。模块也可以用关键字 default åŒ…含默认导出。默认导出不使用大括号导入，而是直接导入到命名标识符中。

以 functions.js æ–‡ä»¶ä¸ºä¾‹ï¼š

functions.js

export default function sum(x, y) {  return x + y
}

在 script.js æ–‡ä»¶ä¸­ï¼Œå¯ä»¥ç”¨ä»¥ä¸‹å‘½ä»¤å°†é»˜è®¤å‡½æ•°å¯¼å…¥ä¸º sum：

script.js

import sum from './functions.js'sum(1, 2) // 3

不过这样做很危险，因为在导入过程中对默认导出的命名没有做任何限制。在这个例子中，默认函数被导入为 difference，尽管它实际上是 sum å‡½æ•°ï¼š

script.js

import difference from './functions.js'difference(1, 2) // 3

所以一般首选使用命名导出。与命名导出不同，默认导出不需要标识符——原始值本身或匿名函数都可以用作默认导出。以下是用作默认导出的对象的示例：

functions.js

export default {  name: 'Lord of the Rings',  author: 'J. R. R. Tolkein',
}

可以用以下命令将其作为 book å¯¼å…¥ï¼š

functions.js

import book from './functions.js'

同样，下面的例子演示了如何将匿名箭头函数导出为默认导出：

functions.js

export default () => 'This function is anonymous'

可以这样导入：

script.js

import anonymousFunction from './functions.js'

命名导出和默认导出可以彼此并用，例如在这个模块中，导出两个命名值和一个默认值：

functions.js

export const length = 10export const width = 5export default function perimeter(x, y) {  return 2 * (x + y)
}

可以用以下命令导入这些变量和默认函数：

script.js

import calculatePerimeter, {length, width} from './functions.js'calculatePerimeter(length, width) // 30

现在默认值和命名值都可用于脚本了。

总结

模块化编程设计允许我们把代码分成单个组件，这有助于代码重用，同时还可以保护全局命名空间。一个模块接口可以在原生 JavaScript 中用关键字 import å’Œ export æ¥å®žçŽ°ã€‚