了解 JavaScript 中的模块、导入和导出

本是古典何须时尚 2023-09-29 15:38 41阅读 0赞

在 Web 的早期，网站主要由[HTML][]和[CSS][]组成。如果将任何 JavaScript 加载到页面中，它通常以小片段的形式提供效果和交互性。因此，JavaScript 程序通常完全编写在一个文件中并加载到一个`script`标签中。开发人员可以将 JavaScript 分解为多个文件，但所有变量和[函数][Link 1]仍将添加到全局[范围][Link 2]。

但是随着网站随着[Angular][]、[React][]和[Vue][]等框架的出现而不断发展，并且随着公司创建高级 Web 应用程序而不是桌面应用程序，JavaScript 现在在浏览器中扮演着重要角色。因此，更需要使用第三方代码来执行常见任务，将代码分解为模块化文件，并避免污染全局命名空间。

[ECMAScript 2015][]规范为 JavaScript 语言引入了*模块*，允许使用`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>

此 HTML 将在`h2`标题中显示变量`x,``y`的值，以及在以下`p`元素中对这些变量进行操作的值。元素的`id`属性是为[DOM 操作][DOM]设置的，这将发生在`script.js`文件中；该文件还将设置 `x`和 `y`的值。有关 HTML 的更多信息，请查看我们的[如何使用 HTML][HTML]系列构建网站。

`functions.js`文件将包含将在第二个脚本中使用的数学函数。打开`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)

设置这些文件并保存后，您可以[在浏览器中][Link 3][打开index.html][Link 3]以显示您的网站以及所有结果：

![ed09e95f1c527dc763e406c1a0a1f07f.png][]

对于有少量小脚本的网站，这是一种有效的代码划分方式。但是，这种方法存在一些问题，包括：

*  **污染全局命名空间**：您在脚本中创建的所有变量—— `sum`、`difference`等——现在都存在于[window][]对象上。如果您尝试使用`sum`在另一个文件中调用的另一个变量，则很难知道脚本中的任何时候将使用哪个值，因为它们都将使用相同的`window.sum`变量。变量私有的唯一方法是将其放在函数范围内。`id`DOM 中名为 的`x`和之间甚至可能存在冲突`var x`。
 *  **依赖管理**：脚本必须按从上到下的顺序加载，以确保正确的变量可用。将脚本保存为不同的文件会产生分离的错觉，但这与`<script>`在浏览器页面中具有单个内联基本相同。

在 ES6 将原生模块添加到 JavaScript 语言之前，社区试图提出几种解决方案。第一个解决方案是用 vanilla JavaScript 编写的，例如在[对象][Link 4]中编写所有代码或[立即调用函数表达式 (IIFE)][_IIFE]，并将它们放在全局命名空间中的单个对象上。这是对多脚本方法的改进，但仍然存在将至少一个对象放在全局命名空间中的相同问题，并且没有使第三方之间持续共享代码的问题变得更容易。

之后，出现了一些模块解决方案：[CommonJS ，一种在][CommonJS][Node.js][]中实现的同步方法，[异步模块定义（AMD）][AMD]，一种异步方法，以及[通用模块定义（UMD）][UMD]，旨在成为一个通用的支持以前两种样式的方法。

这些解决方案的出现使开发人员更容易以*包*的形式共享和重用代码，可以分发和共享的模块，例如在[npm][]上找到的模块。然而，由于有许多解决方案，但没有一个是 JavaScript 原生的，因此必须实现[Babel][]、[Webpack][]或[Browserify等工具才能在浏览器中使用模块。][Browserify]

由于多文件方法的许多问题以及所提出的解决方案的复杂性，开发人员有兴趣将[模块化编程][Link 5]方法引入 JavaScript 语言。因此，ECMAScript 2015 支持使用 JavaScript 模块。

*模块*是一组代码，它充当接口以提供功能供其他模块使用，并且能够依赖其他模块的功能。模块*导出*以提供代码并*导入*以使用其他代码。模块很有用，因为它们允许开发人员重用代码，它们提供了许多开发人员可以使用的稳定、一致的接口，并且它们不会污染全局命名空间。

模块（有时称为 ECMAScript 模块或 ES 模块）现在可以在 JavaScript 中本地使用，在本教程的其余部分中，您将探索如何在代码中使用和实现它们。

### 原生 JavaScript 模块 ###

JavaScript 中的模块使用`import`and`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)

请注意，单个函数是通过在花括号中命名它们来导入的。

为了确保此代码作为模块而不是常规脚本加载，请添加`type="module"`到. 任何使用或必须使用此属性的代码：`script``index.htmlimportexport`

index.html

此时，您将能够重新加载包含更新的页面，并且网站现在将使用模块。浏览器支持非常高，但是可以使用[caniuse][]来检查哪些浏览器支持它。请注意，如果您将文件视为指向本地文件的直接链接，则会遇到此错误：

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.

由于[CORS 政策][CORS]，模块必须在服务器环境中使用，您可以在本地使用[http-server][]或在 Internet 上使用托管服务提供商进行设置。

模块在以下几个方面不同于常规脚本：

*  模块不会向全局 ( `window`) 范围添加任何内容。
 *  模块始终处于[严格模式][Link 6]。
 *  在同一个文件中加载同一个模块两次没有效果，因为模块只执行一次/
 *  模块需要服务器环境。

模块仍然经常与 Webpack 等捆绑器一起使用，以增加对浏览器的支持和附加功能，但它们也可以直接在浏览器中使用。

接下来，您将探索更多使用`import`and`export`语法的方法。

### 命名导出 ###

如前所述，使用`export`语法将允许您单独导入已按名称导出的值。以这个简化版本为例`functions.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) // 3
    mathFunctions.difference(10, 3) // 7

