在前端開發中，模塊化已經成為了一種標配，它能幫助我們更好地管理項目結構，提高代碼復用率和可維護性。而 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 關鍵字來控制模塊的訪問和導出。
最後，它們都是被設計為適用於多平台多語言的通用模塊系統，並且已經得到了廣泛的應用，無論是在前端還是後端開發中都是必不可少的一部分。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/195939.html
微信掃一掃 
支付寶掃一掃 