极客笔记JavaScript 导出和导入
在本文中，我们将学习如何在JavaScript中利用导入和导出，以及如何将代码分割成不同的模块以便更好地组织它。
为了促进编程中的模块化开发，使我们能够将代码组织成可重用的模块，JavaScript提供了导出和导入功能。为了实现代码的共享和可重用性，我们可以使用不同类型的导出和导入。
通过将组件标记为导出，导出使我们能够将函数、变量、对象或任何值在模块外部可用。我们可以将它们暴露出来，以便在应用程序代码库的其他部分中使用。
导入用于将其他模块中的导出组件引入到当前模块中。它们允许我们访问和使用在外部模块中定义的代码功能。
让我们看一些示例以更好地理解概念 –
示例1 – 使用具名导出和导入
在这个示例中，为了从一个模块中导入具名导出，我们将 –
- 使用import关键字，后面跟着要导入的组件的名称。
-
从module.js模块导入add和subtract函数，以及PI常量，并在main.js模块中使用它们。
文件名 – index.html
<html>
<head>
<title>Exports & Imports in JavaScript</title>
<script type="module" src="module.js"></script>
<script type="module" src="main.js"></script>
</head>
<body>
<h1>Exports & Imports in JavaScript</h1>
</body>
</html>
文件名 – main.js
// main.js module
import { add, subtract, PI } from './module.js';
console.log(add(5, 3)); // Output: 8
console.log(subtract(10, 4)); // Output: 6
console.log(PI); // Output: 3.14159
文件名 – module.js
// module.js module
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
export const PI = 3.14159
输出
结果将如下图所示。
示例2 – 使用默认导出和导入
在这个示例中，要从一个模块导入默认导出，我们将会：
- 使用import关键字，后面跟着我们选择的名称，将默认导出分配给它。
-
从module.js模块导入默认导出并将其命名为sayHello。然后，我们将在main.js模块中使用导入的函数。
文件名 – index.html
<html>
<head>
<title>Exports & Imports in JavaScript</title>
<script type="module" src="module.js"></script>
<script type="module" src="main.js"></script>
</head>
<body>
<h1>Exports & Imports in JavaScript</h1>
</body>
</html>
文件名 – main.js
// main.js module
import sayHello from './module.js';
sayHello("John"); // Output: Hello, John!
文件名 – module.js
// module.js module
export default function sayHello(name) {
console.log("Hello, " + name + "!");
}
输出
结果将如下图所示。
结论
导出和导入是JavaScript中的重要特性，它们允许模块化开发和代码封装，从而促进代码的可重用性和可维护性。通过命名导出，我们可以选择性地公开多个组件，而默认导出则简化了主要组件的使用。我们学习了如何在javascript中使用不同的方法进行导出和导入，并看到了一些解释相同内容的示例。