ES6 模块是 JavaScript 中的一项重要特性，它允许开发者将代码拆分成多个独立的文件，并通过 import 和 export 关键字来进行模块间的引用和导出。在 ES11 中，对 ES6 模块进行了一些改进和优化，使其更加易用和灵活。本文将详细介绍 ES11 中如何正确使用 ES6 模块，并提供一些示例代码和指导意义。
ES6 模块的基本语法
在 ES6 中，我们可以使用 export 关键字来导出一个模块，例如：
// module.js export const foo = 'hello'; export function bar() { console.log('world'); }
然后在另一个文件中使用 import 关键字来引用该模块：
// main.js import { foo, bar } from './module.js'; console.log(foo); // 输出：hello bar(); // 输出：world
上述代码中，我们使用了 export 关键字来导出了一个常量和一个函数，并使用 import 关键字来引用了该模块中的这两个变量。需要注意的是，模块的路径需要使用相对路径或绝对路径来指定。
ES11 中对 ES6 模块的改进
在 ES11 中，对 ES6 模块进行了一些改进和优化，使其更加易用和灵活。具体来说，ES11 中新增了以下功能：
动态导入
在 ES6 中，模块的导入必须在代码的顶部进行，无法在运行时进行动态导入。而在 ES11 中，我们可以使用 import() 函数来动态导入模块，例如：
const module = await import('./module.js'); console.log(module.foo); // 输出：hello module.bar(); // 输出：world
上述代码中，我们使用 import() 函数来动态导入了一个模块，并使用 await 关键字来等待导入完成。需要注意的是，import() 函数返回的是一个 Promise 对象，因此需要使用 await 或 .then() 来获取导入的模块。
命名导出和默认导出的混合使用
在 ES6 中，我们可以使用 export default 关键字来导出一个默认的模块，例如：
// module.js export default function() { console.log('hello world'); }
然后在另一个文件中使用 import 关键字来引用该模块：
// main.js import myFunction from './module.js'; myFunction(); // 输出：hello world
需要注意的是，一个模块只能有一个默认导出。而在 ES11 中，我们可以将默认导出和命名导出混合使用，例如：
// module.js export default function() { console.log('hello world'); } export const foo = 'hello';
然后在另一个文件中使用 import 关键字来引用该模块：
// main.js import myFunction, { foo } from './module.js'; myFunction(); // 输出：hello world console.log(foo); // 输出：hello
上述代码中，我们将默认导出和命名导出混合使用，并在另一个文件中使用 import 关键字来引用了该模块中的默认导出和命名导出。
在 ES11 中，我们可以使用 ES6 模块来进行代码的拆分和组织，使代码更加易于维护和扩展。为了正确使用 ES6 模块，我们需要注意以下几点：
使用相对路径或绝对路径来引用模块
在 ES6 模块中，我们需要使用相对路径或绝对路径来引用模块。使用相对路径可以使代码更加易于移植和复用，而使用绝对路径可以保证代码的可靠性和稳定性。
使用命名导出和默认导出来组合模块
在 ES11 中，我们可以使用命名导出和默认导出来组合模块，使模块更加灵活和易于使用。需要注意的是，一个模块只能有一个默认导出，而命名导出可以有多个。
使用动态导入来进行动态加载
在 ES11 中，我们可以使用 import() 函数来进行动态导入，使代码更加灵活和高效。需要注意的是，import() 函数返回的是一个 Promise 对象，因此需要使用 await 或 .then() 来获取导入的模块。
示例代码
下面是一个使用 ES6 模块的示例代码：
-- -------------------- ---- ------- -- --------- ------ ----- --- - -------- ------ -------- ----- - --------------------- - ------ ------- ---------- - ------------------ -------- - -- ------- ------ ----------- - ---- --- - ---- -------------- ----------------- -- -------- ------ -- -------- ------------- -- -------- ----- -- ---------- ----- ------ - ----- ---------------------- ------------------------ -- -------- ------------- -- -------- ----------------- -- -------- -----展开代码
上述代码中，我们定义了一个模块 module.js，其中包含了一个常量、一个函数和一个默认导出。然后在 main.js 中使用 import 关键字来引用了该模块中的常量、函数和默认导出，并在 dynamic.js 中使用 import() 函数来动态导入了该模块，并使用 await 关键字来等待导入完成。最后输出了引用的变量和调用的函数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cbd3cae46428fe9e4e503b
