JavaScript 模块：导出和导入的正确使用方法

JavaScript 模块：导出和导入的正确指南

在 JavaScript 的世界中，模块化是提升代码可维护性和可扩展性的关键。理解如何正确导出和导入模块对于构建高效和组织良好的应用程序至关重要。本文将深入探讨这些概念，解决常见错误，并提供实用的指导。

导出模块

导出模块时，我们需要使用 export 。它可以放在变量、函数或类的声明之前，表示我们要将它们公开给其他模块使用。例如：

export const addToCart = (product, quantity) => {
  // 购物车相关的逻辑
};

导入模块

在主脚本中导入模块时，可以使用 import 关键字。它的语法为：

import { <variable, function, class> } from "<path/to/module>";

例如，要从 shoppingCart.js 模块导入 addToCart 函数：

import { addToCart } from "./shoppingCart.js";

解决 "Cannot use import statement outside a module" 错误

这个错误通常发生在主脚本中，表明它不是一个模块。要启用模块系统，需要在 <script> 标签中添加 type="module" 属性。

<script src="./index.js" type="module"></script>

示例

为了更好地理解，让我们看一个完整的示例：

index.html:

<script src="./shoppingCart.js" type="module"></script>
<script src="./index.js" type="module"></script>

index.js:

import { addToCart } from "./shoppingCart.js";
addToCart("iPhone", 1);

shoppingCart.js:

export const addToCart = (product, quantity) => {
  console.log(`${quantity} ${product} added to the cart.`);
};

常见问题解答

Q1. 为什么使用模块？
模块化可以提高代码的可重用性和可扩展性，让开发人员轻松组织和管理复杂应用程序。

Q2. export default 与 export 有何区别？
export default 用于导出单个默认值，而 export 允许导出多个命名的值。

Q3. 如何加载模块而不使用 import 语句？
可以使用 <script> 标签动态加载模块，但需要使用 async 或 defer 属性。

Q4. 模块加载的顺序是什么？
模块按照其在 HTML 中指定的顺序加载。

Q5. 如何避免模块间的循环依赖？
通过使用模块加载器或遵循正确的模块设计模式来避免循环依赖。

结论

掌握 JavaScript 模块导出和导入是编写现代化和高效代码的关键。通过了解正确的做法和解决常见错误，你可以构建维护良好、可重用的应用程序。记住，模块化是提升代码质量和团队协作的重要工具。