轉至http://www.cnblogs.com/lvdabao/p/js-modules-develop.html

在javaScript發展初期就是為了實現簡單的頁面交互邏輯，寥寥數語即可；如今CPU、瀏覽器性能得到了極大的提升，很多頁面邏輯遷移到了客戶端（表單驗證等），隨著web2.0時代的到來，Ajax技術得到廣泛應用，jQuery等前端庫層出不窮，前端代碼日益膨脹，這時候Javascript作為嵌入式的腳本語言的定位動搖了，JavaScript卻沒有為組織代碼提供任何明顯幫助，甚至沒有類的概念，更不用說模塊（module）了，JavaScript極其簡單的代碼組織規范不足以駕馭如此龐大規模的代碼。

模塊既然JavaScript不能handle如此大規模的代碼，我們可以借鑒一下其它語言是怎么處理大規模程序設計的，在Java中有一個重要帶概念——package，邏輯上相關的代碼組織到同一個包內，包內是一個相對獨立的王國，不用擔心命名沖突什么的，那么外部如果使用呢？直接import對應的package即可import java.util.ArrayList;遺憾的是JavaScript在設計時定位原因，沒有提供類似的功能，開發者需要模擬出類似的功能，來隔離、組織復雜的JavaScript代碼，我們稱為模塊化。一個模塊就是實現特定功能的文件，有了模塊，我們就可以更方便地使用別人的代碼，想要什么功能，就加載什么模塊。模塊開發需要遵循一定的規范，各行其是就都亂套了。規范形成的過程是痛苦的，前端的先驅在刀耕火種、茹毛飲血的階段開始，發展到現在初具規模，簡單了解一下這段不凡的歷程。

一，函數封裝我們在講函數的時候提到，函數一個功能就是實現特定邏輯的一組語句打包，而且JavaScript的作用域就是基于函數的，所以把函數作為模塊化的第一步是很自然的事情，在一個文件里面編寫幾個相關函數就是最開始的模塊了，如下：

