深入Require.js

原文：http://tech.pro/tutorial/1300/deep-dive-into-requirejs

by：Jonathan Creamer

 

現在，Require.js是我最喜歡的Javascript編程方式。它可以使代碼化整為零，並易於管理。而Require.js Optimizer能幫助我們將一個較大的應用分散成多個較小的應用，並通過依賴串聯起來，最后在編譯打包時合並起來。這些原因促使我們使用require.js。

那么，讓我們來看看require.js有什么牛逼的特性吧！

與CommonJS兼容

AMD (異步模塊定義規范) 出現自CommonJS工作組。CommonJS旨在創造Javascript的生態系統。 CommonJS的一個重要部分是transport/c， 即AMD的前身，而require.js則是該規范的一個實現。

CommonJS模塊和AMD模塊的語法差異，主要由於AMD需要支持瀏覽器的異步特性。而CommonJS模塊則需要同步進行，例如：

var someModule = require( "someModule" );
var anotherModule = require( "anotherModule" );    

exports.asplode = function() {
    someModule.doTehAwesome();
    anotherModule.doMoarAwesome();
};

AMD模塊是異步加載模塊的，故而模塊定義需要一個數組作為第一個參數，而模塊加載完畢后回調的函數作為第二個參數傳入。

define( [ "someModule"],  function( someModule ) {   
    return {
        asplode: function() {
            someModule.doTehAwesome();

            // 這將會異步執行
            require( [ "anotherModule" ], function( anotherModule ) {
                anotherModule.doMoarAwesome();
            });
        }
    };
});

然而，在require.js中AMD亦能兼容CommonJS語法。通過AMD的define函數包裝CommonJS模塊，你也可以再AMD中擁有一個CommonJS模塊，例如：

define(function( require, exports, module )
    var someModule = require( "someModule" );
    var anotherModule = require( "anotherModule" );    

    someModule.doTehAwesome();
    anotherModule.doMoarAwesome();

    exports.asplode = function() {
        someModule.doTehAwesome();
        anotherModule.doMoarAwesome();
    };
});

實際上，require.js通過函數.toString解釋回調函數的模塊內容，找到其正確的依賴，將其變成一個通常的AMD模塊。需要注意，如果你使用這種方式編寫模塊，可能會發生與其他AMD加載器不兼容的情況，因為這違背了AMD規范，但它能很好的理解這種格式的寫法。

這里發生了什么，require.js實際上做了function.toString的回調函數解析模塊的內容，找到正確的依賴，就像它，如果它是一個正常的AMD模塊。重要的是要注意，如果您選擇這樣寫模塊，他們將最有可能不兼容與其他AMD模塊裝載機，因為這違背了AMD規范，但它是很好的了解這個格式存在！

 

CDN回退

另一個隱藏的require.js瑰寶是，其支持當CDN加載不正確時，回退加載本地相應的庫。我們可以通過require.config達到這個目的：

requirejs.config({
    paths: {
        jquery: [
            '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js',
            'lib/jquery'
        ]
    }
});

 

沒有依賴？對象字面量？沒問題！

當你寫一個沒有任何依賴的模塊，並且只是返回一個對象包含一些功能函數，那么我們可以使用一種簡單的語法：

define({
    forceChoke: function() {

    },
    forceLighting: function() {

    },
    forceRun: function() {

    }    
});

很簡單，也很有用，如果該模塊僅僅是功能的集合，或者只是一個數據包。

 

循環依賴

在一些情況中，我們可能需要模塊moduleA和moduleA中的函數需要依賴一些應用。這就是循環依賴。

// js/app/moduleA.js
define( [ "require", "app/app"],
    function( require, app ) {
        return {
            foo: function( title ) {
                var app = require( "app/app" );
                return app.something();
            }
        }
    }
);

 

得到模塊的地址

如果你需要得到模塊的地址，你可以這么做……

var path = require.toUrl("./style.css");

 

BaseUrl

通常，在進行的單元測試時，你的源代碼可能放在類似src的文件夾里，同時，可能你的測試放在類似tests的文件夾里。這可能比較難讓測試配置正確。

比如我們在tests文件夾有一個index.html文件，並需要本地加載tests/spec/*.js。並假設，所有源代碼在為src/js/*.js，並有一個main.js在該文件夾。

index.html中，不在加載require.js時設置data-main。

<script src="src/js/vendor/require.js"></script>
<script>
require( [ "../src/js/main.js" ], function() {
    require.config({
        baseUrl: "../src/js/"
    });

    require([ 
        "./spec/test.spec.js",
        "./spec/moar.spec.js"
    ], function() {
        // start your test framework
    });
});
</script>

你可以發現main.js被加載。然而由於沒有設置data-main，所欲我們需要制定一個baseUrl。而當使用data-main時，baseUrl會根據其設定的文件來自動設置。

在這里，你可以看到main.js被載入。然而，由於它沒有加載數據主要腳本標記，那么您必須指定一個base即可。當數據主要是用於baseURL時從主文件中的位置推斷。通過自定義baseUrl我們可以很容易將測試代碼和應用代碼分開存放。

 

JSONP

我們可以這樣處理JSONP終端：

require( [ 
    "http://someapi.com/foo?callback=define"
], function (data) {
    console.log(data);
});

對於非AMD庫，使用shim來解決

在很多請款下，我們需要使用非AMD庫。例如Backbone和Underscore並未適應AMD規范。而jQuery實際上只是將自己定義成一個名為jQuery全局變量，所以對於jQuery什么都不用做。

幸運的是，我們可以使用shim配置來解決這一問題。

require.config({
    paths: {
        "backbone": "vendor/backbone",
        "underscore": "vendor/underscore"
    },
    shim: {
        "backbone": {
            deps: [ "underscore" ],
            exports: "Backbone"
        },
        "underscore": {
            exports: "_"
        }
    }
});