Require.js 詳細瞭解

1、Require.js 做用javascript

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

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

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

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

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

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

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

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

1.五、實現CDN回退app

這一隱藏功能,能夠支持當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
相關文章
相關標籤/搜索