JavaScript 默认导出与具名导出

在本文中，我们将学习JavaScript中默认导出与具名导出的区别，以及我们如何利用它们来有效组织我们的代码结构。

在JavaScript中，我们可以使用默认导出和具名导出，以便为独立的代码片段拥有独立的文件或模块。这有助于大大提高代码的可读性和树摇效果。

默认导出	命名导出
默认导出允许我们将单个值或函数作为模块的默认导出进行导出。	命名导出允许我们从模块导出多个值或函数。
只有一个值可以从使用默认导出的文件中使用。	我们可以从使用命名导出的文件中使用一个或多个值。

让我们看一些示例和方法，以更好地理解这个概念−

示例1 – 使用默认导出

在这个示例中，我们将−

创建一个名为module.js的模块，该模块导出一个默认值（message）。
在script.js中，我们将使用import语句导入默认导出，并将其赋值给变量message。然后将该值记录到控制台。

文件名 – 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); // Output: Hello, World!

输出

结果将如下图所示。

JavaScript 默认导出与具名导出

示例2 – 使用命名导出

在这个示例中，我们将 –

创建一个名为module.js的模块，该模块导出两个命名函数（add和subtract）。
在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)); // Output: 5
   console.log(subtract(5, 2)); // Output: 3

输出

结果将如下图所示。

JavaScript 默认导出与具名导出

结论

默认导出和具名导出为JavaScript模块中的导出和导入值提供了不同的方法。默认导出对于提供单个主要导出非常有用，而具名导出允许我们从javascript模块中导出多个值。这些功能使我们能够在代码中引入模块化编程，并大大提高代码的可读性和树摇。我们通过使用不同的方法了解了javascript中默认导出和具名导出的区别，并看到了一些解释此问题的示例。