ES Module 认识

ES Module 认识

ECMAScript Modules（ES Modules 或简称 ES6 Modules）是一种用于在现代 JavaScript 中进行模块化开发的规范。它是 ECMAScript 6（ES6）标准的一部分，也就是 JavaScript 的下一个主要版本。ES Modules 引入了一种新的、官方的模块系统，以解决以前在 JavaScript 中模块化开发中存在的一些问题。

以下是 ES Modules 的一些关键特点和概念：

1. 静态模块定义： ES Modules 使用静态模块定义，这意味着模块的结构在代码解析阶段就可以确定，不需要运行时的加载和解析过程。这有助于提高性能和可预测性。

2. 模块化语法： ES Modules 引入了新的语法，包括 import 用于导入模块，以及 export 用于导出模块。模块内部的变量和函数默认是私有的，不会污染全局作用域。

3. 单一实例： 每个 ES 模块只会被加载和执行一次。这意味着它们是单一实例，可以被多个模块引用，从而避免了循环依赖和全局污染的问题。

4. 模块的异步加载： ES Modules 支持异步加载模块，通过 import() 函数实现。这使得按需加载模块变得容易，有助于提高性能。

5. 模块化依赖： ES Modules 支持静态依赖分析，这意味着工具和编译器可以轻松识别和优化模块依赖关系，例如删除未使用的代码。

6. 循环依赖处理： ES Modules 有内置的循环依赖处理机制，它会自动处理模块之间的循环依赖，确保模块被正确加载。

7. 跨源请求： ES Modules 允许从不同源（跨域）加载模块，这对于构建现代 Web 应用程序非常重要。

8. 默认导出和命名导出： ES Modules 支持默认导出和命名导出。默认导出允许模块导出一个主要的功能，而命名导出允许模块导出多个功能。

示例 ES Module 语法：

// 导出一个默认功能
export default function() {
  // ...
}

// 导出命名功能
export function add(a, b) {
  return a + b;
}

// 导入模块
import defaultFunction from './module.js';
import { add } from './module.js';
1
2
3
4
5
6
7
8
9
10
11
12
13

ES Modules 提供了一种现代、标准化的模块系统，适用于浏览器和服务器端 JavaScript 开发。它解决了以前在 JavaScript 模块化开发中存在的一些问题，并提供了更好的性能和可维护性。虽然在浏览器环境中需要一些工具来处理 ES Modules，但它已经成为现代 JavaScript 开发的主要模块化方式。

ES Module 导入导出方式

在 ES Modules 中，你可以使用不同的方式导入和导出模块的功能。以下是一些常见的 ES Module 导入和导出方式：

导出方式：

1. 命名导出（Named Exports）： 使用 export 关键字，可以导出一个或多个命名的功能。其他模块可以使用这些名称导入相应的功能。

   // math.js
   export function add(a, b) {
     return a + b;
   }
   
   export function subtract(a, b) {
     return a - b;
   }
   1
   2
   3
   4
   5
   6
   7
   8

2. 默认导出（Default Export）： 使用 export default 关键字，可以导出一个默认功能。默认导出的模块可以在导入时使用任何名称。

   // config.js
   const config = {
     apiKey: 'your-api-key',
     authDomain: 'your-auth-domain',
   };
   
   export default config;
   1
   2
   3
   4
   5
   6
   7

导入方式：

1. 导入全部功能： 使用 import * as 关键字，可以导入模块中的所有功能并将它们放在一个对象中。这种方式适合当你需要导入多个功能时。

   // app.js
   import * as math from './math.js';
   
   console.log(math.add(2, 3)); // 使用命名导出的功能
   console.log(math.subtract(5, 2));
   1
   2
   3
   4
   5

2. 命名导入： 使用 import { functionName } 语法，可以导入模块中的特定功能。

   // app.js
   import { add, subtract } from './math.js';
   
   console.log(add(2, 3)); // 使用命名导出的功能
   console.log(subtract(5, 2));
   1
   2
   3
   4
   5

3. 默认导入： 使用 import name from 'module' 语法，可以导入默认导出的模块。你可以为导入的内容使用任何名称。

   // main.js
   import config from './config.js';
   
   console.log(config.apiKey); // 访问默认导出的内容
   1
   2
   3
   4

这些是一些常见的 ES Module 导入和导出方式，你可以根据需要选择适合你的项目的方式。ES Modules 提供了非常灵活的导入和导出选项，使你能够更好地组织和重用代码。

ES Module 解析流程

ES Modules（ESM）的解析流程是确定模块路径，查找和加载模块的一系列步骤。这个流程可以帮助 JavaScript 引擎找到正确的模块并加载它。以下是 ES Modules 的解析流程：

1. 解析模块路径： 当在代码中使用 import 语句导入一个模块时，首先要解析模块路径。这是一个字符串，指定要导入的模块的位置。模块路径可以是绝对路径、相对路径或模块标识符。

2. 确定模块标识符： 如果模块路径是一个模块标识符，引擎会根据模块解析算法来将其转换为实际的模块路径。这可能涉及到模块别名、映射关系或其他方式的解析。

3. 查找模块： 引擎会根据模块路径查找模块。查找过程通常包括以下几个步骤：

   • 核心模块： 首先，引擎会检查是否有内置的核心模块与模块路径匹配。如果有，它将直接加载核心模块。

   • 文件模块： 如果模块路径不匹配核心模块，引擎会尝试查找与模块路径匹配的文件模块。这可能涉及到相对路径、绝对路径、node_modules 目录等。

   • 文件夹模块： 如果没有找到匹配的文件模块，引擎会查找一个名为 package.json 的文件夹模块。在 package.json 文件中，有一个 main 字段指定了模块的入口文件。引擎将加载这个入口文件。

4. 解析和加载模块： 一旦找到匹配的模块，引擎会根据模块类型（ESM、CommonJS 等）解析和加载模块。对于 ESM，引擎会执行以下步骤：

   • 解析模块： 引擎会解析模块代码，查找和解析导入语句（import）。这将帮助引擎确定模块的依赖关系。

   • 递归加载依赖模块： 引擎会递归加载模块的依赖模块，执行相同的解析和加载流程。

   • 执行模块： 一旦所有依赖模块都加载完毕，引擎将执行当前模块的代码，导出相应的功能。

5. 模块缓存： 已加载的模块通常会被缓存，以避免重复加载。这可以提高性能并确保模块只加载一次。

6. 返回导出对象： 一旦模块加载完成并执行，引擎将返回导出对象，使其可供其他模块使用。

这是 ES Modules 解析流程的一般概述。流程中会根据模块路径的不同情况进行适当的解析和加载。ES Modules 提供了强大的模块化系统，支持导入和导出功能，以帮助组织和重用 JavaScript 代码。