ECMAScript Modules 规范示例详解
ECMAScript 模块是 JavaScript 代码的一种封装形式，它允许开发者将代码分割成不同的文件，每个文件包含一组相关的函数和变量。这些文件可以单独加载和执行，而不会影响其他文件。ECMAScript 模块规范定义了如何在 JavaScript 程序中实现代码的模块化和封装。
模块的定义
一个 ECMAScript 模块是一个独立的文件，其中包含了可以导出（export）供其他模块使用的函数、对象、类等，以及可以导入（import）其他模块提供的功能的代码。模块文件通常具有 `.mjs`、`.js` 或 `.ts` 扩展名。
模块语法
导出（Export）
要导出模块中的内容，可以使用 `export` 关键字。有两种方式可以导出：
1. **默认导出**：
export default function myFunction() {
// 函数实现
}
2. **命名导出**：
export const myVariable = "Hello, World!";
export function myFunction() {
// 函数实现
}
导入（Import）
要导入模块中的内容，可以使用 `import` 关键字。有两种方式可以导入：
1. **默认导入**：
import myFunction from './myModule.js';
2. **命名导入**：
import { myVariable, myFunction } from './myModule.js';
模块解析
当浏览器或 Node.js 解析模块时，它会遵循以下规则：
1. **相对导入**：从当前文件的目录开始查找。
2. **绝对导入**：从项目的根目录开始查找。
3. **扩展名省略**：如果未指定扩展名，浏览器和 Node.js 会在文件名后自动添加 `.js`。
循环依赖
当一个模块导入另一个模块，而后者又导入了前者时，就形成了循环依赖。在 ES6 模块中，这种情况下，只有被多次导入的模块会被解析一次，其余的导入将视为同一个模块。
模块加载
模块的加载可以通过多种方式实现：
1. **HTML 文件**：在 HTML 文件中，可以使用 `<script>` 标签加载模块，并设置 `type` 属性为 `module`。
<script type="module" src="./myModule.js"></script>
2. **JavaScript 文件**：在 JavaScript 文件中，可以使用 `import` 语句加载模块。
import { myVariable, myFunction } from './myModule.js';
3. **Node.js**：在 Node.js 中，可以使用 `require` 语句加载模块。
const myModule = require('./myModule.js');
模块缓存
为了提高性能，浏览器和 Node.js 会在本地缓存已加载的模块。这意味着一旦一个模块被加载，相同的模块在后续的页面加载中不会再次加载。
示例
下面是一个简单的模块示例，展示了如何导出和导入函数：
// myModule.js
export const myVariable = "Hello, World!";
export function myFunction() {return "This is a function from myModule.";
}
// main.js
import { myVariable, myFunction } from './myModule.js';
console.log(myVariable); // 输出: Hello, World!
console.log(myFunction()); // 输出: This is a function from myModule.
在这个示例中，`myModule.js` 文件定义了两个可以被其他文件使用的变量和函数。然后，`main.js` 文件通过 `import` 语句导入 `myModule.js` 文件中的内容，并使用这些变量和函数。
总结
ECMAScript 模块为 JavaScript 提供了模块化和封装的能力，使得大型项目的开发变得更加容易。通过使用模块，开发者可以将代码分割成更小的、可管理的部分，从而提高代码的可维护性和可重用性。随着浏览器和 Node.js 对 ES6 模块的支持日益成熟，模块化开发已成为现代 JavaScript 开发的标准实践。