JavaScript 中的默认导出与命名导出
在本文中，我们将了解 JavaScript 中默认导出和命名导出之间的区别，以及如何使用它们来有效地组织我们的代码结构。
在 JavaScript 中，我们可以使用默认导出和命名导出，以便为不同的代码片段提供不同的文件或模块。这在很大程度上有助于增强代码的可读性和 tree shake。
默认导出 |
命名导出 |
|---|---|
默认导出允许我们将单个值或函数导出为模块的默认导出。 |
命名导出允许我们从模块导出多个值或函数。 |
使用默认导出的文件中只有一个值可供使用。 |
我们可以使用使用命名导出的文件中一个或多个值 |
让我们看一些示例和方法来更好地理解这个概念−
示例 1 - 使用默认导出
在此示例中，我们将 −
创建一个名为 module.js 的模块，该模块导出默认值(消息)。
在 script.js 中，我们将使用 import 语句导入默认导出并将其分配给变量消息。然后将该值记录到控制台。
文件名 - index.html
<html> <head> <title>Default Export Example</title> <script type="module" src="module.js"></script> <script type="module" src="main.js"></script> </head> <body> <h1>Default Export Example</h1> </body> </html>
文件名 - module.js
// module.js const message = 'Hello, World!'; export default message;
文件名 - main.js
// main.js import message from './module.js'; console.log(message); // 输出:Hello, World!
输出
结果将如下图所示。
示例 2 - 使用命名导出
在此示例中，我们将 −
创建一个名为 module.js 的模块，该模块导出两个命名函数(加法和减法)。
在 script.js 中，我们将使用花括号 {} 导入这些命名导出并相应地调用函数。
文件名 - index.html
<html> <head> <title>Named Export Example</title> <script type="module" src="module.js"></script> <script type="module" src="main.js"></script> </head> <body> <h1>Named Export Example</h1> </body> </html>
文件名 - module.js
// module.js
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
文件名 - main.js
// main.js
import { add, subtract } from './module.js';
console.log(add(2, 3)); // 输出:5
console.log(subtract(5, 2)); // 输出:3
输出
结果将如下图所示。
结论
默认导出和命名导出为在 JavaScript 模块中导出和导入值提供了不同的方法。默认导出可用于提供单个主要导出，而命名导出允许我们从 javascript 模块导出多个值。这些功能使我们能够在代码中引入模块化编程，并在很大程度上增强了代码的可读性和树摇动。我们通过不同的方法了解了 javascript 中默认导出和命名导出之间的区别，并看到了一些解释相同内容的示例。
