為什么要使用require.js
異步加載文件右冻，簡(jiǎn)化依賴關(guān)系
模塊化開(kāi)發(fā)， 一個(gè)文件就是一個(gè)模塊累颂，減少全局變量
如何使用
define定義模塊
require加載模塊
tips:
一般不寫模塊名侣集，讓自動(dòng)打包來(lái)完成
requireJS以一個(gè)相對(duì)于baseUrl的地址來(lái)加載所有代碼
加載機(jī)制
RequireJS使用head.appendChild()將每一個(gè)依賴加載為一個(gè)script標(biāo)簽〗ㄒ【意味著可以跨域訪問(wèn)】
加載即執(zhí)行
配置模塊路徑
-
paths-映射不放于baseUrl下的模塊名
requirejs.config({ baseUrl: '/js', paths: { 'jquery': 'lib/jquery' //模塊名：模塊路徑 } }) *** 另一種方式 *** requirejs.config({ baseUrl: '/js', paths: { 'jquery': [ 'lib/jquery2', //首先加載的模塊 'lib/jquery' //第一個(gè)加載失敗后的備用文件 ] } })
定義模塊
-
函數(shù)式定義
// 最佳實(shí)踐：不寫死模塊名, 即'helper'部分 // 依賴的模塊可有可無(wú), 即['jquery']部分 define('helper', ['jquery'], function($){ return{ trim: function(str) { return $.trim(str); } } }) -
定義簡(jiǎn)單的對(duì)象
define({ userName: '', name: ''， eamil: '' })
shim > 配置不支持AMD的模板
shim({
'modernizr': { //不支持AMD的模塊
deps: ['jquery'], //依賴的模塊
exports: 'Modernizr', //全局變量作為模塊對(duì)象
init: function($) { //初始化函數(shù)岛马，返回的對(duì)象代替exports作為模塊對(duì)象
return $;
}
}
})
其它常用配置
-
waitSeconds
下載js等待的時(shí)間棉姐，默認(rèn)7秒；如果設(shè)置為0啦逆，則禁止等待超時(shí)伞矩。
-
urlArgs
下載文件時(shí)間，在URL后面增加額外的query參數(shù)
更多內(nèi)多參考
- RequireJS官網(wǎng)：http://requirejs.org/
- RequireJS和AMD規(guī)范：http://javascript.ruanyifeng.com/tool/requirejs.html
