JS 模塊學習 二

目前的 模塊化的規範比較多：主要是commonJS 和AMD 

CommonJS

先從CommonJS談起，由於在網頁端沒有模塊化編程只是頁面JavaScript邏輯複雜，但也能夠工做下去，在服務器端卻必定要有模塊，因此雖然JavaScript在web端發展這麼多年，第一個流行的模塊化規範卻由服務器端的JavaScript應用帶來，CommonJS規範是由NodeJS發揚光大，這標誌着JavaScript模塊化編程正式登上舞臺。

1. 定義模塊
   根據CommonJS規範，一個單獨的文件就是一個模塊。每個模塊都是一個單獨的做用域，也就是說，在該模塊內部定義的變量，沒法被其餘模塊讀取，除非定義爲global對象的屬性

2. 模塊輸出：
   模塊只有一個出口，module.exports對象，咱們須要把模塊但願輸出的內容放入該對象

3. 加載模塊：
   加載模塊使用require方法，該方法讀取一個文件並執行，返回文件內部的module.exports對像

舉個例子：

//模塊定義 myModel.js

var name = 'Byron';
function printName(){
    console.log(name);
}
function printFullName(firstName){
    console.log(firstName + name);
}
module.exports = {
    printName: printName,
    printFullName: printFullName
}

//加載模塊
var nameModule = require('./myModel.js');
nameModule.printName();　

仔細看上面的代碼，會發現require是同步的。模塊系統須要同步讀取模塊文件內容，並編譯執行以獲得模塊接口。

這在服務器端實現很簡單，也很天然，然而， 想在瀏覽器端實現問題卻不少。瀏覽器端，加載JavaScript最佳、最容易的方式是在document中插入script 標籤。但腳本標籤天生異步，傳統CommonJS模塊在瀏覽器環境中沒法正常加載。

AMD

AMD 即Asynchronous Module Definition，中文名是異步模塊定義的意思。它是一個在瀏覽器端模塊化開發的規範。

不是JavaScript原生支持，使用AMD規範進行頁面開發須要用到對應的庫函數，也就是大名鼎requireJS

requireJS主要解決兩個問題

1. 多個js文件可能有依賴關係，被依賴的文件須要早於依賴它的文件加載到瀏覽器(管理模塊之間的依賴性，便於代碼的編寫和維護。)
2. js加載的時候瀏覽器會中止頁面渲染，加載文件越多，頁面失去響應時間越長(實現js文件的異步加載，避免網頁失去響應)

一個requireJS 的例子：

// 定義模塊 myModule.js
define(['dependency'], function(){
    var name = 'Byron';
    function printName(){
        console.log(name);
    }

    return {
        printName: printName
    };
});

// 加載模塊
require(['myModule'], function (my){
　 my.printName();
});

　　

requireJS定義了一個函數 define，它是全局變量，用來定義模塊

define(id?, dependencies?, factory);

1. id：可選參數，用來定義模塊的標識，若是沒有提供該參數，腳本文件名（去掉拓展名）
2. dependencies：是一個當前模塊依賴的模塊名稱數組
3. factory：工廠方法，模塊初始化要執行的函數或對象。若是爲函數，它應該只被執行一次。若是是對象，此對象應該爲模塊的輸出值 在頁面上使用require函數加載模塊

require([dependencies], function(){});

require()函數接受兩個參數

1. 第一個參數是一個數組，表示所依賴的模塊
2. 第二個參數是一個回調函數，當前面指定的模塊都加載成功後，它將被調用。加載的模塊會以參數形式傳入該函數，從而在回調函數內部就可使用這些模塊require()函數在加載依賴的函數的時候是異步加載的，這樣瀏覽器不會失去響應，它指定的回調函數，只有前面的模塊都加載成功後，纔會運行，解決了依賴性的問題。

CMD

CMD 即Common Module Definition通用模塊定義，CMD規範是國內發展出來的，就像AMD有個requireJS，CMD有個瀏覽器的實現SeaJS，SeaJS要解決的問題和requireJS同樣，只不過在模塊定義方式和模塊加載（能夠說運行、解析）時機上有所不一樣

語法

Sea.js 推崇一個模塊一個文件，遵循統一的寫法

define

define(id?, deps?, factory)

由於CMD推崇

1. 一個文件一個模塊，因此常常就用文件名做爲模塊id
2. CMD推崇依賴就近，因此通常不在define的參數中寫依賴，在factory中寫

factory有三個參數

function(require, exports, module)

require  require 是 factory 函數的第一個參      require(id) require 是一個方法，接受 模塊標識 做爲惟一參數，用來獲取其餘模塊提供的接口（也可說是依賴的模塊）

exports    exports 是一個對象，用來向外提供模塊接口

module     module 是一個對象，上面存儲了與當前模塊相關聯的一些屬性和方法

這是一個CMD 的例子:

 

 

AMD與CMD區別

關於這兩個的區別網上能夠搜出一堆文章，簡單總結一下

最明顯的區別就是在模塊定義時對依賴的處理不一樣

1. AMD推崇依賴前置，在定義模塊的時候就要聲明其依賴的模塊
2. CMD推崇就近依賴，只有在用到某個模塊的時候再去require    

只是語法上的差距，並且requireJS和SeaJS都支持對方的寫法

 

MD和CMD最大的區別是對依賴模塊的執行時機處理不一樣，注意不是加載的時機或者方式不一樣

不少人說requireJS是異步加載模塊，SeaJS是同步加載模塊，這麼理解其實是不許確的，其實加載模塊都是異步的，只不過AMD依賴前置，js能夠方便知道依賴模塊是誰，當即加載，而CMD就近依賴，須要使用把模塊變爲字符串解析一遍才知道依賴了那些模塊，這也是不少人詬病CMD的一點，犧牲性能來帶來開發的便利性，實際上解析模塊用的時間短到能夠忽略

爲何咱們說兩個的區別是依賴模塊執行時機不一樣，爲何不少人認爲ADM是異步的，CMD是同步的（除了名字的緣由。。。）

一樣都是異步加載模塊，AMD在加載模塊完成後就會執行改模塊，全部模塊都加載執行完後會進入require的回調函數，執行主邏輯，這樣的效果就是依賴模塊的執行順序和書寫順序不必定一致，看網絡速度，哪一個先下載下來，哪一個先執行，可是主邏輯必定在全部依賴加載完成後才執行

CMD加載完某個依賴模塊後並不執行，只是下載而已，在全部依賴模塊加載完成後進入主邏輯，遇到require語句的時候才執行對應的模塊，這樣模塊的執行順序和書寫順序是徹底一致的

這也是不少人說AMD用戶體驗好，由於沒有延遲，依賴模塊提早執行了，CMD性能好，由於只有用戶須要的時候才執行的緣由