数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究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 中进行导出和导入，并通过一些例子进行了说明。
268 次浏览
