在编写大型 JavaScript 应用程序时，模块化编程是非常重要的，它能够提高代码可重用性、可维护性和可扩展性。ES6 引入了一种新的模块化语法，其中包括两个关键字 import 和 export，在这篇文章中，我们将深入探讨这两个关键字的用途、语法和示例。
模块化程序设计的目标
在模块化程序设计中，我们的目标是将代码拆分成小而独立的片段，并将它们以可重用的方式组织起来。这些小片段也被称为模块，它们封装了特定的功能或数据结构。通过使用模块，我们可以最小化代码的耦合度，以便于修改和维护。
在 JavaScript 中，ES6 的模块化语法是通过 import 和 export 两个关键字来实现的。通过使用这些关键字，我们可以将功能划分为模块，使程序中相互依赖的模块保持有序。 下面我们来看看这两个关键字是如何工作的。
export 关键字
export 定义了一个模块的公共接口，它是将一个或多个变量、函数或类公开的全局范围。任何引用这个模块的代码，都可以访问该模块中的公共接口。通常情况下，我们会在 export 中将类、函数和常量公开给其它文件使用。
下面是一个简单的示例，说明了如何使用 export：
-- -------------------- ---- -------
-- ----------------
------ ----- ----------- - ----- -- -- ----------
-- ------
------ -------- -------------- -
----------------- -- -- -----------
-
-- -----
------ ----- ------- -
------------- -
----------------- -- -- --------
-
-在这个示例中，我们使用 export 将三个实体公开到全局范围：一个常量 MY_CONSTANT、一个函数 someFunction，以及一个类 MyClass。
import 关键字
import 关键字用于获取来自另一个模块的公共接口。它使我们能够使用其它模块的变量、函数和类。注意，使用 import 导入的内容总是只读的，不能在导出它的模块的作用域内改变其值。
下面是一个简单的示例，说明了如何使用 import：
-- -------------------- ---- ------- -- ----------- ------ - ------------ ------------ - ---- -------------- -- ----- ------ - ------- - ---- -------------- ------------------------- --------------- ----- --------------- - --- ----------
在这个示例中，我们使用 import 来获取一个常量 MY_CONSTANT、一个函数 someFunction 和一个类 MyClass，并在全局作用域中使用它们。
注意：在上述示例中，我们将 MyClass 直接导入到了全局作用域中，所以导入时没有用花括号 {} 包裹。如果我们想要导入多个实体，则必须使用花括号将它们括起来。
export default
默认模块是模块的默认输出，在模块中可以有多个命名输出，但只能有一个默认输出。在导入模块时，我们可以为默认输出选择任何名称。语法如下：
-- -------------------- ---- -------
-- ------
------ ------- -
----- ----------
---------
----------------------
---------------- ----- ----- ------------
-
--
-- ------
------ ------- ---- ------------在这个示例中，我们定义了一个默认输出，这个输出包含三个字段：name、value 和 printValue。我们可以在导入时使用任何名称来引用这个输出。
import myModule from './my-module'; console.log(myModule.name); // 输出 'Module1' myModule.printValue(); // 输出 'The value is: 10'
多重导出
在一个模块中，我们可以导出多个变量、函数或类。如果多个实体具有相同的名称，则可以导出它们的别名。
-- -------------------- ---- -------
-- ------
------ ----- ------- - ---
------ ----- ------- - ---
------ -------- ------------- -- -
------ - - --
-
------ ----- ------ -
----------------- -
--------- - -----
-
-
-- ----
------ - ------- -- ----- ------- -- ---- --我们可以导出多个实体，每个实体拥有唯一的名称。注意最后一段，我们将 number1 导出为别名 num1，将 number2 导出为别名 num2。
// 导入多个实体
import { num1, num2, addNumbers, Person } from './my-module';
const sum = addNumbers(num1, num2);
const person = new Person('John Doe');在这个示例中，我们使用别名 num1 和 num2 导入了 number1 和 number2，也导入了 addNumbers 和 Person。
结论
在本文中，我们深入探讨了 JavaScript 中模块化编程的目标，并详细地介绍了使用 import 和 export 关键字的语法和示例。了解和善用这两个关键字可以提高我们编写大型 JavaScript 应用程序的效率和代码质量。
如果你想要更深入地学习 JavaScript 模块化编程，可以从 ES6 的官方文档中获取更多内容和示例：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670878cdd91dce0dc871758a