JavaScript 中的导入导出

JavaScript 中的模块是什么？

在 JavaScript 中，模块是一种组织代码结构的方式。模块允许开发者将代码分解成更小、可重用的部分。这意味着可以将代码分解成更小的部分，并在应用程序的不同部分之间轻松地导入和导出。

通过使用模块，我们可以将代码分解成单独的文件，以便于维护。我们可以使用 import 语句从外部文件导入模块。在 JavaScript 中，模块依赖于 <script> 标签中的 type="module"。

JavaScript 中的导出是什么？

在 JavaScript 中，导出是一个可以通过 require() 调用返回的对象。换句话说，通过 export 关键字，我们可以轻松地导出变量、函数和类。通过 export 关键字，我们可以指定我们希望在模块外部访问的数据或功能。

语法

JavaScript 中导出的语法如下：

JavaScript 中的导出类型

JavaScript 中有两种导出类型：

默认导出和命名导出

默认导出

在 JavaScript 中，默认导出用于从一个文件共享一个单独的值、函数、变量或类作为主要内容到程序或代码的其他部分。通过默认导出，如果我们有一个需要在应用程序其他部分使用的文件，则使用 export default 语法，将一个项目标记为默认导出。

简单来说，当我们导入文件到代码的另一部分时，我们不需要使用花括号。这意味着在导入时，我们可以直接给它一个名字，方便使用。

例如

命名导出

在 JavaScript 中，命名导出用于从单个文件导出多个变量、函数或类，每个都作为一个单独的实体。通过命名导出，我们可以更好地控制代码的哪些部分以及我们想要与哪些其他模块共享。

当我们将命名导出导入到其他文件时，我们需要确保使用导出时使用的确切名称，这样我们就可以轻松访问和使用源文件中需要的功能。

例如

JavaScript 中的导入

在 JavaScript 中，import 模块是一个我们用来包含程序库中所有主要函数的模块，这样开发者就不需要反复重写整个函数。

在 JavaScript 中，当我们想要导入模块时，我们需要使用 import 关键字。简单来说，import 用于读取从另一个模块导出的代码。

在 JavaScript 中，我们可以根据模块是命名导出还是默认导出，以两种方式导入模块。

在 JavaScript 中，命名导出是用花括号构建的，而默认导出则没有。

如何在 JavaScript 中导入模块

导入默认导出

在 JavaScript 中，假设一个模块使用了默认导出，那么我们需要使用以下语法来导入默认导出：

现在，我们可以将 myFunction() 从 myFunction.js 模块导入到 main.js 模块，如下所示：

导入命名导出

在 JavaScript 中，导入命名导出与默认导出不相同，我们需要在将命名导出导入模块时指定其确切名称。我们需要确保命名导出放在一对花括号内。

语法

例如，我们可以修改 myFunction.js 模块，它将包含两个命名导出：

现在，要将 add() 和 subtract() 函数导入到 main.js 模块，我们需要使用以下代码：

您也可以调用这些函数：