module.exports

前文講到在Angular Material的第二個編譯文件docs/gulpfile.js中卻看到了一個奇怪的東西module.exports 那么module.exports是什么東西呢？

一直以來，javascript最大的詬病就是全局變量，這也成為大型應用開發的最大阻礙。因此，很多人使用了很多方式來解決這個問題。如模塊模式（Module Pattern), 而node.js這實現了模塊裝載系統，來解決組件實現的基本問題。

自從開始研究前端，我也幾個相關的關鍵詞在眼前晃蕩， require() exports等等。當時，因為注意力在其他方面，一直也沒下決心研究清楚。 就如下面文章中所講：

作為開發人員常常面臨這樣的困境：當我們使用不熟悉的代碼（庫）時，我們究竟要花多少時間來研究它的原理和實現，這個研究又要有多深呢？經典答案就是，學習到足夠可以開始寫代碼就可以了，等到時間容許在進一步深入研究。

那么現在就是深入研究 module.exports的時候了！

Node.js如何定義和使用模塊

傳統js文件

這里是一個簡單的js文件，greeting.js,它的功能一看就明白：

//greetings.js
sayHelloInEnglish = function() {
	return "Hello";
};

sayHelloInSpanish = function() {
	return "Hola";
};
這里有兩函數也就是兩個功能。

用模塊封裝簡單js文件

i> 想象該文件第一行有以下代碼（是的，想象）

// var exports = module.exports ={};

ii> 把任何要重用（導出）的函數，賦值給exports

exports.sayHelloInEnglish = function() {
	return "Hello";
};
exports.sayHelloInSpanish = function() {
	return "Hola";
};

iii> 以上的結果相當于做了以下的事情

module.exports = {
	sayHelloInEnglish = function() {
		return "Hello";
	};
	
	sayHelloInSpanish = function() {
		return "Hola";
	};
};

這個方式看上去有點怪異，之后可以做更進一步的解釋。在這之前，可以透露一點小道消息。 Typescript定義模塊的語法就感覺自然多了:

module namespace {
  exports function sayHelloInEnglish = function() {
		return "Hello";
	};

而用tsc轉譯以后，他就會變成上面的node.js語法。
什么是Typescript? OK,以后有時間再深入吧？ (聽起來怎么這么耳熟？）

導入/使用模塊

我們準備在main.js中導入和使用greetings.js中的所有函數。

i> 關鍵詞require

require是nodejs用來導入模塊的關鍵詞。想象一下require的定義如下 （怎么又是想象?)

var require =function(path){
	//....
	return module.exports;
};

ii> 導入greetings.js

//main.js
var greetings = require("./greetings");

想象一下以上代碼等價于你的代碼做了以下事情：

//main.js
var greetings = {
	sayHelloInEnglish = function() {
		return "Hello";
	};
	
	sayHelloInSpanish = function() {
		return "Hola";
	};
};

iii> 現在我么就可以重用greetings.js的功能了

//"Hello"
greetings.sayHelloInEnglish();

// "Hola"
greetings.sayHelloInSpanish();

警告：
正因為nodejs的這種模塊機制，如果不小心給module.exports重新賦給了一個全新的對象，會導致不可預期的問題。
如：

//greetings.js
//var exports=module.exports = {};
exports.sayHelloInEnglish = ...
exports.sayHelloInSpanish = ...
/*  
  重新賦值module.exports
*/
module.exports= "Bonjour";

這時候，在main.js中我們在調用`greetings.sayHelloInEnglish()'就會出錯。

下一步：進階研究require()的工作原理。