Require.js 詳細瞭解

1、Require.js 做用

1.一、是JS 文件加載器，實現js腳本的AMD異步加載。

保證不阻塞頁面的渲染和其後的腳本的執行，並提供了在加載完成以後的執行相應回調函數的功能。

1.二、實現JS、CSS文件的規範化，模塊化。

使用 define() 定義符合require規範的模塊；
使用require.config() 配置模塊ID和它對應的js模塊所在文件路徑；
使用require()指定其所依賴的模塊；
使用r.js合併優化。

1.三、能夠管理JS模塊/文件之間的依賴。

JS模塊化，文件化以後，它們之間的依賴能夠經過require.js優雅的解決。

1.四、壓縮合並多個JS和CSS文件。

require.js中提供的優化器 r.js 能夠來優化頁面中的js腳本和css文件，達到提升頁面響應速度，減小頁面所須要的http/https請求次數。

1.五、實現CDN回退

這一隱藏功能，能夠支持當CDN加載不正確時，回退加載本地相應的庫。

2、Require.js 用法

2.一、在Html頁面中添加標籤

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

data-main屬性的做用是，指定網頁程序的主模塊。在上面語句中做用，就是加載js目錄下面的main.js，這個文件會第一個被require.js加載。

因爲require.js默認的文件後綴名是js，因此能夠把main.js簡寫成main。

2.二、main.js示例

baseUrl ：基目錄;
paths ：js文件路徑;
shim : 配置依賴關係;
require([主模塊])

packages：從CommonJS包(package)中加載模塊。參見從包中加載模塊。

waitSeconds：在放棄加載一個腳本以前等待的秒數。設爲0禁用等待超時。默認爲7秒。

context：命名一個加載上下文。這容許require.js在同一頁面上加載模塊的多個版本，若是每一個頂層require調用都指定了一個惟一的上下文字符串。想要正確地使用，請參考多版本支持一節。

deps：指定要加載的一個依賴數組。當將require設置爲一個config object在加載require.js以前使用時頗有用。一旦require.js被定義，這些依賴就已加載。使用deps就像調用require([])，但它在loader處理配置完畢以後就當即生效。它並不阻塞其餘的require()調用，它僅是指定某些模塊做爲config塊的一部分而異步加載的手段而已。

callback：在deps加載完畢後執行的函數。當將require設置爲一個config object在加載require.js以前使用時頗有用，其做爲配置的deps數組加載完畢後爲require指定的函數。

enforceDefine：若是設置爲true，則當一個腳本不是經過define()定義且不具有可供檢查的shim導出字串值時，就會拋出錯誤。參考在IE中捕獲加載錯誤一節。

xhtml：若是設置爲true，則使用document.createElementNS()去建立script元素。

urlArgs：RequireJS獲取資源時附加在URL後面的額外的query參數。做爲瀏覽器或服務器未正確配置時的「cache bust」手段頗有用。使用cache bust配置的一個示例：

urlArgs: "bust=" +  (new Date()).getTime()

在開發中這頗有用，但請記得在部署到生產環境以前移除它。

scriptType：指定RequireJS將script標籤插入document時所用的type=""值。默認爲「text/javascript」。想要啓用Firefox的JavaScript 1.8特性，可以使用值「text/javascript;version=1.8」。

 

/*
* main.js
*/
(function() {
     require.config({
          baseUrl : './',
          paths : {
               jquery : 'assets/js/jquery/jquery.min',
               bootstrap : 'assets/bootstrap/js/bootstrap.min'
          },
          shim : {
               bootstrap : {
                    deps : [ 'jquery' ],
                    exports : 'bootstrap'
               }
          }
         
     });

     require(['bootstrap' ], function() {
          console.log(all loaded);
     });

})(this);

 

requirejs.config({
    baseUrl : "js",
    map : {
        "*" : {
            "css"  : "css",
            "text" : "text"
        }
    },
    paths : {
        "jquery"                   : "lib/jquery-1.12.4",
        "bootstrap"                : "lib/bootstrap-3.0.0/js/bootstrap.min",
        "bootstrap.datepicker"     : "lib/bootstrap.datepicker/js/bootstrap.datepicker",
        "bootstrap.datetimepicker" : "lib/bootstrap.datetimepicker/js/bootstrap.datetimepicker.min",
        "modernizr"                : "lib/modernizr-2.6.2/js/modernizr",
        "underscore"               : "lib/underscore-1.4.1/js/underscore.min",
        "backbone"                 : "lib/backbone-0.9.2/js/backbone.min",
        "app"                      : "app"
    },
    shim : {
        "bootstrap"                : { deps : [ "css!lib/bootstrap-3.0.0/css/bootstrap.min" ] },
        "bootstrap.datepicker"     : { deps : [ "bootstrap", "css!lib/bootstrap.datepicker/css/bootstrap.datepicker" ] },
        "bootstrap.datetimepicker" : { deps : [ "bootstrap.datepicker", "css!lib/bootstrap.datetimepicker/css/bootstrap.datetimepicker.min" ] },
        "underscore"               : { exports : '_' },
        "backbone"                 : { deps : [ "jquery", "underscore" ], exports : "Backbone" },
        "app"                      : { deps : [ "jquery", "bootstrap", "bootstrap.datepicker", "bootstrap.datetimepicker", "modernizr", "underscore", "backbone", "css!../css/style" ] }
    },
    urlArgs : "bust=" + (new Date()).getTime()
});

Require.config