轉(zhuǎn)至http://www.cnblogs.com/lvdabao/p/js-modules-develop.html

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

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

一，函數(shù)封裝我們?cè)谥v函數(shù)的時(shí)候提到，函數(shù)一個(gè)功能就是實(shí)現(xiàn)特定邏輯的一組語(yǔ)句打包，而且JavaScript的作用域就是基于函數(shù)的，所以把函數(shù)作為模塊化的第一步是很自然的事情，在一個(gè)文件里面編寫(xiě)幾個(gè)相關(guān)函數(shù)就是最開(kāi)始的模塊了，如下：

function fn1(){    statement}function fn2(){    statement}這樣在需要的以后夾在函數(shù)所在文件，調(diào)用函數(shù)就可以了。這種做法的缺點(diǎn)很明顯：污染了全局變量，無(wú)法保證不與其他模塊發(fā)生變量名沖突，而且模塊成員之間沒(méi)什么關(guān)系。
二，對(duì)象為了解決上面問(wèn)題，對(duì)象的寫(xiě)法應(yīng)運(yùn)而生，可以把所有的模塊成員封裝在一個(gè)對(duì)象中，看下面的代碼：
var myModule = {    var1: 1,    var2: 2,    fn1: function(){    },    fn2: function(){    }}這樣我們?cè)谙Ｍ{(diào)用模塊的時(shí)候引用對(duì)應(yīng)文件，然后執(zhí)行myModule.fn2();這樣避免了變量污染，只要保證模塊名唯一即可，同時(shí)同一模塊內(nèi)的成員也有了關(guān)系。看似不錯(cuò)的解決方案，但是也有缺陷，外部可以隨意修改內(nèi)部成員，myModel.var1 = 100;這樣就會(huì)產(chǎn)生意外的安全問(wèn)題。
三，立即執(zhí)行函數(shù)可以通過(guò)立即執(zhí)行函數(shù)，來(lái)達(dá)到隱藏細(xì)節(jié)的目的，看下面的代碼,
var myModule = (function(){    var var1 = 1;    var var2 = 2;    function fn1(){    }    function fn2(){    }    return {        fn1: fn1,        fn2: fn2    };})();這樣在模塊外部無(wú)法修改我們沒(méi)有暴露出來(lái)的變量、函數(shù)，上述做法就是我們模塊化的基礎(chǔ)，目前，通行的JavaScript模塊規(guī)范主要有兩種：CommonJS和AMD。------------------------------------------------------------------------------------------------------------------------------------------------------------------CommonJS我們先從CommonJS談起，因?yàn)樵诰W(wǎng)頁(yè)端沒(méi)有模塊化編程只是頁(yè)面JavaScript邏輯復(fù)雜，但也可以工作下去，在服務(wù)器端卻一定要有模塊，所以雖然JavaScript在web端發(fā)展這么多年，第一個(gè)流行的模塊化規(guī)范卻由服務(wù)器端的JavaScript應(yīng)用帶來(lái)，CommonJS規(guī)范是由NodeJS發(fā)揚(yáng)光大，這標(biāo)志著JavaScript模塊化編程正式登上舞臺(tái)。一，定義模塊:根據(jù)CommonJS規(guī)范，一個(gè)單獨(dú)的文件就是一個(gè)模塊。每一個(gè)模塊都是一個(gè)單獨(dú)的作用域，也就是說(shuō)，在該模塊內(nèi)部定義的變量，無(wú)法被其他模塊讀取，除非定義為global對(duì)象的屬性。二，模塊輸出：模塊只有一個(gè)出口，module.exports對(duì)象，我們需要把模塊希望輸出的內(nèi)容放入該對(duì)象。三，加載模塊：加載模塊使用require方法，該方法讀取一個(gè)文件并執(zhí)行，返回文件內(nèi)部的module.exports對(duì)象。看個(gè)例子：
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();不同的實(shí)現(xiàn)對(duì)require時(shí)的路徑有不同要求，一般情況可以省略js拓展名，可以使用相對(duì)路徑，也可以使用絕對(duì)路徑，甚至可以省略路徑直接使用模塊名（前提是該模塊是系統(tǒng)內(nèi)置模塊）。
尷尬的瀏覽器仔細(xì)看上面的代碼，會(huì)發(fā)現(xiàn)require是同步的。模塊系統(tǒng)需要同步讀取模塊文件內(nèi)容，并編譯執(zhí)行以得到模塊接口。這在服務(wù)器端實(shí)現(xiàn)很簡(jiǎn)單，也很自然，然而， 想在瀏覽器端實(shí)現(xiàn)問(wèn)題卻很多。瀏覽器端，加載JavaScript最佳、最容易的方式是在document中插入script 標(biāo)簽。但腳本標(biāo)簽天生異步，傳統(tǒng)CommonJS模塊在瀏覽器環(huán)境中無(wú)法正常加載。解決思路之一是，開(kāi)發(fā)一個(gè)服務(wù)器端組件，對(duì)模塊代碼作靜態(tài)分析，將模塊與它的依賴列表一起返回給瀏覽器端。 這很好使，但需要服務(wù)器安裝額外的組件，并因此要調(diào)整一系列底層架構(gòu)。另一種解決思路是，用一套標(biāo)準(zhǔn)模板來(lái)封裝模塊定義，但是對(duì)于模塊應(yīng)該怎么定義和怎么加載，又產(chǎn)生的分歧。AMDAMD 即Asynchronous Module Definition，中文名是異步模塊定義的意思。它是一個(gè)在瀏覽器端模塊化開(kāi)發(fā)的規(guī)范，由于不是JavaScript原生支持，使用AMD規(guī)范進(jìn)行頁(yè)面開(kāi)發(fā)需要用到對(duì)應(yīng)的庫(kù)函數(shù)，也就是大名鼎鼎RequireJS，實(shí)際上AMD 是 RequireJS 在推廣過(guò)程中對(duì)模塊定義的規(guī)范化的產(chǎn)出。requireJS主要解決兩個(gè)問(wèn)題：一，多個(gè)js文件可能有依賴關(guān)系，被依賴的文件需要早于依賴它的文件加載到瀏覽器；二，js加載的時(shí)候?yàn)g覽器會(huì)停止頁(yè)面渲染，加載文件越多，頁(yè)面失去響應(yīng)時(shí)間越長(zhǎng)。看一個(gè)使用requireJS的例子：
// 定義模塊 myModule.jsdefine(['dependency'], function(){    var name = 'Byron';    function printName(){        console.log(name);    }    return {        printName: printName    };});// 加載模塊require(['myModule'], function (my){　 my.printName();});語(yǔ)法requireJS定義了一個(gè)函數(shù) define，它是全局變量，用來(lái)定義模塊。define(id?, dependencies?, factory);------id：可選參數(shù)，用來(lái)定義模塊的標(biāo)識(shí)，如果沒(méi)有提供該參數(shù)，腳本文件名（去掉拓展名）；------dependencies：是一個(gè)當(dāng)前模塊依賴的模塊名稱數(shù)組------factory：工廠方法，模塊初始化要執(zhí)行的函數(shù)或?qū)ο蟆Ｈ绻麨楹瘮?shù)，它應(yīng)該只被執(zhí)行一次。如果是對(duì)象，此對(duì)象應(yīng)該為模塊的輸出值；在頁(yè)面上使用require函數(shù)加載模塊；require([dependencies], function(){});require()函數(shù)接受兩個(gè)參數(shù)：第一個(gè)參數(shù)是一個(gè)數(shù)組，表示所依賴的模塊；第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，當(dāng)前面指定的模塊都加載成功后，它將被調(diào)用。加載的模塊會(huì)以參數(shù)形式傳入該函數(shù)，從而在回調(diào)函數(shù)內(nèi)部就可以使用這些模塊。require()函數(shù)在加載依賴的函數(shù)的時(shí)候是異步加載的，這樣瀏覽器不會(huì)失去響應(yīng)，它指定的回調(diào)函數(shù)，只有前面的模塊都加載成功后，才會(huì)運(yùn)行，解決了依賴性的問(wèn)題。
CMDCMD 即Common Module Definition通用模塊定義，CMD規(guī)范是國(guó)內(nèi)發(fā)展出來(lái)的，就像AMD有個(gè)requireJS，CMD有個(gè)瀏覽器的實(shí)現(xiàn)SeaJS，SeaJS要解決的問(wèn)題和requireJS一樣，只不過(guò)在模塊定義方式和模塊加載（可以說(shuō)運(yùn)行、解析）時(shí)機(jī)上有所不同語(yǔ)法Sea.js 推崇一個(gè)模塊一個(gè)文件，遵循統(tǒng)一的寫(xiě)法definedefine(id?, deps?, factory)因?yàn)镃MD推崇一個(gè)文件一個(gè)模塊，所以經(jīng)常就用文件名作為模塊id；CMD推崇依賴就近，所以一般不在define的參數(shù)中寫(xiě)依賴，而是在factory中寫(xiě)。factory有三個(gè)參數(shù)：function(require, exports, module){}一，requirerequire 是 factory 函數(shù)的第一個(gè)參數(shù)，require 是一個(gè)方法，接受 模塊標(biāo)識(shí) 作為唯一參數(shù)，用來(lái)獲取其他模塊提供的接口；二，exportsexports 是一個(gè)對(duì)象，用來(lái)向外提供模塊接口；三，modulemodule 是一個(gè)對(duì)象，上面存儲(chǔ)了與當(dāng)前模塊相關(guān)聯(lián)的一些屬性和方法。demo// 定義模塊  myModule.jsdefine(function(require, exports, module) {  var $ = require('jquery.js')  $('div').addClass('active');});// 加載模塊seajs.use(['myModule.js'], function(my){});------------------------------------------------------------------------------------------------------------------------------------------------------------------AMD與CMD區(qū)別關(guān)于這兩個(gè)的區(qū)別網(wǎng)上可以搜出一堆文章，簡(jiǎn)單總結(jié)一下：最明顯的區(qū)別就是在模塊定義時(shí)對(duì)依賴的處理不同，AMD推崇依賴前置，在定義模塊的時(shí)候就要聲明其依賴的模塊，CMD推崇就近依賴，只有在用到某個(gè)模塊的時(shí)候再去require，這種區(qū)別各有優(yōu)劣，只是語(yǔ)法上的差距，而且requireJS和SeaJS都支持對(duì)方的寫(xiě)法。AMD和CMD最大的區(qū)別是對(duì)依賴模塊的執(zhí)行時(shí)機(jī)處理不同，注意不是加載的時(shí)機(jī)或者方式不同。很多人說(shuō)requireJS是異步加載模塊，SeaJS是同步加載模塊，這么理解實(shí)際上是不準(zhǔn)確的，其實(shí)加載模塊都是異步的，只不過(guò)AMD依賴前置，js可以方便知道依賴模塊是誰(shuí)，立即加載，而CMD就近依賴，需要使用把模塊變?yōu)樽址馕鲆槐椴胖酪蕾嚵四切┠K，這也是很多人詬病CMD的一點(diǎn)，犧牲性能來(lái)帶來(lái)開(kāi)發(fā)的便利性，實(shí)際上解析模塊用的時(shí)間短到可以忽略。為什么我們說(shuō)兩個(gè)的區(qū)別是依賴模塊執(zhí)行時(shí)機(jī)不同，為什么很多人認(rèn)為ADM是異步的，CMD是同步的（除了名字的原因。。。）同樣都是異步加載模塊，AMD在加載模塊完成后就會(huì)執(zhí)行改模塊，所有模塊都加載執(zhí)行完后會(huì)進(jìn)入require的回調(diào)函數(shù)，執(zhí)行主邏輯，這樣的效果就是依賴模塊的執(zhí)行順序和書(shū)寫(xiě)順序不一定一致，看網(wǎng)絡(luò)速度，哪個(gè)先下載下來(lái)，哪個(gè)先執(zhí)行，但是主邏輯一定在所有依賴加載完成后才執(zhí)行。CMD加載完某個(gè)依賴模塊后并不執(zhí)行，只是下載而已，在所有依賴模塊加載完成后進(jìn)入主邏輯，遇到require語(yǔ)句的時(shí)候才執(zhí)行對(duì)應(yīng)的模塊，這樣模塊的執(zhí)行順序和書(shū)寫(xiě)順序是完全一致的。這也是很多人說(shuō)AMD用戶體驗(yàn)好，因?yàn)闆](méi)有延遲，依賴模塊提前執(zhí)行了，CMD性能好，因?yàn)橹挥杏脩粜枰臅r(shí)候才執(zhí)行的原因。