摘要：將模塊定義為一個(gè)函數(shù)對(duì)模塊的返回值類型并沒有強(qiáng)制為一定是個(gè)，任何函數(shù)的返回值都是允許的。此處是一個(gè)返回了函數(shù)的模塊定義點(diǎn)評(píng)加載該模塊后，返回值是一個(gè)閉包。僅支持返回值類型為的服務(wù)，其他返回類型如數(shù)組字串?dāng)?shù)字等都不能支持。

模塊不同于傳統(tǒng)的腳本文件，它良好地定義了一個(gè)作用域來避免全局名稱空間污染。它可以顯式地列出其依賴關(guān)系，并以函數(shù)(定義此模塊的那個(gè)函數(shù))參數(shù)的形式將這些依賴進(jìn)行注入，而無需引用全局變量。RequireJS的模塊是模塊模式的一個(gè)擴(kuò)展，其好處是無需全局地引用其他模塊。

RequireJS的模塊語法允許它盡快地加載多個(gè)模塊，雖然加載的順序不定，但依賴的順序最終是正確的。同時(shí)因?yàn)闊o需創(chuàng)建全局變量，甚至可以做到在同一個(gè)頁面上同時(shí)加載同一模塊的不同版本。

(如果你熟悉ConmmonJS，可參看CommonJS的注釋信息以了解RequireJS模塊到CommonJS模塊的映射關(guān)系)。
一個(gè)磁盤文件應(yīng)該只定義 1 個(gè)模塊。多個(gè)模塊可以使用內(nèi)置優(yōu)化工具將其組織打包。

如果一個(gè)模塊僅含值對(duì)，沒有任何依賴，則在define()中定義這些值對(duì)就好了：

define({
    name: "john",
    age : 20,
    sex : "femal"
});

點(diǎn)評(píng)：這種情況用途不是很大，一般用于簡單的數(shù)據(jù)模擬。加載該模塊后，回調(diào)函數(shù)中注入的參數(shù)是該鍵值對(duì)Object對(duì)象，即：

 {
    name: "john",
    age : 20,
    sex : "femal"
 }

如果一個(gè)模塊沒有任何依賴，但需要一個(gè)做setup工作的函數(shù)，則在define()中定義該函數(shù)，并將其傳給define()：

define(function () {
    //Do setup work here

    return {
        color: "black",
        size: "unisize"
    }
});

點(diǎn)評(píng)：這種適合無依賴模塊的編寫，且回調(diào)函數(shù)中注入的參數(shù)是根據(jù)函數(shù)中return的返回值確定的，如果沒有return語句，則默認(rèn)返回undefined。

如果模塊存在依賴：則第一個(gè)參數(shù)是依賴的名稱數(shù)組；第二個(gè)參數(shù)是函數(shù)，在模塊的所有依賴加載完畢后，該函數(shù)會(huì)被調(diào)用來定義該模塊，因此該模塊應(yīng)該返回一個(gè)定義了本模塊的object。依賴關(guān)系會(huì)以參數(shù)的形式注入到該函數(shù)上，參數(shù)列表與依賴名稱列表一一對(duì)應(yīng)。

//my/shirt.js now has some dependencies, a cart and inventory
//module in the same directory as shirt.js
define(["./cart", "./inventory"], function(cart, inventory) {
        //return an object to define the "my/shirt" module.
        return {
            color: "blue",
            size: "large",
            addToCart: function() {
                inventory.decrement(this);
                cart.add(this);
            }
        }
    }
);

本示例創(chuàng)建了一個(gè)my/shirt模塊，它依賴于my/cart及my/inventory。磁盤上各文件分布如下：

my/cart.js

my/inventory.js

my/shirt.js

模塊函數(shù)以參數(shù)"cart"及"inventory"使用這兩個(gè)以"./cart"及"./inventory"名稱指定的模塊。在這兩個(gè)模塊加載完畢之前，模塊函數(shù)不會(huì)被調(diào)用。

嚴(yán)重不鼓勵(lì)模塊定義全局變量。遵循此處的定義模式，可以使得同一模塊的不同版本并存于同一個(gè)頁面上(參見 高級(jí)用法 )。另外，函參的順序應(yīng)與依賴順序保存一致。

返回的object定義了"my/shirt"模塊。這種定義模式下，"my/shirt"不作為一個(gè)全局變量而存在。

點(diǎn)評(píng)：這算是模塊中最常見的用法了。注意上面強(qiáng)調(diào)的部分。

對(duì)模塊的返回值類型并沒有強(qiáng)制為一定是個(gè)object，任何函數(shù)的返回值都是允許的。此處是一個(gè)返回了函數(shù)的模塊定義：

//A module definition inside foo/title.js. It uses
//my/cart and my/inventory modules from before,
//but since foo/title.js is in a different directory than
//the "my" modules, it uses the "my" in the module dependency
//name to find them. The "my" part of the name can be mapped
//to any directory, but by default, it is assumed to be a
//sibling to the "foo" directory.
define(["my/cart", "my/inventory"],
    function(cart, inventory) {
        //return a function to define "foo/title".
        //It gets or sets the window title.
        return function(title) {
            return title ? (window.title = title) :
                   inventory.storeName + " " + cart.name;
        }
    }
);

點(diǎn)評(píng)：加載該模塊后，返回值是一個(gè)閉包。

如果你現(xiàn)有一些以CommonJS模塊格式編寫的代碼，而這些代碼難于使用上述依賴名稱數(shù)組參數(shù)的形式來重構(gòu)，你可以考慮直接將這些依賴對(duì)應(yīng)到一些本地變量中進(jìn)行使用。你可以使用一個(gè)CommonJS的簡單包裝來實(shí)現(xiàn)：

