Nodejs專欄 - Nodejs的模塊化(module.exports和exports原理, Nodejs模塊化原理)

Nodejs的模塊化

在我們日常進行web開發的過程中, 對於模塊化總是跑不掉的, 各家的模塊化有各家的實現方式, 百花齊放, nodejs遵循commonjs規範的模塊化

1. 把每一個文件都看做是一個模塊

2. 如果一個模塊需要暴露一些數據或者功能供其他模塊使用, 需要寫上module.exports = xxx, 該過程稱之爲模塊的導出

3. 如果一個模塊需要用到另一個模塊導出的代碼, 需要使用require(’…’)來引入, require函數的返回值就是索引模塊暴露出的內容

4. 模塊中的所有全局代碼產生的變量, 函數均不會造成全局污染, 僅在模塊內使用

5. 模塊具有緩存, 第一次導入模塊時就會緩存該模塊, 之後再次導入同一個模塊的時候, 直接使用之前的結果

6. 每個模塊可能被其他模塊所依賴, 也可能會依賴於其他模塊

module.exports和require的使用

我新建一個index.js

// index.js
const result = require('./test.js');
console.log(result); // 輸出{ a: 100 }

然後我再新建一個test.js

// test.js
const a = 100;
module.exports = {
    a
}

我們進入terminal, 執行index.js文件, 會發現打印出來的result是一個對象, 因爲我們在test.js中直接導出了一個對象, 對象中有個變量a

而如果我什麼都不導出就光禿禿的寫個a的聲明加賦值, 我在index.js中是拿不到任何東西的

// test.js
const a = 100; 

// index.js
const result = require('./test.js');
console.log(result); // 輸出{}

如圖我們會看到輸出的是空, 所以我們但凡想將變量或者數據供外部使用, 我們就要使用module.exports對想讓外界模塊可使用的變量或者數據進行導出, 再到另一個模塊中使用require進行導入兩者缺一不可

在test文件中, 我們想要導出啥, 我們就module.exports啥, 比如我就想導出個a

// test.js
const a = 100;
module.exports = a;

// index.js
const result = require('./test.js');
console.log(result); // 輸出的就是100

而本質上module.exports就是一個對象, 我們可以通過module.exports導出多個變量或者數據

// test.js
const a = 100;
const b = 'helloWorld';
const c = {
    name: 'loki',
    age: 18
}
const foo = () => {
    console.log(c);
}  

console.log(module.exports); // 輸出{}

// 可以寫成這樣
/**
 * module.exports.a = a;
 * module.exports.b = b;
 * module.exports.c = c;
 * module.exports.foo = foo;
 * 但是這樣還是比較累
 * **/

//我們一般寫成這樣

module.exports = {
    a,
    b,
    c,
    foo
}

// index.js
const result = require('./test.js');
console.log(result);

所以module.exports我們可以隨意玩

關於exports

有朋友可能會覺得我沒有寫exports, 沒錯我在刻意的避開exports, 接下來我來寫一些關於module.exports和exports還有一些node的執行環境的概念, 你可能以後就會少用exports了

首先我們來鋪墊鋪墊原生js, 怕你們忘了

let fstObj = {};
let secObj = fstObj;
console.log('fstObj恆等於secObj嗎?', fstObj === secObj); // true

fstObj.a = 100;
secObj.b = 200;
console.log('第一次輸出fstObj的值', fstObj); //{a: 100, b: 200}

fstObj = {
    c: 300
}

secObj.d = 400;
console.log('第二次輸出fstObj的值',fstObj);

module.exports = {
    a,
    b,
    c,
    foo
}

上方node index.js後輸出結果如下

輸出結果爲什麼第一次的時候b加進來了, 第二次的d卻不知所蹤, 這個原因如果你基礎比較好的話會想的很明白

• 一開始fstObj 取得了一個引用值的地址, 於是fstObj指向那個引用值

