前端模塊化指南

前端模塊化

##script 老牌傳統的模塊化

<script src='xxxxx.js'> </script>

主意 script的引入是阻塞的，爲了解決阻塞的問題 引入了

<script async src='xxxxx.js'> </script>

script適用於小型的application

##CommonJS ——nodejs的王牌

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

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

三，加載模塊： 加載模塊使用require方法，該方法讀取一個文件並執行，返回文件內部的module.exports對象，若是沒有匹配到對應名稱的模塊則返回

export default defaultFunction(){
  //此處爲 默認返回函數
}

常見的例子以下：

  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時的路徑有不一樣要求，通常狀況能夠省略js拓展名，可使用相對路徑，也可使用絕對路徑，甚至能夠省略路徑直接使用模塊名（前提是該模塊是系統內置模塊）。

注意：因爲require是同步執行的 因此傳統的CommonJs的模塊代碼是沒法再瀏覽器直接運行的。

AMD（Asynchronous Module Definition）

定義名稱簡單明瞭——異步模塊。

可是注意，它並非原生js支持的 因此須要額外的引入RequireJS來進行支持。requireJS主要解決兩個問題： 一，多個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);

id：可選參數，用來定義模塊的標識，若是沒有提供該參數，腳本文件名（去掉拓展名）；

dependencies：是一個當前模塊依賴的模塊名稱數組

factory：工廠方法，模塊初始化要執行的函數或對象。若是爲函數，它應該只被執行一次。若是是對象，此對象應該爲模塊的輸出值；

在頁面上使用require函數加載模塊；

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

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

CMD(Common Module Definition)

通用模塊定義，CMD規範是國內發展出來的，就像AMD有個requireJS，CMD有個瀏覽器的實現SeaJS，SeaJS要解決的問題和requireJS同樣，只不過在模塊定義方式和模塊加載（能夠說運行、解析）時機上有所不一樣 語法 Sea.js 推崇一個模塊一個文件，遵循統一的寫法 define define(id?, deps?, factory) 由於CMD推崇一個文件一個模塊，因此常常就用文件名做爲模塊id；CMD推崇依賴就近，因此通常不在define的參數中寫依賴，而是在factory中寫。 factory有三個參數： function(require, exports, module){}

一，require require 是 factory 函數的第一個參數，require 是一個方法，接受 模塊標識 做爲惟一參數，用來獲取其餘模塊提供的接口；

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

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

demo
// 定義模塊  myModule.js
define(function(require, exports, module) {
  var $ = require('jquery.js')
  $('div').addClass('active');
});

// 加載模塊
seajs.use(['myModule.js'], function(my){

});

##AMD和CMD區別

1.對依賴的處理不一樣

AMD推崇依賴前置，在定義模塊的時候就要聲明其依賴的模塊， CMD推崇就近依賴，只有在用到某個模塊的時候再去require， 這種區別各有優劣，只是語法上的差距，並且requireJS和SeaJS都支持對方的寫法。

2.對依賴模塊的執行時機處理不一樣

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

爲何咱們說兩個的區別是依賴模塊執行時機不一樣，爲何不少人認爲ADM是異步的，CMD是同步的

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

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

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