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 导出的是一个引用绑定,而不是一个值的拷贝。如果导出模块内部的变量值发生改变,导入该模块的地方也能感知到这个变化。

相关推荐
vim怎么退出2 分钟前
谷歌性能优化知识点总结
前端
专业抄代码选手4 分钟前
在react中,TSX是如何转变成JS的
前端·javascript
葡萄城技术团队4 分钟前
【实践篇】从零到一:手把手教你搭建一套企业级 SpreadJS 协同设计器
前端
忆江南1 小时前
# iOS Block 深度解析
前端
米丘1 小时前
vue-router v5.x 路由模式关于 createWebHistory、 createWebHashHistory的实现
前端
本末倒置1831 小时前
Bun 内置模块全解析:告别第三方依赖,提升开发效率
前端·javascript·node.js
踩着两条虫1 小时前
AI 驱动的 Vue3 应用开发平台 深入探究(二):核心概念之DSL模式与数据模型
前端·vue.js·ai编程
牛奶1 小时前
200 OK不是"成功"?HTTP状态码潜规则
前端·http·浏览器
Hilaku2 小时前
OpenClaw 很爆火,但没人敢聊它的权限安全🤷‍♂️
前端·javascript·程序员
ConardLi2 小时前
OpenClaw 完全指南:这可能是全网最新最全的系统化教程了!
前端·人工智能·后端