原始值、函数表达式和定义、[异步函数][Link 7]、[类][Link 8]和实例化类都可以导出，只要它们具有标识符：

// Primitive values
    export const number = 100
    export const string = 'string'
    export const undef = undefined
    export const empty = null
    export const obj = {name: 'Homer'}
    export const array = ['Bart', 'Lisa', 'Maggie']
    
    // Function expression
    export const sum = (x, y) => x + y
    
    // Function defintion
    export function difference(x, y) {
      return x - y
    }
    
    // Asynchronous function
    export async function getBooks() {}
    
    // Class
    export class Book {
      constructor(name, author) {
        this.name = name
        this.author = author
      }
    }
    
    // Instantiated class
    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'

同样，以下示例演示了将匿名[箭头函数][Link 9]导出为默认导出：

functions.js

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

这可以通过以下方式导入`script.js`：

script.js

import anonymousFunction from './functions.js'

命名导出和默认导出可以一起使用，如在此模块中导出两个命名值和一个默认值：

functions.js

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

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

script.js

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

现在脚本可以使用默认值和命名值。

### 结论 ###

模块化编程设计实践允许您将代码分成单独的组件，这有助于使您的代码可重用和一致，同时还可以保护全局命名空间。模块接口可以在原生 JavaScript 中使用`import`and`export`关键字实现。在本文中，您了解了 JavaSvript 中模块的历史，如何将 JavaScript 文件分离为多个顶级脚本，如何使用模块化方法更新这些文件，以及命名和默认导出的`import`语法`export`。

要了解有关 JavaScript 中模块的更多信息，请阅读Mozilla 开发人员网络上的[模块。][Link 10]如果您想探索 Node.js 中的模块，请尝试我们的[如何创建 Node.js 模块教程][Node.js 1]。

[HTML]: https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-html
[CSS]: https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-css
[Link 1]: https://www.digitalocean.com/community/tutorials/how-to-define-functions-in-javascript
[Link 2]: https://www.digitalocean.com/community/tutorials/understanding-variables-scope-hoisting-in-javascript
[Angular]: https://www.digitalocean.com/community/tags/angularjs
[React]: https://www.digitalocean.com/community/tutorial_series/how-to-code-in-react-js
[Vue]: https://www.digitalocean.com/community/tags/vue-js
[ECMAScript 2015]: http://www.ecma-international.org/ecma-262/6.0/
[DOM]: https://www.digitalocean.com/community/tutorial_series/understanding-the-dom-document-object-model
[Link 3]: https://www.digitalocean.com/community/tutorials/how-to-use-and-understand-html-elements#how-to-view-an-offline-html-file-in-your-browser
[ed09e95f1c527dc763e406c1a0a1f07f.png]: https://img-blog.csdnimg.cn/img_convert/ed09e95f1c527dc763e406c1a0a1f07f.png
[window]: https://developer.mozilla.org/en-US/docs/Web/API/Window
[Link 4]: https://www.digitalocean.com/community/tutorials/understanding-objects-in-javascript
[_IIFE]: https://developer.mozilla.org/en-US/docs/Glossary/IIFE
[CommonJS]: https://en.wikipedia.org/wiki/CommonJS
[Node.js]: https://www.digitalocean.com/community/tutorial_series/how-to-code-in-node-js
[AMD]: https://en.wikipedia.org/wiki/Asynchronous_module_definition
[UMD]: https://github.com/umdjs/umd
[npm]: https://www.npmjs.com/
[Babel]: https://babeljs.io/
[Webpack]: https://webpack.js.org/
[Browserify]: http://browserify.org/
[Link 5]: https://en.wikipedia.org/wiki/Modular_programming
[caniuse]: https://caniuse.com/?search=modules
[CORS]: https://en.wikipedia.org/wiki/Cross-origin_resource_sharing
[http-server]: https://www.npmjs.com/package/http-server
[Link 6]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
[Link 7]: https://www.digitalocean.com/community/tutorials/understanding-the-event-loop-callbacks-promises-and-async-await-in-javascript#async-functions-with-asyncawait
[Link 8]: https://www.digitalocean.com/community/tutorials/understanding-classes-in-javascript
[Link 9]: https://www.digitalocean.com/community/tutorials/understanding-arrow-functions-in-javascript
[Link 10]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
[Node.js 1]: https://www.digitalocean.com/community/tutorials/how-to-create-a-node-js-module