JavaScript 模块（也称为 ES 模块或 ECMAScript 模块）的创建是为了帮助使 JavaScript 代码更具条理和更易于维护。

了解 ES 模块的工作原理将有助于您成为更好的 JavaScript 开发人员。在本文中，我们将介绍：

• 什么是模块？
• 什么是 ES 模块？我们为什么要使用它们？
• 如何使用 ES 模块
• JavaScript 中使用的其他模块系统

让我们开始吧。

什么是模块？

JavaScript 中的模块只是一个代码文件。你可以将模块视为可重用且独立的代码单元。

模块是代码库的构建块。随着应用程序变得越来越大，您可以将代码拆分为多个文件，也称为模块。

使用模块可以将大型程序分解为更易于管理的代码片段。

什么是 ES 模块？我们为什么要使用它们？

ES 模块是 JavaScript 中使用的官方模块系统。JavaScript 中还可以使用其他模块系统，我们稍后会详细讨论这些模块系统。但现在，我们要知道，我们学习的是 ES 模块，而不是其他模块系统，因为它们是 JavaScript 中模块的标准。

作为 JavaScript 开发人员，您可能会在日常工作中使用 ES 模块。

以下是开发人员使用 ES 模块可获得的一些优势：

1. 组织。 通过将大型程序分解为较小的相关代码段，可以使程序保持井然有序。
2. 可重用性。 使用 ES 模块，您可以在一个地方编写代码，并在整个代码库中的其他文件中重复使用该代码。例如，您不必在任何地方重写相同的函数，而是可以在一个模块内编写一个函数，然后将其导入另一个文件并在那里使用它。

让我们深入研究一个使用 ES 模块的示例。我们将了解 ES 模块的工作原理，以便您可以在以后的项目中使用它。在使用 ES 模块时，我们将看到上述每个优点的体现。

如何使用 ES 模块

开始 Replit 在这里 找到完整的代码 .

进入 Replit 后，我​​们可以创建一个新项目并选择 HTML、CSS 和 JavaScript。这将创建一个包含一个 index.html 文件、一个 script.js 文件和一个 style.css 文件的启动项目。这就是我们需要设置的一切。

在 index.html 文件中，我们将修改脚本标签以包含 type="module" 。这将允许我们开始在代码中使用 ES 模块。将脚本标签修改为：

让我们从编写一个简单的加法函数开始。此函数将获取两个数字，将它们相加，然后返回相加的结果。我们还将调用此函数。我们将此函数写入我们的 script.js 文件中：

function add(a, b) {
 return a + b;
};
console.log(add(5, 5)); //outputs 10

到目前为止，我们的 script.js 文件很小，代码也很少。但想象一下，如果这个应用程序变大，我们有几十个这样的函数。这个 script.js 文件可能会变得太大，难以维护。

让我们通过创建模块来避免这个问题。我们可以在副本中单击“添加文件”来做到这一点。请记住，模块只是一个相关代码的文件。

我们将模块称为 math.js 。我们将从 script.js 文件中删除此添加函数，并创建一个新文件 math.js 。此文件将是我们的模块，我们将在其中保存与数学相关的函数。让我们将添加函数放在此文件中：

// math.js

function add(a, b) {
 return a + b;
};

我们决定将此模块称为 math.js ，因为我们稍后将在此文件中创建更多与数学相关的函数。

如果我们打开这个应用程序并一眼看到它，我们就知道我们的数学相关逻辑就在这个文件中。我们不需要浪费时间进入这个应用程序并搜索我们的数学函数并想知道它们在哪里——我们已经将它们整齐地组织到一个文件中。

接下来，让我们在文件内部使用 add 函数 script.js ，即使该函数本身现在位于 math.js 文件内部。为此，我们需要了解 ES 模块语法。让我们回顾一下 export 和 import 关键字。

export 关键字

当您想让模块在其所在文件之外的其他文件中可用时，可以使用关键字 export 。让我们将 export 关键字与 add 函数一起使用，以便我们可以在文件中使用它 script.js 。

让我们 export default 在 math.js 里面添加我们的 add 函数：

// math.js

function add(a, b) {
 return a + b;
};

export default add;

通过最后一行，我们可以使此添加函数在模块以外的其他地方可用 math.js 。

使用 export 关键字的另一种方法是在定义函数之前添加它：

// math.js

export default function add(a, b) {
 return a + b;
};

这是使用 export 关键字的两种不同方式，但作用相同。

您可能想知道 default 后面的关键字是 export 。我们稍后会讲到。现在，让我们 add 在另一个文件中实际使用我们的函数，现在我们已经将其导出。

