JavaScript 是一门非常流行的编程语言，尤其在前端开发领域中广泛应用。在 JavaScript 中，模块化编程是一个非常重要的概念，它可以帮助开发者更好地组织代码，提高代码的可维护性和可重用性。而在模块化编程中，export 和 import 是两个非常重要的关键字，它们可以帮助我们导出和导入模块。本文将详细介绍 export 和 import 的区别，并探讨 ES11 对它们的影响。
export 和 import 的基本用法
在 JavaScript 中，我们可以使用 export 关键字将一个模块中的函数、变量或对象等导出。例如，我们可以定义一个名为 myModule.js 的模块，其中包含一个名为 myFunction 的函数，然后使用 export 将它导出：
-- ----------- ------ -------- ------------ - ------------------- --------- -
而在另一个模块中，我们可以使用 import 关键字将 myFunction 导入并使用它：
-- ---------------- ------ - ---------- - ---- ---------------- ------------- -- -- ------- -------
在上面的代码中，我们使用 import 从 myModule.js 中导入了 myFunction，然后在 anotherModule.js 中使用它。
需要注意的是，当我们使用 export 导出一个变量、函数或对象时，其它模块可以通过 import 引用它，但是这个变量、函数或对象本身并不会被复制或克隆，而是被共享。这意味着，如果我们在一个模块中修改了导出的变量、函数或对象，那么其它引用它的模块中也会受到影响。
export 和 import 的不同方式
在 JavaScript 中，有多种不同的方式可以使用 export 和 import 导出和导入模块。以下是其中的几种方式：
1. 命名导出和命名导入
我们可以使用命名导出和命名导入，将一个或多个函数、变量或对象等按名称导出和导入。例如：
-- ----------- ------ -------- ------------ - ------------------- --------- - ------ ----- ---------- - ------- --------
-- ---------------- ------ - ----------- ---------- - ---- ---------------- ------------- -- -- ------- ------- ------------------------ -- -- ------- -------
在上面的代码中，我们使用命名导出将 myFunction 和 myVariable 导出，然后使用命名导入将它们导入。
2. 默认导出和默认导入
除了命名导出和命名导入之外，我们还可以使用默认导出和默认导入。默认导出只能导出一个值，而默认导入不需要使用花括号，直接导入即可。例如：
-- ----------- ------ ------- ---------- - ------------------- --------- -
-- ---------------- ------ ---------- ---- ---------------- ------------- -- -- ------- -------
在上面的代码中，我们使用默认导出将一个函数导出，然后使用默认导入将它导入。需要注意的是，由于默认导出只能导出一个值，所以我们在导入时直接使用变量名即可，不需要使用花括号。
3. 合并导出
有时候我们需要将多个模块中的函数、变量或对象等合并导出，这时我们可以使用合并导出。例如：
-- ----------- ------ -------- ------------ - ------------------- --------- - ------ ----- ---------- - ------- --------
-- ---------------- ------ - ---- ----------------
-- ------------------- ------ - ----------- ---------- - ---- --------------------- ------------- -- -- ------- ------- ------------------------ -- -- ------- -------
在上面的代码中，我们先在 myModule.js 中定义了一个名为 myFunction 的函数和一个名为 myVariable 的变量，并使用命名导出将它们导出。然后在 anotherModule.js 中使用 export * 将 myFunction 和 myVariable 合并导出。最后在 yetAnotherModule.js 中使用命名导入将它们导入并使用。
ES11 的影响
ES11（也称为 ECMAScript 2020）是 JavaScript 的最新版本，它在 export 和 import 方面引入了一些新的特性。以下是其中的一些：
1. 动态导入
在 ES11 中，我们可以使用动态导入来导入模块。动态导入可以延迟加载模块，这意味着我们可以在运行时根据需要加载模块。例如：
----- ---------- - ---------------- ---------------------------------- -- - ---------------------- -- -- ------- ------- ---
在上面的代码中，我们使用 import 函数动态导入了 myModule.js，然后在 Promise resolve 后使用它。
2. 命名空间导出
在 ES11 中，我们可以使用命名空间导出来导出多个模块。命名空间导出可以将多个模块按命名空间导出，这样可以更好地组织模块。例如：
-- ----------- ------ ----- ---------- - ------- -------- ------ -------- ------------ - ------------------- --------- -
-- ---------------- ------ ----- --------------- - ------- -------- ------ -------- ----------------- - ------------------- --------- -
-- -------- ------ - -- -------- ---- ---------------- ------ - -- ------------- ---- ---------------------
-- ------ ------ - --------- ------------- - ---- ------------- --------------------------------- -- -- ------- ------- ---------------------- -- -- ------- ------- ------------------------------------------- -- -- ------- ------- -------------------------------- -- -- ------- -------
在上面的代码中，我们先在 myModule.js 和 anotherModule.js 中定义了一些变量和函数，并使用命名导出将它们导出。然后在 index.js 中使用命名空间导出将它们按命名空间导出。最后在 app.js 中使用命名导入将它们导入并使用。
总结
本文介绍了 JavaScript 中 export 和 import 的基本用法和不同方式，以及 ES11 对它们的影响。需要注意的是，虽然 ES11 提供了一些新的特性，但是它们并不是所有浏览器都支持的，所以在实际开发中需要注意兼容性。同时，我们也需要根据具体的情况选择合适的导出和导入方式，以便更好地组织代码，提高代码的可维护性和可重用性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/650d464e95b1f8cacd6fb635