requirejs使用

 

實現模塊化、按需加載。

一.配置參數。

1.baseUrl：以一個相對於baseUrl的地址來加載全部的代碼。

  data-main，使用它來啓動腳本加載過程，而baseUrl通常設置到與該屬性相一致的目錄。也能夠經過config來配置。以下：

若是沒有顯式指定config及data-main，則默認的baseUrl爲包含RequireJS的那個HTML頁面的所屬目錄。

<script data-main="scripts/main.js" src="scripts/require.js"></script>

2.定義模塊：

defined:

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;
        }
    }
)

3.require  引入

requirejs(['jquery', 'canvas', 'app/sub'],
function   ($,        canvas,   sub) {
    //jQuery, canvas and the app/sub module are all
    //loaded and can be used here now.
});
//入參 三個。
context.require(deps, callback, errback)

 

4.paths ：

path映射那些不直接放置於baseUrl下的模塊名。設置path時起始位置是相對於baseUrl的，除非該path設置以"/"開頭或含有URL協議（如http:）。

5.shim: 爲那些沒有使用define()來聲明依賴關係、設置模塊的"瀏覽器全局變量注入"型腳本作依賴和導出配置。

若是shim對象的value值裏的對象有init會先執行並返回 賦值 給 exportsFn,不然 有export會返回export，不然返回公共的export。賦值 給 exportsFn。

處理函數以下：

//處理shim配置的exports
            makeShimExports: function (value) {
                function fn() {
                    var ret;
                    if (value.init) {
                        ret = value.init.apply(global, arguments);
                    }
                    return ret || (value.exports && getGlobal(value.exports));
                }
                return fn;
            },

 

RequireJS 2.0.*中，shim配置中的"exports"屬性能夠是一個函數而不是字串。這種狀況下它就起到上述示例中的"init"屬性的功能。 RequireJS 2.1.0+中加入了"init"承接庫加載後的初始工做，以使exports做爲字串值被enforceDefine所使用。

那些僅做爲jQuery或Backbone的插件存在而不導出任何模塊變量的"模塊"們，shim配置可簡單設置爲依賴數組：

6.map: 對於給定的模塊前綴，使用一個不一樣的模塊ID來加載該模塊。

另外在map中支持「*」，意思是「對於全部的模塊加載，使用本map配置」。若是還有更細化的map配置，會優先於「*」配置。

requirejs.config({
    map: {
        '*': {
            'foo': 'foo1.2'
        },
        'some/oldmodule': {
            'foo': 'foo1.0'
        }
    }
});

意思是除了「some/oldmodule」外的全部模塊，當要用「foo」時，使用「foo1.2」來替代。對於「some/oldmodule」本身，則使用「foo1.0」。