ES6 Module 模块的语法

在 JavaScript 的发展史上，模块一直缺失，这使得将大型程序分解成互相依赖的小文件并轻松地将它们组合在一起变得困难。而其他语言早已拥有这项特性。

ES6（也称为 ECMAScript 2015）通过引入模块系统填补了这一空白，使开发人员能够以结构化和可维护的方式组织和重用代码。ES6 模块提供了强大的语法和机制，可用于导入和导出模块、定义模块作用域以及控制模块的加载行为。

模块语法

ES6 模块的语法基于关键词 export 和 import。

导出模块

// example.js
export const PI = 3.14;

export 关键词用于将变量、函数或类标记为可从其他模块导入。上面的示例将常量 PI 导出到其他模块中使用。

导入模块

// main.js
import { PI } from './example.js';

import 关键词用于导入其他模块。上面的示例从 example.js 模块导入 PI 常量。

模块作用域

ES6 模块遵循词法作用域规则。这意味着在模块中声明的变量和函数仅在该模块内部可用，不能被其他模块直接访问。

// module1.js
let secret = '🤫';

// module2.js
console.log(secret); // ReferenceError: secret is not defined

要从一个模块访问另一个模块的变量或函数，必须使用导出和导入机制。

模块加载策略

ES6 模块加载策略由 type="module" 脚本标签控制。

<script type="module" src="main.js"></script>

启用模块加载后，JavaScript 引擎将在加载和执行模块时遵循特定的规则。默认情况下，模块以静态方式加载，这意味着在执行脚本之前会预先加载所有依赖项。但是，可以使用动态加载策略，该策略允许在运行时加载依赖项。

异步加载

异步加载模块通过 async 关键词实现。

// main.js
const module = await import('./example.js');

异步加载不会阻塞脚本执行。相反，它会返回一个 Promise，该 Promise 在模块加载完成后解析。

总结

ES6 模块系统提供了一套丰富的语法和机制，使开发人员能够编写结构化、可维护和可重用的 JavaScript 代码。理解模块语法、作用域规则和加载策略对于有效利用 ES6 模块至关重要。通过掌握这些概念，开发人员可以构建更强大、更可扩展的应用程序。