【JS】一文带你了解CommonJS和ES6 Module的区别！让你一目了然！

XinZong
160 阅读4分钟

在现代JavaScript开发中，模块化是一个不可或缺的概念。随着ES6的推出，JavaScript的模块系统经历了巨大的变革。今天，我们将深入探讨CommonJS和ES6 Module之间的区别，帮助你更好地理解这两种模块化方案的优缺点。💡

在这里插入图片描述

一、语法差异

在语法上，CommonJS和ES6 Module在导入和导出模块时的语法有显著不同。

CommonJS

在CommonJS中，使用require来导入模块，使用module.exports或exports来导出模块。例如：

// 导出
module.exports = {
    hello: function() {
        console.log("Hello from CommonJS!");
    },
    name: 'CommonJS Module'
};

// 导入
const { hello, name } = require('./module');
hello(); // 输出: Hello from CommonJS!
console.log(name); // 输出: CommonJS Module

ES6 Module

在ES6 Module中，使用import和export关键字。例如：

// 导出
export function hello() {
    console.log("Hello from ES6 Module!");
}
export const name = 'ES6 Module';

// 导入
import { hello, name } from './module.js';
hello(); // 输出: Hello from ES6 Module!
console.log(name); // 输出: ES6 Module

这种语法的差异使得ES6 Module在可读性和可维护性上更具优势。

二、加载时机

加载时机也是两者之间的重要区别。

CommonJS - 运行时加载

CommonJS模块是在运行时加载的，这意味着模块的加载是动态的。例如：

const data = require('./data.js');
if (condition) {
    const dynamicModule = require('./dynamic.js');
}

在这种情况下，dynamic.js模块只有在条件满足时才会被加载，这种灵活性在某些场景下非常有用。

ES6 Module - 静态加载

而ES6 Module则是静态加载的，必须在文件的顶层进行导入，不能在条件语句中使用。这种设计使得ES6 Module在编译时就能进行优化：

import data from './data.js';  // 必须在顶层
// if (condition) {
//     import module from './module.js';  // ❌ 错误
// }

这种静态加载的特性使得ES6 Module能够更好地支持工具的静态分析和优化，比如Tree Shaking。

三、值的拷贝 vs 引用

在处理模块导出时，CommonJS和ES6 Module的行为也有所不同。

CommonJS - 值的拷贝

在CommonJS中，导出的值是一个拷贝。例如：

// module.js
let counter = 0;
module.exports = {
    counter: counter,
    increment: function() {
        counter++;
    }
};

// main.js
const module = require('./module');
console.log(module.counter);  // 0
module.increment();
console.log(module.counter);  // 0（不会改变，因为是拷贝）

在这个例子中，counter的值在导出时被拷贝，因此在main.js中对increment的调用不会影响到module.js中的counter。

ES6 Module - 值的引用

而在ES6 Module中，导出的值是一个引用：

// module.js
export let counter = 0;
export function increment() {
    counter++;
}

// main.js
import { counter, increment } from './module.js';
console.log(counter);  // 0
increment();
console.log(counter);  // 1（会改变，因为是引用）

这种设计使得ES6 Module在处理状态时更加灵活，能够实时反映模块内部的变化。

四、循环依赖处理

循环依赖是模块化开发中常见的问题，CommonJS和ES6 Module在处理循环依赖时的表现也不同。

CommonJS

在CommonJS中，循环依赖的处理是基于模块的加载顺序。例如：

// a.js
console.log('a starting');
exports.done = false;
const b = require('./b.js');
console.log('in a, b.done =', b.done);
exports.done = true;
console.log('a done');

// b.js
console.log('b starting');
exports.done = false;
const a = require('./a.js');
console.log('in b, a.done =', a.done);
exports.done = true;
console.log('b done');

输出结果会显示模块的加载顺序：

a starting
b starting
in b, a.done = false
b done
in a, b.done = true
a done

ES6 Module

而在ES6 Module中，循环依赖会导致未定义的行为，因为模块是静态分析的。例如：

// a.mjs
console.log('a starting');
export let done = false;
import { done as bDone } from './b.mjs';
console.log('in a, b.done =', bDone);
done = true;
console.log('a done');

// b.mjs
console.log('b starting');
export let done = false;
import { done as aDone } from './a.mjs';
console.log('in b, a.done =', aDone);
done = true;
console.log('b done');

在这种情况下，由于模块的加载顺序和静态分析的特性，可能会导致bDone和aDone的值未定义。

五、异步加载

异步加载是现代JavaScript开发中越来越重要的特性。

CommonJS - 同步加载

CommonJS模块是同步加载的，这意味着在加载模块时，代码会阻塞。例如：

const fs = require('fs');
const data = fs.readFileSync('file.txt'); // 阻塞式加载

这种方式在某些情况下可能导致性能问题，尤其是在处理大量模块时。

ES6 Module - 支持异步加载

而ES6 Module则支持异步加载，可以使用import()函数进行动态导入：

const loadModule = async () => {
    const module = await import('./dynamic-module.js');
    module.doSomething();
};

这种异步加载的特性使得ES6 Module在处理大型应用时更加高效，能够在需要时按需加载模块，提升应用性能。

六、主要区别总结

在总结CommonJS和ES6 Module的区别时，我们可以归纳出以下几点：

  1. 语法差异：CommonJS使用require和module.exports，ES6 Module使用import和export。
  2. 加载机制：CommonJS是运行时加载，ES6 Module是静态加载。
  3. 值的处理：CommonJS导出的是值的拷贝，ES6 Module导出的是值的引用。
  4. 模块对象：CommonJS使用module.exports，ES6 Module使用export。
  5. this指向：CommonJS中的this指向模块对象，而ES6 Module中的this是undefined。
  6. 文件扩展名：CommonJS可以省略.js，而ES6 Module必须带扩展名。

更多文章

【OpenAI】（一）获取OpenAI API Key的多种方式全攻略：从入门到精通，再到详解教程！！

【VScode】（二）VSCode中的智能AI-GPT编程利器，全面揭秘CodeMoss & ChatGPT中文版

【CodeMoss】（三）集成13个种AI模型（GPT4、o1等）、支持Open API调用、自定义助手、文件上传等强大功能，助您提升工作效率！ >>> - CodeMoss & ChatGPT-AI中文版

结语

希望大家看完这篇文章后，对CommonJS和ES6 Module有了更深入的理解。如果你觉得这篇文章对你有帮助，不妨收藏并分享给更多的朋友！🌟

avatar
文章
阅读
粉丝