es6 和 commonJS 模块管理的区别

🕗 发布于 2024-09-21 11:01 es6 前端 ecmascript

ES6 模块和 CommonJS 模块是两种广泛使用的 JavaScript 模块化方案。它们之间有许多显著的区别，包括语法、特性、运行时行为、兼容性等方面。

1. 模块引入背景

在 JavaScript 语言发展早期，并没有提供官方的模块化机制。随着应用规模的增加，开发者需要将代码拆分成更小的模块，来实现更好的维护性、复用性和解耦性。于是社区开发了多种模块系统，CommonJS 是其中之一。CommonJS 主要应用于 Node.js 环境中，成为了服务器端 JavaScript 的标准模块系统。

然而，随着前端应用的复杂性逐渐增加，JavaScript 在浏览器环境中也迫切需要一种标准化的模块机制。因此，ECMAScript 6（ES6）引入了官方的模块系统——ES6 模块（也叫 ECMAScript Modules，ESM）。

2. 语法和导入导出方式

2.1 CommonJS

CommonJS 使用 require 函数引入模块，使用 module.exports 导出模块。其语法非常直观，代码加载是在运行时完成的。

// 导出
const fs = require('fs');

function readFile(filename) {
    return fs.readFileSync(filename, 'utf-8');
}

module.exports = {
    readFile,
};

在上面的例子中，我们通过 require 引入了 Node.js 内置的 fs 模块，然后导出了一个 readFile 函数供其他模块使用。

// 引入
const { readFile } = require('./fileReader');
console.log(readFile('example.txt'));

在引入模块时，通过 require 动态加载所需模块，并访问其导出的内容。

2.2 ES6 模块

ES6 模块使用 import 和 export 语句进行模块的引入和导出。与 CommonJS 不同，ES6 模块的引入是在编译时进行的，并且 import 和 export 语句是声明式的。

// 导出
import fs from 'fs';

export function readFile(filename) {
    return fs.readFileSync(filename, 'utf-8');
}

引入模块时，使用 import 关键字：

// 引入
import { readFile } from './fileReader.js';
console.log(readFile('example.txt'));

ES6 模块可以进行命名导出（named exports）和默认导出（default exports），这使得模块导出机制更加灵活。

// 默认导出
export default function greet() {
    console.log('Hello, World!');
}

// 命名导出
export const pi = 3.14;

// 引入默认导出和命名导出
import greet, { pi } from './utils.js';

greet(); // Hello, World!
console.log(pi); // 3.14

2.3 语法上的主要区别

CommonJS 使用 require 和 module.exports，而 ES6 模块使用 import 和 export。
CommonJS 可以在运行时动态引入模块，而 ES6 模块是静态导入的，必须在代码的顶层声明导入。
ES6 模块可以导入部分模块内容（通过命名导出），而 CommonJS 导入时必须引入整个模块。

3. 模块加载机制

3.1 CommonJS 的加载机制

CommonJS 模块是同步加载的。这意味着在服务器端（如 Node.js）使用时，模块在代码运行时动态加载。这种方式适用于服务器端 JavaScript，因为在服务器环境中，模块文件已经存在于磁盘上，可以快速加载。

当使用 require 导入一个模块时，Node.js 会按顺序执行该模块的所有代码，并将结果缓存在内存中。这意味着，如果同一个模块被多次 require，只会在第一次加载时执行其代码，后续加载将从缓存中获取。这种机制称为单例模式。

// 运行时同步加载
const data = require('./data.json');
console.log(data);

3.2 ES6 模块的加载机制

ES6 模块则是异步加载的，特别是在浏览器环境中，模块文件通常需要从远程服务器获取，因此必须采用异步机制来避免阻塞代码执行。

ES6 模块的引入是基于静态分析的，这意味着 JavaScript 引擎在编译时会预先解析 import 语句，并构建模块的依赖关系图。这种静态加载机制使得 ES6 模块能够进行诸如 Tree Shaking 等优化，因为编译器可以确定哪些模块或代码片段未被使用，并在打包时移除它们。

// 浏览器端异步加载
<script type="module">
    import { readFile } from './fileReader.js';
    console.log(readFile('example.txt'));
</script>

在这种情况下，模块的加载和执行是非阻塞的，浏览器会自动处理依赖关系并按需加载模块。

4. 顶层作用域和模块作用域

4.1 CommonJS

在 CommonJS 中，每个文件被视为一个模块，并且有自己的模块作用域。模块的顶层变量和函数不会与其他模块发生冲突。因为 CommonJS 模块在执行时，代码实际上是被包裹在一个函数里，避免了与其他模块的命名冲突。

// a.js
const x = 1;
module.exports = x;

// b.js
const y = 2;
module.exports = y;

// x 和 y 是独立的

4.2 ES6 模块

ES6 模块同样有自己的模块作用域。每个模块在其自身的作用域内运行，模块之间不会相互干扰。此外，ES6 模块默认采用严格模式（use strict），这意味着一些常见的 JavaScript 问题（如隐式全局变量）会被自动避免。

// utils.js
const secret = 'hidden';
export const pi = 3.14;

// math.js
import { pi } from './utils.js';

console.log(secret); // ReferenceError: secret is not defined

在上述代码中，secret 变量只在 utils.js 模块中可见，math.js 无法访问该变量。

5. 缓存与单例模式

5.1 CommonJS

如前所述，CommonJS 模块系统遵循单例模式，即每个模块只会被加载和执行一次。模块的内容会被缓存起来，如果该模块再次被引入，Node.js 会直接返回缓存的结果。

// 只有首次 require 时，模块代码会被执行
const foo = require('./foo');
foo(); // "foo loaded"

