深入理解CommonJS模塊化規範

在前端開發中，模塊化已經成為了一種標配，它能幫助我們更好地管理項目結構，提高代碼復用率和可維護性。而 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-hant/n/195939.html

深入理解CommonJS模塊化規範

一、CommonJS和ES6模塊的區別

二、CommonJS的modules對象

三、CommonJS2EG.NET

四、CommonJS和ES6模塊的相同點

相關推薦

發表回復