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