經過Anuglar Material串串學客戶端開發 - NodeJS模塊機制之Module.Exports

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()的工做原理。