ES11 中的模块引入：一个指南-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，模块化是一个非常重要的概念。而随着 ES6 模块化的普及，我们在代码编写中开始广泛使用 import 和 export 语句。而在 ES11 中，模块引入部分的语法又有了一些更新。在本文中，我们将探讨 ES11 模块引入的一些新特性，并讨论如何使用它们来提高代码组织和可读性。

基础语法

在 ES6 中，我们可以使用以下语法来导出模块：

// export.js
export const foo = "foo";
export function bar() {...}
export default baz;

然后，我们可以使用以下语法来导入模块：

// import.js
import {foo, bar} from './export.js';
import baz from './export.js';

在 ES11 中，导入和导出语法的基础与上述示例相同。然而，ES11 对导入语句做了一些新的改进，包括 export * as，export * from，以及可选的 catch 绑定语法。

在以前，我们不能将导入的所有符号动态地放入一个命名空间中。ES11 中，我们可以使用新的 export * as 语法来创建一个命名空间并将导出模块的所有内容导入它。

// module.js
export const foo = "foo";
export function bar() {...}

// main.js
export * as myModule from './module.js';

在上述示例中，引入了 module.js 中的所有内容，并将其导出为命名空间 myModule。现在，我们可以在其他的模块中使用 myModule 来访问 foo 和 bar。

// hello.js
import {myModule} from './main.js';
console.log(myModule.foo);

另一个常见的场景是在导出的模块中重新导出所有已经导出的符号，以使其他模块可以访问它们。在 ES11 中，我们可以使用 export * from 语法来实现此目的。

// foo.js
export function bar() {};
export const baz = "baz";

// main.js
export * from './foo.js';

在上述示例中，导出 foo.js 中的所有内容，以便在其他模块中访问 bar 和 baz。

注意，如果要从当前模块导入其他模块的所有导出，则必须首先将其命名为一个命名空间，否则会导致循环依赖。

在使用 import 语句时，我们通常都会使用 try/catch 的结构来捕获错误。然而，这往往会导致一些不必要的冗余代码。

在 ES11 中，我们可以使用可选的 catch 绑定语法来处理这个问题。例如：

try {
  import {foo} from './foo.js';
} catch {
  console.log("模块加载失败！");
}

在上述示例中，如果模块加载失败，则会打印一个错误信息。在不需要获取错误信息时，我们不需要复制 try/catch 语句的代码。

在 ES11 中，模块引入语句增加了一些新的特性，包括 export * as，export * from，以及可选的 catch 绑定语法。这些特性可以帮助我们更轻松地组织和重用代码，并提高代码的可读性。在实际开发中，我们可以根据这些特性的实际需求来组织和使用模块化语法。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6482949d48841e98941f777d