详解 JavaScript 中的模块、Import和Export_Java教程

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

详解 JavaScript 中的模块、Import和Export

但是后来 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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Modules</title>
</head>
<body>
<h1>Answers</h1>
<h2><strong id="x"></strong> and <strong id="y"></strong></h2>
<h3>Addition</h3>
<p id="addition"></p>
<h3>Subtraction</h3>
<p id="subtraction"></p>
<h3>Multiplication</h3>
<p id="multiplication"></p>
<h3>Division</h3>
<p id="division"></p>
<script src="functions.js"></script>
<script src="script.js"></script>
</body>
</html>

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

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 可以看到所有结果：

详解 JavaScript 中的模块、Import和Export

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

污染全局命名空间：你在脚本中创建的所有变量(sum、 difference 等)现在都存在于 window 对象中。如果你打算在另一个文件中使用另一个名为 sum 的变量，会很难知道在脚本的其它位置到底用的是哪一个值变量，因为它们用的都是相同的 window.sum 变量。唯一可以使变量私有的方法是将其放在函数的作用域中。甚至在 DOM 中名为 x 的 id 可能会和 var x 存在冲突。
依赖管理：必须从上到下依次加载脚本来确保可以使用正确的变量。将脚本分别保存存为不同文件会产生分离的错觉，但本质上与放在页面中的单个 <script> 中相同。

在 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 = 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 中的 script 标签中添加type="module"。任何使用 import 或 export 的代码都必须使用这个属性：

index.html

<script
type="module" src="functions.js">
</script>
<script
type="module" src="script.js">
</script>

由于受限于 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.