function fn1(){    statement}function fn2(){    statement}這樣在需要的以后夾在函數所在文件，調用函數就可以了。這種做法的缺點很明顯：污染了全局變量，無法保證不與其他模塊發生變量名沖突，而且模塊成員之間沒什么關系。
二，對象為了解決上面問題，對象的寫法應運而生，可以把所有的模塊成員封裝在一個對象中，看下面的代碼：
var myModule = {    var1: 1,    var2: 2,    fn1: function(){    },    fn2: function(){    }}這樣我們在希望調用模塊的時候引用對應文件，然后執行myModule.fn2();這樣避免了變量污染，只要保證模塊名唯一即可，同時同一模塊內的成員也有了關系。看似不錯的解決方案，但是也有缺陷，外部可以隨意修改內部成員，myModel.var1 = 100;這樣就會產生意外的安全問題。
三，立即執行函數可以通過立即執行函數，來達到隱藏細節的目的，看下面的代碼,
var myModule = (function(){    var var1 = 1;    var var2 = 2;    function fn1(){    }    function fn2(){    }    return {        fn1: fn1,        fn2: fn2    };})();這樣在模塊外部無法修改我們沒有暴露出來的變量、函數，上述做法就是我們模塊化的基礎，目前，通行的JavaScript模塊規范主要有兩種：CommonJS和AMD。------------------------------------------------------------------------------------------------------------------------------------------------------------------CommonJS我們先從CommonJS談起，因為在網頁端沒有模塊化編程只是頁面JavaScript邏輯復雜，但也可以工作下去，在服務器端卻一定要有模塊，所以雖然JavaScript在web端發展這么多年，第一個流行的模塊化規范卻由服務器端的JavaScript應用帶來，CommonJS規范是由NodeJS發揚光大，這標志著JavaScript模塊化編程正式登上舞臺。一，定義模塊:根據CommonJS規范，一個單獨的文件就是一個模塊。每一個模塊都是一個單獨的作用域，也就是說，在該模塊內部定義的變量，無法被其他模塊讀取，除非定義為global對象的屬性。二，模塊輸出：模塊只有一個出口，module.exports對象，我們需要把模塊希望輸出的內容放入該對象。三，加載模塊：加載模塊使用require方法，該方法讀取一個文件并執行，返回文件內部的module.exports對象?？磦€例子：
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是同步的。模塊系統需要同步讀取模塊文件內容，并編譯執行以得到模塊接口。這在服務器端實現很簡單，也很自然，然而， 想在瀏覽器端實現問題卻很多。瀏覽器端，加載JavaScript最佳、最容易的方式是在document中插入script 標簽。但腳本標簽天生異步，傳統CommonJS模塊在瀏覽器環境中無法正常加載。解決思路之一是，開發一個服務器端組件，對模塊代碼作靜態分析，將模塊與它的依賴列表一起返回給瀏覽器端。 這很好使，但需要服務器安裝額外的組件，并因此要調整一系列底層架構。另一種解決思路是，用一套標準模板來封裝模塊定義，但是對于模塊應該怎么定義和怎么加載，又產生的分歧。AMDAMD 即Asynchronous Module Definition，中文名是異步模塊定義的意思。它是一個在瀏覽器端模塊化開發的規范，由于不是JavaScript原生支持，使用AMD規范進行頁面開發需要用到對應的庫函數，也就是大名鼎鼎RequireJS，實際上AMD 是 RequireJS 在推廣過程中對模塊定義的規范化的產出。requireJS主要解決兩個問題：一，多個js文件可能有依賴關系，被依賴的文件需要早于依賴它的文件加載到瀏覽器；二，js加載的時候瀏覽器會停止頁面渲染，加載文件越多，頁面失去響應時間越長?？匆粋€使用requireJS的例子：
// 定義模塊 myModule.jsdefine(['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()函數在加載依賴的函數的時候是異步加載的，這樣瀏覽器不會失去響應，它指定的回調函數，只有前面的模塊都加載成功后，才會運行，解決了依賴性的問題。
CMDCMD 即Common Module Definition通用模塊定義，CMD規范是國內發展出來的，就像AMD有個requireJS，CMD有個瀏覽器的實現SeaJS，SeaJS要解決的問題和requireJS一樣，只不過在模塊定義方式和模塊加載（可以說運行、解析）時機上有所不同語法Sea.js 推崇一個模塊一個文件，遵循統一的寫法definedefine(id?, deps?, factory)因為CMD推崇一個文件一個模塊，所以經常就用文件名作為模塊id；CMD推崇依賴就近，所以一般不在define的參數中寫依賴，而是在factory中寫。factory有三個參數：function(require, exports, module){}一，requirerequire 是 factory 函數的第一個參數，require 是一個方法，接受 模塊標識 作為唯一參數，用來獲取其他模塊提供的接口；二，exportsexports 是一個對象，用來向外提供模塊接口；三，modulemodule 是一個對象，上面存儲了與當前模塊相關聯的一些屬性和方法。demo// 定義模塊  myModule.jsdefine(function(require, exports, module) {  var $ = require('jquery.js')  $('div').addClass('active');});// 加載模塊seajs.use(['myModule.js'], function(my){});------------------------------------------------------------------------------------------------------------------------------------------------------------------AMD與CMD區別關于這兩個的區別網上可以搜出一堆文章，簡單總結一下：最明顯的區別就是在模塊定義時對依賴的處理不同，AMD推崇依賴前置，在定義模塊的時候就要聲明其依賴的模塊，CMD推崇就近依賴，只有在用到某個模塊的時候再去require，這種區別各有優劣，只是語法上的差距，而且requireJS和SeaJS都支持對方的寫法。AMD和CMD最大的區別是對依賴模塊的執行時機處理不同，注意不是加載的時機或者方式不同。很多人說requireJS是異步加載模塊，SeaJS是同步加載模塊，這么理解實際上是不準確的，其實加載模塊都是異步的，只不過AMD依賴前置，js可以方便知道依賴模塊是誰，立即加載，而CMD就近依賴，需要使用把模塊變為字符串解析一遍才知道依賴了那些模塊，這也是很多人詬病CMD的一點，犧牲性能來帶來開發的便利性，實際上解析模塊用的時間短到可以忽略。為什么我們說兩個的區別是依賴模塊執行時機不同，為什么很多人認為ADM是異步的，CMD是同步的（除了名字的原因。。。）同樣都是異步加載模塊，AMD在加載模塊完成后就會執行改模塊，所有模塊都加載執行完后會進入require的回調函數，執行主邏輯，這樣的效果就是依賴模塊的執行順序和書寫順序不一定一致，看網絡速度，哪個先下載下來，哪個先執行，但是主邏輯一定在所有依賴加載完成后才執行。CMD加載完某個依賴模塊后并不執行，只是下載而已，在所有依賴模塊加載完成后進入主邏輯，遇到require語句的時候才執行對應的模塊，這樣模塊的執行順序和書寫順序是完全一致的。這也是很多人說AMD用戶體驗好，因為沒有延遲，依賴模塊提前執行了，CMD性能好，因為只有用戶需要的時候才執行的原因。