ES10（也称为 ECMAScript 2019）是目前最新的 JavaScript 标准。在这个版本中，模块系统也得到了重大的改进。本文将深入探讨 ES10 中的四种模块类型：import/export、模块默认值、动态导入，以及介绍它们的用法和实例。
1. import/export
在 ES10 中，可以使用 import 和 export 关键字来实现模块化。通过 import 关键字，我们可以将其他模块的导出引入到当前模块中。同样的，通过 export 关键字，我们可以将当前模块的某个变量或函数暴露出去，供其他模块使用。
下面是 import 和 export 的基本用法：
// greet.js
export const sayHello = () => console.log('Hello!');
export const sayGoodbye = () => console.log('Goodbye!');
// index.js
import { sayHello, sayGoodbye } from './greet.js';
sayHello(); // 输出：Hello!
sayGoodbye(); // 输出：Goodbye!在上面的例子中，我们将 sayHello 和 sayGoodbye 这两个函数从 greet.js 中导出，并在 index.js 中通过 import 关键字引入，然后调用这两个函数。
2. 模块默认值
除了导出和引入具名的变量和函数，我们还可以使用模块默认值。这意味着，我们可以为模块指定一个默认的输出，而无需使用具名的导出。
下面是一个简单的示例：
// sum.js export default (a, b) => a + b; // index.js import sum from './sum.js'; console.log(sum(1, 2)); // 输出：3
在上面的例子中，我们将 sum 模块的默认值设置为一个函数，该函数接受两个参数并返回它们的和。在 index.js 中，我们使用 import 关键字导入了 sum 模块的默认值，并使用它来计算 1 和 2 的和。
3. 动态导入
在传统的 import/export 模块化中，所有的导入都必须在代码的头部完成。但是，有时我们需要在运行时根据条件动态地引入模块。为了解决这个问题，ES10 引入了动态导入功能。
下面是一个简单的动态导入示例：
// index.js
const handleClick = async () => {
const { default: fetchResources } = await import('./fetch.js');
const resources = await fetchResources();
console.log(resources);
};
document.querySelector('#button').addEventListener('click', handleClick);在上面的例子中，我们将动态导入用于根据异步操作来加载模块。fetch.js 模块暴露了一个默认值，该值是一个异步函数，它将获取一些数据并返回它们。index.js 中的 handleClick 函数是一个异步函数，它使用 await 来等待动态导入 fetch.js 模块。一旦该模块被加载，我们就可以调用导入模块的默认值（即异步函数）。
总结
ES10 引入了四种模块类型：import/export，模块默认值，动态导入。它们提供了更加灵活、强大的模块化方法，使得我们在编写现代的 JavaScript 应用程序时更加方便和易于维护。
在实际的开发中，我们应当根据应用程序的需要来选择合适的导入和导出方法。如果只需要引入几个具名的变量或函数，那么使用 import/export 就好。如果我们需要为模块指定默认值，我们应该使用默认导出功能。如果我们需要在运行时动态加载模块，则可以使用动态导入功能。通过灵活使用这些功能，我们可以更加有效地组织我们的代码，并使其更加易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6455abd6968c7c53b0918cdd