【JS】ESMoudle机制与符号绑定

前言

JS 模块化有两种方式，分别为：CommonJS 和 ESModule。与 CommonJS 不同，ESModule 是静态模块系统，意味着在代码编译阶段（而不是运行时），模块依赖关系就已经被确定。

ESModule 优势

• 更好地支持静态优化：例如树摇优化（Tree-shaking），未使用的导出内容可以在打包时被剔除。
• 更高效的模块加载：在加载模块时，依赖关系已经确定，可以更高效地并行加载依赖。

ESModule机制

CommonJS 模块是同步加载的，模块的导入与执行是在运行时完成的；而 ESModule 模块则是异步加载的，导入的模块会在执行前解析所有的依赖关系。

1. 引入所有依赖：当引入模块时，首先会找到模块依赖的所有其他模块。
2. 递归解析依赖：对于每个依赖，ESModule 会继续递归解析，确保所有依赖都被引入。
3. 依赖执行顺序：所有模块依赖被解析后，按依赖关系从上往下执行。无依赖的模块优先执行，依赖模块在所有依赖完成加载后执行。
   通过下面案例观察解析与运行机制

// a.js
console.log('a加载完毕');
export const a = 10;

// b.js
import { a } from './a.js';
console.log('b加载完毕');
export const b = a + 10;

// main.js
import { b } from './b.js';
console.log('main加载完毕');

1. 解析

ESModule 模块的解析阶段是静态的，即在执行代码之前，所有 import 和 export 语句已经被解析。在解析阶段：

• 浏览器或 JS 引擎首先扫描 main.js，遇到 import { b } from './b.js'，main.js 依赖 b.js，但不会执行代码。
• 解析 b.js ，遇到 import { a } from './a.js'，发现 b.js 依赖于 a.js。
• 解析 a.js，此时没有更多的依赖，解析工作结束。

解析完成后，JavaScript 引擎会形成一个模块依赖图，类似于如下的结构：

main.js -> b.js -> a.js

2. 执行

按依赖关系依次执行模块：

1. a.js 被加载并执行。
2. b.js 被加载，依赖于 a.js，因此等待 a.js 执行完毕后再执行。
3. main.js 在所有模块加载完毕后执行。

符号绑定

在 ECMAScript 中，import 和 export 提供了符号绑定（binding）的机制，允许模块之间共享符号的引用，而不是将导出的值简单拷贝。即导出的值是动态的、可变的，且与导入的模块共享同一个内存空间中的引用。这也是 JS 中唯一的共享内存空间的场景。

案例

// counter.js
export let count = 0;

export function increment() {
  count += 1;
}

// main.js
import { count, increment } from './counter.js';

console.log(count); // 输出: 0
increment();
console.log(count); // 输出: 1

由于符号绑定机制，如果导出模块中的变量值发生变化，导入模块会立即感知到这一变化，因为它们引用的是同一个符号。

当导出的是一个对象时，所有导入该对象的模块都共享同一个内存地址，修改对象中的属性或方法会对所有模块产生影响。

// person.js
export const person = {
  name: "田本初",
  age: 23,
}
export function updateName(newName) {
  person.name = newName
}
export function updateAge(newAge) {
  person.age = newAge
}

// a.js
import { person, updateName } from "./person.js"

console.log(person, "a0")
updateName("张三")
console.log(person, "a1")

// b.js
import { person, updateAge } from "./person.js"

console.log(person, "b0")
updateAge(24)
console.log(person, "b1")

// main.js
import "./a.js"
import "./b.js"

打印结果如下：

符号绑定小结

• 符号绑定：ESModule 中的 import 和 export 是符号绑定机制，而不是值的拷贝。导入模块得到的是导出符号的引用。
• 共享内存空间：导入的变量和导出的变量共享同一块内存，因此修改导出模块中的值会影响到导入模块中的值。
• 动态值更新：导出模块中的值可以动态更新，导入模块会同步这些变化。
• 只读特性：导入的值在导入模块中是只读的，不能直接修改，但可以通过函数间接修改导出的值。

ESModule 与 CommonJS 的区别

总结

1. 解析与编译：
   浏览器或 Node.js 在加载 ESModule 时，会先静态分析，通过 import 和 export 分析所有模块之间的依赖关系，构建模块的依赖树。import 和 export 声明会在解析阶段执行，而不是等到模块运行时。

2. 加载与执行顺序：
   模块会按依赖关系先加载、再执行。如果某个模块没有依赖，则它的代码会优先执行。所有依赖被解析后，才会执行顶层模块的代码。
   ESModule 的加载过程是异步的，特别是在浏览器环境中，结合 type=“module” 可以实现模块的并行加载和按需执行。
   在执行时，先解析模块的依赖树，确保所有依赖的模块按照顺序执行。上例中，a.js 无依赖，因此先执行，b.js 依赖 a.js，最后 main.js 依赖 b.js。

3. 懒执行：
   模块只有在被依赖的情况下才会执行代码。例如，只有 main.js 引入 b.js 时，b.js 才会被执行。

4. 静态优化
   由于导入导出是静态的，可以进行树摇优化，剔除未使用的模块，从而优化打包体积。

5. 按需加载
   即使模块间有依赖关系，只有导入部分会被实际使用，其它未使用的模块不会被加载。