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