import 关键字

我们可以使用 import 关键字将 add 函数导入到我们的 script.js 文件中。导入此函数仅意味着我们将获得该函数的访问权限并能够在文件中使用它。导入函数后，我们可以使用它：

// script.js
import add from './math.js';

console.log(add(2, 5)); //outputs 7

在这里 ./math.js ，我们使用相对导入。要了解有关相对路径和绝对路径的更多信息，请查看这个有用的 StackOverflow 答案。

当我们运行此代码时，我们可以看到调用 add 函数的结果 7 。现在，您可以在此文件中随意使用 add 函数。

现在已经看不到 add 函数本身的代码了，我们可以使用 add 函数而不必查看函数本身的代码。

暂时 import add from './math.js' 注释掉该行 ReferenceError: add is not defined 。这是因为 script.js 除非我们明确将该函数导入到此文件中，否则无法访问 add 函数。

我们导出了我们的添加函数，将其导入到我们的 script.js 文件中，然后调用该函数。

让我们 math.js 再看看我们的文件。如前所述，当您看到 default 带有 export 关键字的单词时，您可能会感到困惑。让我们进一步讨论 default 关键字。

JavaScript 中的命名导出与默认导出

使用 ES 模块，您可以使用命名导出或默认导出。

在第一个示例中，我们使用了 默认导出。 使用默认导出，我们仅从模块中导出单个值（我们的 add 函数） math.js 。

使用默认导出时，您可以根据需要重命名导入。在我们的 script.js 文件中，我们可以导入我们的 add 函数并将其命名为 addition（或任何其他名称）：

// script.js
import addition from './math.js';

console.log(addition(2, 5)); //outputs 7

另一方面， 命名导出 用于 从模块 多个值

让我们使用命名导出创建一个示例。返回我们的 math.js 文件，再创建两个函数，减法和乘法，并将它们放在我们的加法函数下面。使用命名导出，您只需删除关键字即可 default ：

// math.js

export default function add(a, b) {
 return a + b;
};

export function subtract(a, b) {
 return a - b;
};

export function multiply(a, b) {
 return a * b;
};

在 中 script.js ，我们删除所有以前的代码并导入我们的减法和乘法函数。要导入命名的导出，请将它们括在花括号中：

import { multiply, subtract } from './math.js';

现在我们可以在文件中使用这两个函数 script.js ：

// script.js
import { multiply, subtract } from './math.js';

console.log(multiply(5, 5));

console.log(subtract(10, 4))

如果您想重命名命名导出，可以使用以下 as 关键字：

import add, { subtract as substractNumbers } from './math.js';

console.log(substractNumbers(2, 5));

上面，我们将导入重命名 subtract 为 subtractNumbers .

让我们回到我们的 add 函数。如果我们想在文件中再次使用它 script.js ，与 multiply and subtract 函数一起使用怎么办？我们可以这样做：

import add, { multiply, subtract } from './math.js';

console.log(multiply(5, 5));

console.log(subtract(10, 4))

console.log(add(10, 10));

现在我们已经学会了如何使用 ES 模块。我们已经学会了如何使用关键字 export ， import 我们已经学会了命名导出和默认导出之间的区别。我们还学会了如何重命名默认导出和命名导出。

JavaScript 中的其他模块系统

当学习模块时，您可能已经看到甚至使用过不同类型的导入，可能是如下所示的导入：

var models = require('./models')

这就是学习 JavaScript 模块时可能令人困惑的地方。让我们深入了解一下 JavaScript 模块的简史，以消除这种困惑。

上面使用语句的代码示例 require 是 CommonJS。CommonJS 是另一个可以在 JavaScript 中使用的模块系统。

JavaScript 刚创建时并没有模块系统。由于 JavaScript 没有模块系统，开发人员只能在该语言的基础上创建自己的模块系统。

多年来，人们创建并使用了不同的模块系统，其中包括 CommonJS。在公司或开源项目中使用代码库时，您可能会发现正在使用不同的模块系统。

最终，ES 模块被引入作为 JavaScript 中的标准化模块系统。

在本文中，我们了解了什么是模块以及开发人员使用它们的原因。我们了解了 ES 模块的工作原理以及 JavaScript 中不同类型的模块系统。

如果您喜欢这篇文章，请加入我的 编码俱乐部 ，我们每周日一起应对编码挑战，并在学习新技术时互相支持。

如果您对本文有任何反馈或疑问，请在 Twitter 上找到我 @madisonkanna .