commonjs 和 ES Module

1. CommonJS (CJS)

是什么?

CommonJS 是为 服务器端 设计的模块化规范,最著名的实现就是 Node.js。它的诞生远早于浏览器原生支持模块化。

核心思想:

通过 require 来同步加载模块,通过 module.exports 或 exports 来导出模块。

工作原理与特性:

  1. 同步加载 (Synchronous): 当你执行 const fs = require('fs'); 时,Node.js 会暂停后续代码的执行,去磁盘上找到 fs 模块,执行它,然后返回 module.exports 的值。这个过程是阻塞的。

    • 为什么是同步? 因为在服务器上,所有模块文件都在本地硬盘,读取速度非常快,同步加载的开销很小,且实现简单。
  2. 模块输出的是值的拷贝: 当一个模块被 require 时,它会执行一次,然后将其 module.exports 的结果缓存起来。之后再次 require 同一个模块,会直接从缓存中读取。导出的如果是原始类型(如 string, number),那么导入的是这个值的拷贝。如果是对象,则是对象引用的拷贝。

    • 关键点: 一旦导出,模块内部的变化不会影响到已经导入的值(除非导出的是对象,然后修改对象的属性)。
  3. 运行时加载 (Runtime Loading): require 是一个函数,你可以在代码的任何地方调用它,甚至可以动态拼接路径(虽然不推荐)。模块的依赖关系在代码执行时才确定。

模块导出的是对象的引用 ,所以修改对象属性时会影响到其他 require 该模块的地方。而原始值则是拷贝传递的,不会受到影响。

如果模块导出的是对象或数组(即引用类型),那么修改导入模块中的内容会影响原模块中导出的内容,因为导入的模块是原对象或数组的引用。

如果模块导出的是原始数据类型(如 number, string, boolean 等),修改导入模块的内容不会影响原模块中的值。因为在 require 时,Node.js 会把这些值拷贝给导入模块,而不是引用它们。

ES Module (ESM)

是什么?

ES Module 是 ECMAScript 官方标准 的模块化方案,旨在统一浏览器和服务器端的模块化体验。它是现代 JavaScript 的标准。

核心思想:

通过 import 关键字导入模块,通过 export 关键字导出模块。

工作原理与特性:

  1. 异步加载 (Asynchronous): ESM 的设计初衷就考虑了浏览器环境,模块可能需要通过网络加载,因此其底层设计是异步的。浏览器会解析依赖关系,并行下载文件,然后按顺序执行。

    • 为什么是异步? 为了不阻塞浏览器渲染,提升用户体验。
  2. 静态解析 (Static Analysis): import 和 export 语句必须在模块的顶层,不能在条件语句、循环或函数中。

    • 为什么是静态? 这使得构建工具(如 Webpack, Vite)可以在编译时 就确定模块的依赖关系图,而无需执行代码。这是实现 Tree Shaking (摇树优化,即移除未使用的代码) 的基础。
  3. 模块输出的是值的实时绑定 (Live Binding): ESM 导出的是一个引用绑定,而不是一个值的拷贝。如果导出模块内部的变量值发生改变,导入该模块的地方也能感知到这个变化。

相关推荐
程序员爱钓鱼1 小时前
Node.js 编程实战:文件读写操作
前端·后端·node.js
PineappleCoder1 小时前
工程化必备!SVG 雪碧图的最佳实践:ID 引用 + 缓存友好,无需手动算坐标
前端·性能优化
JIngJaneIL1 小时前
基于springboot + vue古城景区管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
敲敲了个代码2 小时前
隐式类型转换:哈基米 == 猫 ? true :false
开发语言·前端·javascript·学习·面试·web
澄江静如练_2 小时前
列表渲染(v-for)
前端·javascript·vue.js
JustHappy2 小时前
「chrome extensions🛠️」我写了一个超级简单的浏览器插件Vue开发模板
前端·javascript·github
Loo国昌2 小时前
Vue 3 前端工程化:架构、核心原理与生产实践
前端·vue.js·架构
sg_knight2 小时前
拥抱未来:ECMAScript Modules (ESM) 深度解析
开发语言·前端·javascript·vue·ecmascript·web·esm
LYFlied2 小时前
【每日算法】LeetCode 17. 电话号码的字母组合
前端·算法·leetcode·面试·职场和发展