在前端开发中，模块化已经成为了一种标配，它能帮助我们更好地管理项目结构，提高代码复用率和可维护性。而 CommonJS 模块化规范作为 Node.js 应用程序的标准模块系统，也在前端与后端开发中得到了广泛的应用。本文将深入介绍 CommonJS 模块化规范，从多个方面对其进行详细的阐述。
一、CommonJS和ES6模块的区别
在 CommonJS 模块中，模块是静态的，只在模块第一次加载时执行一次，然后就会被缓存起来供后续的调用。而 ES6 模块中，模块则是动态的，可以根据需要多次执行，每次执行时会重新加载一次模块。
// CommonJS模块
// module.js
let count = 0;
module.exports = {
getCount: function() {
return count;
},
increment: function() {
count++;
}
}
// index.js
let module = require('./module');
module.increment();
console.log(module.getCount()); // 1
module.increment();
console.log(module.getCount()); // 2
// ES6模块
// module.js
let count = 0;
export function getCount() {
return count;
}
export function increment() {
count++;
}
// index.js
import { getCount, increment } from './module';
increment();
console.log(getCount()); // 1
increment();
console.log(getCount()); // 2
在 CommonJS 模块中，通过 module.exports 将模块暴露出去。而在 ES6 模块中，通过 export 将模块暴露出去。在使用时，CommonJS 模块通过 require 引入，ES6 模块通过 import 引入。
二、CommonJS的modules对象
在 CommonJS 模块中，还有一个 modules 对象用于存储所有的模块，包括主模块和子模块。它是 Node.js 负责模块管理的重要数据结构。
// 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');
// main.js
console.log('main starting');
const a = require('./a.js');
const b = require('./b.js');
console.log('in main, a.done =', a.done, ', b.done =', b.done);
在上面的代码中，a.js 和 b.js 互相引用，main.js 引用了 a.js 和 b.js 两个模块。通过运行 main.js，可以看到以下输出：
$ node main.js main starting a starting b starting in b, a.done = false b done in a, b.done = true a done in main, a.done = true , b.done = true
可以看到，当 a.js 加载时，它会先加载 b.js。当 b.js 加载时，由于 a.js 还没有执行完毕，所以 b.js 中的 a.done 属性为 false，当 a.js 执行完毕之后，b.js 中的 a.done 属性才被赋值为 true。最后，main.js 中引用的 a.js 和 b.js 都执行完毕，a.done 和 b.done 均为 true。
三、CommonJS2EG.NET
CommonJS2EG.NET 是一个在浏览器中运行 CommonJS 模块的库，它可以将 CommonJS 模块转换为可以在浏览器中运行的代码。使用 CommonJS2EG.NET，我们可以在浏览器中直接使用 Node.js 风格的模块化开发。
// calculator.js
function add(a, b) {
return a + b;
}
function subtract(a, b) {
return a - b;
}
module.exports = {
add,
subtract
}
// index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CommonJS2EG.NET</title>
</head>
<body>
<script src="//unpkg.com/commonjs2eg.net@1.0.0/commonjs2eg.js"></script>
<script>
C2E('./calculator.js', function(err, module) {
if (err) throw err;
console.log('1 + 2 =', module.exports.add(1, 2));
console.log('5 - 3 =', module.exports.subtract(5, 3));
});
</script>
</body>
</html>
以上代码，在浏览器中可以直接访问 index.html 文件来运行 CommonJS 模块 calculator.js 的代码。
四、CommonJS和ES6模块的相同点
虽然 CommonJS 模块化规范与 ES6 模块化规范有很多不同之处，但它们也有一些相同点。
首先，它们都可以实现代码的模块化，使得代码更易于管理和维护。其次，它们都是基于静态的 exports 或者 import 语句来控制模块的访问和导出。
// CommonJS模块
// module.js
let count = 0;
module.exports = {
getCount: function() {
return count;
},
increment: function() {
count++;
}
}
// ES6模块
// module.js
let count = 0;
export function getCount() {
return count;
}
export function increment() {
count++;
}
无论是在 CommonJS 模块还是 ES6 模块中，都可以通过 exports 或者 export 关键字来控制模块的访问和导出。
最后，它们都是被设计为适用于多平台多语言的通用模块系统，并且已经得到了广泛的应用，无论是在前端还是后端开发中都是必不可少的一部分。
