目前，通行的Javascript模塊規范共有兩種：CommonJS和AMD。我主要介紹AMD，但是要先從CommonJS講起。 服務器端模塊以后，很自然地，大家就想要客戶端模塊。而且最好兩者能夠兼容，一個模塊不用修改，在服務器和瀏覽器都可以運行。 但是，由于一個重大的局限，使得CommonJS規范不適用于瀏覽器環境。 這對服務器端不是一個問題，因為所有的模塊都存放在本地硬盤，可以同步加載完成，等待時間就是硬盤的讀取時間。但是，對于瀏覽器，這卻是一個大問題，因為模塊都放在服務器端，等待時間取決于網速的快慢，可能要等很長時間，瀏覽器處于"假死"狀態。 因此，瀏覽器端的模塊，不能采用"同步加載"（synchronous），只能采用"異步加載"（asynchronous）。這就是AMD規范誕生的背景。 ***** ***** 一、原始寫法 模塊就是實現特定功能的一組方法。 只要把不同的函數（以及記錄狀態的變量）簡單地放在一起，就算是一個模塊。 ~~~ 　　function m1(){ 　　　　//... 　　} 　　function m2(){ 　　　　//... 　　} ~~~ 上面的函數m1()和m2()，組成一個模塊。使用的時候，直接調用就行了。 這種做法的缺點很明顯："污染"了全局變量，無法保證不與其他模塊發生變量名沖突，而且模塊成員之間看不出直接關系。 二、對象寫法 為了解決上面的缺點，可以把模塊寫成一個對象，所有的模塊成員都放到這個對象里面。 ~~~ 　　var module1 = new Object({ 　　　　_count : 0, 　　　　m1 : function (){ 　　　　　　//... 　　　　}, 　　　　m2 : function (){ 　　　　　　//... 　　　　} 　　}); ~~~ 上面的函數m1()和m2(），都封裝在module1對象里。使用的時候，就是調用這個對象的屬性。 　　module1.m1(); 但是，這樣的寫法會暴露所有模塊成員，內部狀態可以被外部改寫。比如，外部代碼可以直接改變內部計數器的值。 　　module1._count = 5; 三、立即執行函數寫法 使用"立即執行函數"（Immediately-Invoked Function Expression，IIFE），可以達到不暴露私有成員的目的。 ~~~ 　　var module1 = (function(){ 　　　　var _count = 0; 　　　　var m1 = function(){ 　　　　　　//... 　　　　}; 　　　　var m2 = function(){ 　　　　　　//... 　　　　}; 　　　　return { 　　　　　　m1 : m1, 　　　　　　m2 : m2 　　　　}; 　　})(); ~~~ 使用上面的寫法，外部代碼無法讀取內部的_count變量。 　　console.info(module1._count); //undefined module1就是Javascript模塊的基本寫法。下面，再對這種寫法進行加工。 四、放大模式 如果一個模塊很大，必須分成幾個部分，或者一個模塊需要繼承另一個模塊，這時就有必要采用"放大模式"（augmentation）。 ~~~ 　　var module1 = (function (mod){ 　　　　mod.m3 = function () { 　　　　　　//... 　　　　}; 　　　　return mod; 　　})(module1); ~~~ 上面的代碼為module1模塊添加了一個新方法m3()，然后返回新的module1模塊。 五、寬放大模式（Loose augmentation） 在瀏覽器環境中，模塊的各個部分通常都是從網上獲取的，有時無法知道哪個部分會先加載。如果采用上一節的寫法，第一個執行的部分有可能加載一個不存在空對象，這時就要采用"寬放大模式"。 ~~~ 　　var module1 = ( function (mod){ 　　　　//... 　　　　return mod; 　　})(window.module1 || {}); ~~~ 與"放大模式"相比，＂寬放大模式＂就是"立即執行函數"的參數可以是空對象。 六、輸入全局變量 獨立性是模塊的重要特點，模塊內部最好不與程序的其他部分直接交互。 為了在模塊內部調用全局變量，必須顯式地將其他變量輸入模塊。 ~~~ 　　var module1 = (function ($, YAHOO) { 　　　　//... 　　})(jQuery, YAHOO); ~~~ 上面的module1模塊需要使用jQuery庫和YUI庫，就把這兩個庫（其實是兩個模塊）當作參數輸入module1。這樣做除了保證模塊的獨立性，還使得模塊之間的依賴關系變得明顯。 ***** ***** 重點說說requireJs的用法： 一、為什么要用require.js？ 最早的時候，所有Javascript代碼都寫在一個文件里面，只要加載這一個文件就夠了。后來，代碼越來越多，一個文件不夠了，必須分成多個文件，依次加載。下面的網頁代碼，相信很多人都見過。 ~~~ 　　<script src="1.js"></script> 　　<script src="2.js"></script> 　　<script src="3.js"></script> 　　<script src="4.js"></script> 　　<script src="5.js"></script> 　　<script src="6.js"></script> ~~~ 這段代碼依次加載多個js文件。 這樣的寫法有很大的缺點。首先，加載的時候，瀏覽器會停止網頁渲染，加載文件越多，網頁失去響應的時間就會越長；其次，由于js文件之間存在依賴關系，因此必須嚴格保證加載順序（比如上例的1.js要在2.js的前面），依賴性最大的模塊一定要放到最后加載，當依賴關系很復雜的時候，代碼的編寫和維護都會變得困難。 require.js的誕生，就是為了解決這兩個問題： 　　 　　（1）實現js文件的異步加載，避免網頁失去響應； 　　（2）管理模塊之間的依賴性，便于代碼的編寫和維護。 二、require.js的加載 使用require.js的第一步，是先去官方網站下載最新版本。 下載后，假定把它放在js子目錄下面，就可以加載了。 ~~~ 　　<script src="js/require.js"></script> ~~~ 有人可能會想到，加載這個文件，也可能造成網頁失去響應。解決辦法有兩個，一個是把它放在網頁底部加載，另一個是寫成下面這樣： ~~~ 　　<script src="js/require.js" defer async="true" ></script> ~~~ async屬性表明這個文件需要異步加載，避免網頁失去響應。IE不支持這個屬性，只支持defer，所以把defer也寫上。 加載require.js以后，下一步就要加載我們自己的代碼了。假定我們自己的代碼文件是main.js，也放在js目錄下面。那么，只需要寫成下面這樣就行了： ~~~ 　　<script src="js/require.js" data-main="js/main"></script> ~~~ data-main屬性的作用是，指定網頁程序的主模塊。在上例中，就是js目錄下面的main.js，這個文件會第一個被require.js加載。由于require.js默認的文件后綴名是js，所以可以把main.js簡寫成main。 三、主模塊的寫法 上一節的main.js，我把它稱為"主模塊"，意思是整個網頁的入口代碼。它有點像C語言的main()函數，所有代碼都從這兒開始運行。 下面就來看，怎么寫main.js。 如果我們的代碼不依賴任何其他模塊，那么可以直接寫入javascript代碼。 ~~~ 　　// main.js 　　alert("加載成功！"); ~~~ 但這樣的話，就沒必要使用require.js了。真正常見的情況是，主模塊依賴于其他模塊，這時就要使用AMD規范定義的的require()函數。 ~~~ 　　// main.js 　　require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){ 　　　　// some code here 　　}); ~~~ require()函數接受兩個參數。第一個參數是一個數組，表示所依賴的模塊，上例就是['moduleA', 'moduleB', 'moduleC']，即主模塊依賴這三個模塊；第二個參數是一個回調函數，當前面指定的模塊都加載成功后，它將被調用。加載的模塊會以參數形式傳入該函數，從而在回調函數內部就可以使用這些模塊。 require()異步加載moduleA，moduleB和moduleC，瀏覽器不會失去響應；它指定的回調函數，只有前面的模塊都加載成功后，才會運行，解決了依賴性的問題。 下面，我們看一個實際的例子。 假定主模塊依賴jquery、underscore和backbone這三個模塊，main.js就可以這樣寫： ~~~ 　　require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){ 　　　　// some code here 　　}); ~~~ require.js會先加載jQuery、underscore和backbone，然后再運行回調函數。主模塊的代碼就寫在回調函數中。 四、模塊的加載 上一節最后的示例中，主模塊的依賴模塊是['jquery', 'underscore', 'backbone']。默認情況下，require.js假定這三個模塊與main.js在同一個目錄，文件名分別為jquery.js，underscore.js和backbone.js，然后自動加載。 使用require.config()方法，我們可以對模塊的加載行為進行自定義。require.config()就寫在主模塊（main.js）的頭部。參數就是一個對象，這個對象的paths屬性指定各個模塊的加載路徑。 ~~~ 　　require.config({ 　　　　paths: { 　　　　　　"jquery": "jquery.min", 　　　　　　"underscore": "underscore.min", 　　　　　　"backbone": "backbone.min" 　　　　} 　　}); ~~~ 上面的代碼給出了三個模塊的文件名，路徑默認與main.js在同一個目錄（js子目錄）。如果這些模塊在其他目錄，比如js/lib目錄，則有兩種寫法。一種是逐一指定路徑。 ~~~ 　　require.config({ 　　　　paths: { 　　　　　　"jquery": "lib/jquery.min", 　　　　　　"underscore": "lib/underscore.min", 　　　　　　"backbone": "lib/backbone.min" 　　　　} 　　}); ~~~ 另一種則是直接改變基目錄（baseUrl）。 ~~~ 　　require.config({ 　　　　baseUrl: "js/lib", 　　　　paths: { 　　　　　　"jquery": "jquery.min", 　　　　　　"underscore": "underscore.min", 　　　　　　"backbone": "backbone.min" 　　　　} 　　}); ~~~ 如果某個模塊在另一臺主機上，也可以直接指定它的網址，比如： ~~~ 　　require.config({ 　　　　paths: { 　　　　　　"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min" 　　　　} 　　}); ~~~ require.js要求，每個模塊是一個單獨的js文件。這樣的話，如果加載多個模塊，就會發出多次HTTP請求，會影響網頁的加載速度。因此，require.js提供了一個優化工具，當模塊部署完畢以后，可以用這個工具將多個模塊合并在一個文件中，減少HTTP請求數。 五、AMD模塊的寫法 require.js加載的模塊，采用AMD規范。也就是說，模塊必須按照AMD的規定來寫。 具體來說，就是模塊必須采用特定的define()函數來定義。如果一個模塊不依賴其他模塊，那么可以直接定義在define()函數之中。 假定現在有一個math.js文件，它定義了一個math模塊。那么，math.js就要這樣寫： ~~~ 　　// math.js 　　define(function (){ 　　　　var add = function (x,y){ 　　　　　　return x+y; 　　　　}; 　　　　return { 　　　　　　add: add 　　　　}; 　　}); ~~~ 加載方法如下： ~~~ 　　// main.js 　　require(['math'], function (math){ 　　　　alert(math.add(1,1)); 　　}); ~~~ 如果這個模塊還依賴其他模塊，那么define()函數的第一個參數，必須是一個數組，指明該模塊的依賴性。 ~~~ 　　define(['myLib'], function(myLib){ 　　　　function foo(){ 　　　　　　myLib.doSomething(); 　　　　} 　　　　return { 　　　　　　foo : foo 　　　　}; 　　}); ~~~ 當require()函數加載上面這個模塊的時候，就會先加載myLib.js文件。 六、加載非規范的模塊 理論上，require.js加載的模塊，必須是按照AMD規范、用define()函數定義的模塊。但是實際上，雖然已經有一部分流行的函數庫（比如jQuery）符合AMD規范，更多的庫并不符合。那么，require.js是否能夠加載非規范的模塊呢？ 回答是可以的。 這樣的模塊在用require()加載之前，要先用require.config()方法，定義它們的一些特征。 舉例來說，underscore和backbone這兩個庫，都沒有采用AMD規范編寫。如果要加載它們的話，必須先定義它們的特征。 ~~~ 　　require.config({ 　　　　shim: { 　　　　　　'underscore':{ 　　　　　　　　exports: '_' 　　　　　　}, 　　　　　　'backbone': { 　　　　　　　　deps: ['underscore', 'jquery'], 　　　　　　　　exports: 'Backbone' 　　　　　　} 　　　　} 　　}); ~~~ require.config()接受一個配置對象，這個對象除了有前面說過的paths屬性之外，還有一個shim屬性，專門用來配置不兼容的模塊。具體來說，每個模塊要定義（1）exports值（輸出的變量名），表明這個模塊外部調用時的名稱；（2）deps數組，表明該模塊的依賴性。 比如，jQuery的插件可以這樣定義： ~~~ 　　shim: { 　　　　'jquery.scroll': { 　　　　　　deps: ['jquery'], 　　　　　　exports: 'jQuery.fn.scroll' 　　　　} 　　} ~~~ 七、require.js插件 require.js還提供一系列插件，實現一些特定的功能。 domready插件，可以讓回調函數在頁面DOM結構加載完成后再運行。 ~~~ 　　require(['domready!'], function (doc){ 　　　　// called once the DOM is ready 　　}); ~~~ text和image插件，則是允許require.js加載文本和圖片文件。 ~~~ 　　define([ 　　　　'text!review.txt', 　　　　'image!cat.jpg' 　　　　], 　　　　function(review,cat){ 　　　　　　console.log(review); 　　　　　　document.body.appendChild(cat); 　　　　} 　　); ~~~ 類似的插件還有json和mdown，用于加載json文件和markdown文件。