ES12 中的模块是一个非常重要的特性，它允许开发者将代码分割成多个模块，并且易于管理和维护。模块化也为构建可重用组件提供了一个非常强大的工具，可以通过 import 和 export 语句在模块之间共享代码。本文将介绍如何在 ES12 中使用 export 和 import 语句，并提供一些示例代码来引导您的学习。
export 语句
export 语句用于将变量、函数或类从模块导出，以便在其他模块中使用它们。export 语句可以有多个变量、函数或类导出，也可以使用命名导出或默认导出。
命名导出
命名导出允许将多个变量、函数或类导出，需要使用花括号包裹多个变量、函数或类，如下所示：
// export statement for multiple variables/functions/classes
export { variable1, variable2, function1, class1 };默认导出
默认导出允许在一个模块中只导出一个默认值，它可以是一个变量、函数或类，也可以是原始值（如字符串、数字等）。默认导出只能有一个，如下所示：
// export statement for a default value export default value;
示例代码
下面是一个示例代码，用于演示如何在模块中导出多个变量、函数、类和默认值：
-- -------------------- ---- -------
-- ----- -------
------ ----- -- - -----
------ -------- ---------- -
------------------ ---------
-
------ ----- --------- -
------------------ ------- -
---------- - ------
----------- - -------
-
------ -
------ ---------- - ------------
-
-
-- ------- ------
------ ------- ---------- -
-------------------- -----------
-import 语句
import 语句用于从其他模块中导入变量、函数或类，它是用于导入命名导出或默认导出的语句。导入的变量可以重命名、解构或使用别名进行导入。
导入命名导出
使用 import 语句导入多个命名导出时，需要使用花括号包裹多个变量、函数或类，并指定来自哪个模块，如下所示：
// import statement for multiple named exports
import { variable1, variable2, function1, class1 } from './module1.js';导入默认导出
导入默认导出时，可以直接使用任何名称来声明导入的值，但是默认导出只能有一个，如下所示：
// import statement for a default export import value from './module2.js';
重命名和解构导入
重命名导入允许您将导入的变量重命名为其他名称，如下所示：
// import statement for renaming named exports
import { variable1 as newVariable1, function1 as newFunction1 } from './module1.js';
// import statement for renaming default export
import { default as myDefaultExport } from './module2.js';解构导入允许您从对象或数组中选择性地导入变量，如下所示：
// import statement for destructuring named exports
import { variable1, variable2 } from './module1.js';
// import statement for destructuring default export
import { default } from './module2.js';示例代码
下面是一个示例代码，用于演示如何从其他模块中导入多个变量、函数、类和默认值：
-- -------------------- ---- ------- -- ----- ------- ------ - --- --------- --------- - ---- --------------- -- ------- ------ ------ --------------- ---- --------------- -- ------- ------- ------ - -- -- ------ -------- -- ----------- - ---- --------------- ------ - ------- -- -------------------- - ---- ---------------
深入理解 export 和 import
除了上面提到的基本用法之外，你还需要了解更多的使用场景和技巧。
重新导出
重新导出是一种技术，可以从一个模块中导入内容，然后重新导出它们到另一个模块中。这在构建抽象层时很有用，可以隐藏底层实现的细节，如下所示：
-- -------------------- ---- ------- -- ------- ------ ----- -- - ----- ------ -------- --------- - ------ - - -- - ------ -------- ------- - ------ - - - - -- - -- --------------- ------ - ---- ------------ ------ -------- ------ - ------ ------------ -
在这个例子中，math.js 导出了三个函数和一个常量，advancedMath.js 从 math.js 中重新导出它们，并新增了一个名为 exp 的函数。现在，您可以像这样使用 advancedMath.js：
import { PI, square, cube, exp } from './advancedMath.js';动态导入
动态导入是在运行时加载模块的技术，这对于按需加载模块非常有用，能够大大减少初始加载时间。动态导入使用 import() 函数完成，如下所示：
// Dynamically load a module
const module = await import('./module.js');模块路径
默认情况下，import 和 export 语句会相对于当前模块的位置进行解析，但是如果您需要引用其他位置的模块，可以使用绝对或相对路径：
// import an absolute file path
import { stuff } from '/path/to/module.js';
// import a relative file path
import { stuff } from './relative/module.js';循环依赖
循环依赖是模块中导入和导出之间的递归依赖关系，可能会导致程序崩溃或死锁。通常，循环依赖是不好的设计，应该尝试避免它们。
使用 export 和 import 的最佳实践
使用 export 和 import 语句时，遵循以下最佳实践可以提高代码质量和可维护性：
- 明确命名导出和默认导出，以使代码更清晰易懂。
- 避免循环依赖，尽可能简化模块之间的依赖关系。
- 遵循模块路径的最佳实践，以确保模块位置的一致性和可移植性。
- 注意模块的大小和复杂性，将大型模块拆分成更小的模块，以提高可维护性和测试性。
总结
本文介绍了如何在 ES12 中使用 export 和 import 语句，并提供了一些示例代码来引导您的学习。我们还深入探讨了重新导出、动态导入、模块路径和循环依赖等最佳实践。希望这篇文章对您有所帮助，让您愉快地开发模块化应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654b54017d4982a6eb536f0a