define(function(require, exports, module) {
        var a = require("a"),
            b = require("b");

        //Return the module value
        return function () {};
    }
);

該包裝方法依靠Function.prototype.toString()將函數(shù)內(nèi)容賦予一個(gè)有意義的字串值，但在一些設(shè)備如PS3及一些老的Opera手機(jī)瀏覽器中不起作用。考慮在這些設(shè)備上使用優(yōu)化器將依賴導(dǎo)出為數(shù)組形式。

更多的信息可參看CommonJS Notes頁面，以及"Why AMD"頁面的"Sugar"段落。

點(diǎn)評(píng)：這種用法跟上面說的一樣，首先回調(diào)用Function.prototype.toString()將函數(shù)轉(zhuǎn)換成字符串，然后在進(jìn)行詞法分析，這樣依賴，就比較低耗了，原則上不考慮使用這種方法進(jìn)行模塊封裝。

你可能會(huì)看到一些define()中包含了一個(gè)模塊名稱作為首個(gè)參數(shù):

    //Explicitly defines the "foo/title" module:
    define("foo/title",
        ["my/cart", "my/inventory"],
        function(cart, inventory) {
            //Define foo/title object in here.
       }
    );

這些常由優(yōu)化工具生成。你也可以自己顯式指定模塊名稱，但這使模塊更不具備移植性——就是說若你將文件移動(dòng)到其他目錄下，你就得重命名。一般最好避免對(duì)模塊硬編碼，而是交給優(yōu)化工具去生成。優(yōu)化工具需要生成模塊名以將多個(gè)模塊打成一個(gè)包，加快到瀏覽器的載人速度。

點(diǎn)評(píng)：define 函數(shù)有三個(gè)參數(shù)，第一個(gè) id 即模塊名稱，這個(gè)名稱的格式是相對(duì)于 baseUrl 的路徑除去文件格式，比如 baseUrl 為 js 目錄，一個(gè)模塊放在 js/libs/hi.js 里，則如果名稱是這樣定義的：

define("libs/hi", ["jquery"], function($){......});

這樣的定義形式的好處是，模塊不可能沖突，因?yàn)橥荒夸浵虏辉试S同名文件。但也因此 require.js 建議我們不要設(shè)置模塊名稱，因?yàn)樵O(shè)置了 ‘libs/hi’ 的模塊名稱后，模塊就必須放在 js/libs 目錄下的 hi.js 文件中，要移動(dòng)位置的話，模塊名稱要跟著改變。至于后期利用 r.js 優(yōu)化時(shí)生成了模塊名稱，那已經(jīng)是另外一回事。所以定義模塊時(shí)，第一參數(shù)常常會(huì)忽略。

JSONP是在javascript中服務(wù)調(diào)用的一種方式。它僅需簡單地通過一個(gè)script標(biāo)簽發(fā)起HTTP GET請(qǐng)求，是實(shí)現(xiàn)跨域服務(wù)調(diào)用一種公認(rèn)手段。

為了在RequireJS中使用JSON服務(wù)，須要將callback參數(shù)的值指定為"define"。這意味著你可將獲取到的JSONP URL的值看成是一個(gè)模塊定義。

下面是一個(gè)調(diào)用JSONP API端點(diǎn)的示例。該示例中，JSONP的callback參數(shù)為"callback"，因此"callback=define"告訴API將JSON響應(yīng)包裹到一個(gè)"define()"中：

require(["http://example.com/api/data.json?callback=define"],
    function (data) {
        //The data object will be the API response for the
        //JSONP data call.
        console.log(data);
    }
);

JSONP的這種用法應(yīng)僅限于應(yīng)用的初始化中。一旦JSONP服務(wù)超時(shí)，其他通過define()定義了的模塊也可能得不得執(zhí)行，錯(cuò)誤處理不是十分健壯。

僅支持返回值類型為JSON object的JSONP服務(wù)，其他返回類型如數(shù)組、字串、數(shù)字等都不能支持。

這種功能不該用于long-polling類的JSONP連接——那些用來處理實(shí)時(shí)流的API。這些API在接收響應(yīng)后一般會(huì)做script的清理，而RequireJS則只能獲取該JSONP URL一次——后繼使用require()或define()發(fā)起的的對(duì)同一URL的依賴(請(qǐng)求)只會(huì)得到一個(gè)緩存過的值。

JSONP調(diào)用錯(cuò)誤一般以服務(wù)超時(shí)的形式出現(xiàn)，因?yàn)楹唵渭虞d一個(gè)script標(biāo)簽一般不會(huì)得到很 詳細(xì)的網(wǎng)絡(luò)錯(cuò)誤信息。你可以override requirejs.onError()來過去錯(cuò)誤。更多的信息請(qǐng)參看錯(cuò)誤處理部分。

點(diǎn)評(píng)：跨域腳本調(diào)用。

常見模塊加載調(diào)用的形式如下：

require(["jquery"],function($){

    //todo

});

第一個(gè)參數(shù)指定要加載的模塊名，第二個(gè)是相對(duì)應(yīng)的注入?yún)?shù)。

官網(wǎng)API文檔：http://requirejs.org/docs/api.html#define
中文API文檔：http://requirejs.cn/docs/api.html#define
中文API文檔：http://makingmobile.org/docs/tools/requirejs-api-zh/#define
中文文檔：http://www.zfanw.com/blog/require-js.html
中文文檔：http://www.fanli7.net/a/bianchengyuyan/ASP/20130419/300243.html