• 我們將fstObj的值賦給secObj, 由於fstObj手裏拿的是指針, 所以fstObj會把自己的指針給予secObj, 這個時候fstObj和secObj指向同一個地址, 所以當我修改secObj的值, fstObj也被改了

• 後來我們將fstObj的值直接換了一個新的地址,這個時候secObj跟fstObj已經不指向同一個地址了, 所以給secObj加上d的屬性fstObj再也無法感知了

這會我們來說說exports和module.exports

先看看實例吧

// test.js
console.log('module.exports的值', module.exports);
console.log('exports的值', exports);
console.log('module.exports恆等於exports嗎？', module.exports === exports);
module.exports.a = 10;
exports.b = 20;

// index.js
const result = require('./test.js');
console.log('從test.js導入的結果', result);

執行結果如下

這個還不夠, 還得再看一個

// test.js
console.log('module.exports的值', module.exports);
console.log('exports的值', exports);
console.log('module.exports恆等於exports嗎？', module.exports === exports);
module.exports = {
    userName: 'loki'
};
console.log('現在module.exports恆等於exports嗎？', module.exports === exports);
exports.age = 18;

// index.js
const result = require('./test.js');
console.log('從test.js導入的結果', result);

輸出結果如下

在上方的這兩個例子中我們可以總結幾點

• module.exports和exports在出生的時候是相等的, 而且都是空對象{}, 代表着他們在一開始指向同一個地址

module.exports = exports = {};

• 當我們require一個模塊的時候, 被導入模塊中的代碼會被通篇執行一次, 所以我們在requiretest.js的時候會將test文件中的打印語句都輸出一次

• 當我們將module.exports的指針更改以後, exports將不再生效, 證明系統默認導出給我們的是module.exports的值

其實在底層中, commonjs的規範會把每個導出的文件封裝在一個函數中, 而後會往這個函數中傳遞幾個參數, 其中有兩個就是我們熟悉的exports和module.exports了, 而函數執行完畢以後一定會返回module.exports出去

function(exports,require, module, __filename,__dirname) {
//我們寫的代碼
// module.exports...
// const xxx = xxx;
return module.exports
}

想要證明這個其實很簡單, 既然我們寫的模塊化代碼會被放在函數體中, 而且函數體也會給我們傳入這些參數, 那麼我們直接在test文件的第一行輸出arguments不就好了

// test.js
console.log(arguments);
console.log('exports恆等於arguments[0]嗎？', exports === arguments[0]);
console.log('require恆等於arguments[1]嗎？', require === arguments[1]);
console.log('module.exports恆等於arguments[2]嗎？', module === arguments[2]);
console.log('__filename恆等於arguments[3]嗎？', __filename === arguments[3]);
console.log('__dirname恆等於arguments[4]嗎？', __dirname === arguments[4]);

// index.js
const result = require('./test.js');
console.log('從test.js導入的結果', result);

輸出結果如下

而由於只要我們更改module.exports的指針exports就會失效, 根據我們之前的js鋪墊, 所以他的函數體中應該是這麼寫的

function(exports, require, module, __filename, __dirname) {
    module.exports = {};
    exports = module.exports;
    // ... 我們寫的代碼
    return module.exports;
}

所以這就是筆者爲什麼推薦大家儘量使用module.exports而非exports的原因, 系統始終都在返回module.exports, 而如果我們用exports的話, 哪天不小心更改了module.exports的值, 那麼代碼就出問題了

總結

• nodejs的模塊化遵守commonjs規範
• 其實我們之所以能夠使用exports和module.exports還有webpack中的__dirname等, 是因爲nodejs的模塊化本質上把每個模塊化文件都放入一個函數中執行, 而我們能夠使用的這些變量都是函數傳遞給我們的參數
• 能用module.exports就絕不使用exports

至此, 遵守commonjs規範的Nodejs的模塊化原理就寫完了, 我希望我講清楚了