在此之后，require('./foo') 将只会返回已缓存的模块对象，而不会重新执行其代码。

5.2 ES6 模块

ES6 模块也会被缓存，但其行为略有不同。因为 ES6 模块是基于静态分析的，并且在模块的导入阶段已经建立了依赖关系，所以它在每次引入时都会返回同一个模块实例。换句话说，ES6 模块同样是单例的。

不过，ES6 模块的缓存和 CommonJS 不同，它更加强调对模块依赖图的静态优化。

6. 动态引入

6.1 CommonJS

CommonJS 允许你在程序的任何位置动态引入模块，因为 require 是一个普通的函数，它可以根据条件进行调用。

if (condition) {
    const moduleA = require('moduleA');
} else {
    const moduleB = require('moduleB');
}

这种灵活性使得 CommonJS 非常适合构建需要在运行时确定依赖关系的应用。

6.2 ES6 模块

ES6 模块的静态特性使得它不支持像 CommonJS 那样的动态导入。不过，ES6 提供了一个 import() 函数来实现动态引入。import() 返回一个 Promise，并且是在异步加载模块时使用的。

if (condition) {
    import('./moduleA.js').then(moduleA => {
        // 使用 moduleA
    });
} else {
    import('./moduleB.js').then(moduleB => {
        // 使用 moduleB
    });
}

这种动态引入的方式为 ES6 模块提供了异步加载和按需加载的能力，非常适合用于前端开发，特别是在构建大型应用时，可以有效地减少初始加载时间。

7. 兼容性与适用场景

7.1 CommonJS

CommonJS 是为服务器端设计的模块系统，Node.js 完全支持它。因此，如果你的项目主要在服务器

端运行，CommonJS 通常是一个不错的选择。

然而，CommonJS 并不是为浏览器环境设计的，虽然有一些工具（如 Browserify）可以将 CommonJS 模块打包到浏览器中使用，但相比于 ES6 模块，CommonJS 并不是浏览器的原生模块系统。

7.2 ES6 模块

ES6 模块是 JavaScript 官方规范的一部分，现代浏览器原生支持 ES6 模块。在浏览器环境下，ES6 模块是首选的模块化方案，特别是在前端应用开发中，结合 Webpack 等工具，ES6 模块可以很好地优化代码，提升加载效率。

Node.js 也在逐步支持 ES6 模块，尽管在某些情况下仍需通过 --experimental-modules 标志开启实验性支持，但在未来，ES6 模块将成为 Node.js 的主流模块系统。

总结

ES6 模块和 CommonJS 模块各有其优点和适用场景。CommonJS 适合服务器端开发，具有运行时加载、动态引入和单例缓存的特点。ES6 模块则更加现代化，支持静态分析、异步加载和浏览器原生支持，在前端开发中展现出显著的优势。

在开发过程中，选择哪个模块系统应根据项目的需求和运行环境来决定。如果是在浏览器中开发现代化的前端应用，ES6 模块是最佳选择；而如果是构建基于 Node.js 的后端应用，CommonJS 依然是主流。

原文地址：https://blog.csdn.net/Flying_Fish_roe/article/details/142374785

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：如何解决DataGrip的 Public Key Retrieval is not allowed错误
下一篇：LeetCode题练习与总结：数字 1 的个数--233

单片机和FPGA有什么区别？
总的来说，选择单片机还是FPGA取决于具体的应用需求、成本预算、开发资源和性能要求。单片机更适合成本敏感和性能要求不高的应用，而FPGA则适用于需要高度定制化和高性能的应用。
阅读更多2024-11-15
离线语音识别自定义功能怎么用？
自学习功能是指终端用户可以通过语音输入的方式学习客户词条，来自定义唤醒词和命令词。设备默认可以通过“开灯”执行打开灯的动作，用户通过语音输入学习了“开一下灯”，则可以通过“开一下灯”的说法来执行打开灯
阅读更多2024-11-15
PPT技巧：如何合并PPT文件？
如何合并PPT文件？
阅读更多2024-11-15
Unity3D高级编程
本文是unity3d编程的核心内容，包括了多个知识点以及C#代码实现
阅读更多2024-11-15
HOW - PPT 制作系列（一）
注意以上几点，可以让一页PPT既美观又高效地传达信息。
阅读更多2024-11-15
不仅能够实现前后场的简单互动，而且能够实现人机结合，最终实现整个巡检流程的标准化的智慧园区开源了
智慧园区场景视频监控平台是一款功能强大且简单易用的实时算法视频监控系统。它的愿景是最底层打通各大芯片厂商相互间的壁垒，省去繁琐重复的适配流程，实现芯片、算法、应用的全流程组合，从而大大减少企业级应用约
阅读更多2024-11-15
云原生后端
一、背景与概念二、关键技术三、优势四、应用场景
阅读更多2024-11-15
云原生学习
云原生学习：介绍、Docker容器化
阅读更多2024-11-15
气膜球幕展览馆：开启元宇宙时代的沉浸式科技体验—轻空间
球幕结构能够包裹观众的全部视野，在这里，每一幅画面都经过精心调校，色彩真实、细节丰富，使得场景的还原度达到一个全新的高度。这样独特的沉浸感，是传统展览馆所无法比拟的，气膜球幕展览馆让每一位参观者都仿佛
阅读更多2024-11-15
Istio分布式链路监控搭建：Jaeger与Zipkin
Jaeger是由Uber开源的分布式追踪系统，它采用Go语言编写，主要借鉴了Google Dapper论文和Zipkin的设计，兼容OpenTracing以及Zipkin追踪格式，目前已经成为CNCF
阅读更多2024-11-15