requireJS的配置心得


1、html頁面中如果同時存在data-main和require()和配置(config中的baseUrl)
,那么定義根路徑 baseUrl > data-main > index.html 但是data-main和index中的require也都會執行 


2、data-main的入口問題:
a. 首先的問題是你在main.js中所設置的腳本是異步加載的。所以如果你在data-main所指的js頁面中配置了其它JS加載,則html主頁面則不能保證它們所依賴的JS已經加載成功。

3、配置路徑paths所導致的問題
當你paths:{
"h":"modules/header",
"f":"modules/footer"
} 的時候,如果這個配置被加載后,如果你在訪問配置后的文件(指的是js文件),第一次訪問的路徑非常關鍵
為什么說關鍵?
因為此時的這個js文件已經被路徑“鎖定”
例如訪問 modules/header/header.js文件
a: 如果第一次用h/header.js訪問的話,那么此時的header.js文件的路徑被h/header.js鎖定,再想訪問的話就只能通過這條路徑訪問,
modules/header/header.js訪問會報錯。
b: 如果第一次用modules/header/header.js訪問該js文件的話,那么即使這個文件被配置了,那么h/header.js也將訪問不到這個js文件(但是可以通過h訪問modules/header文件夾下面的js文件,如module/header/skin.js文件)


4、paths和map聯合使用導致的問題
eg:如本文件夾中的main.js
paths: {
'h': 'modules/header',
'f': 'modules/footer'
}
map: {
'h': {
// 引入jquery10版本
'lib/jquery': 'lib/jquery10'
},
'f': {
'lib/jquery': 'lib/jquery200'
}
,
'modules/header/skin': {
'lib/jquery': 'lib/jquery-1.12.2'
}
}
在以上的兩條配置中,雖然將modules/header賦值給了h,但是在后面的代碼中想要正確的引入jq10版本必須用h/...的形式,用modules/header的方式不可以(因為我們定義的時候是用h定義的)

5、require([],fn)中[]內文件是異步加載的
require(["mvc","bg/bg","header/header","home/home","foot/foot","bottom/bottom","css!../lib/reset.css"],function(MVC){
MVC.install();
})

//注意:這個中括號里面的文件都是異步加載的,我沒有在main.js引入jq,在bg加載時如果也沒有傳入jquery的話,按理來說它的回調函數是不能用$的,但是試驗證明回調函數可以用$,這就是引文它后面的header.js加載到了jquery,requirejs特點加載既執行,所以在全局作用域下就有了$了!!

 

6、配置中shim的問題
拿作品里的MVCrequire版舉例
paths:{
jquery:"../lib/jquery-1.12.2",
mvc:"../lib/MVC"
},
shim:{
mvc:{
exports:"MVC",
deps:[]
}
}
主要看exports這個屬性,它暴露的是MVC這個對象(這個對象必須在MVC.js這個文件中存在),
這個MVC這個名不是隨便起的,它是把MVC.js中的一個變量MVC作為接口暴露出來的,這樣之后再次訪問該路徑下的MVC.js,就會得到MVC對象

再舉一個例子:
shim: {
// 處理jquery文件
'lib/jquery-1.12.2': {
// 定義接口
exports: '$',
// 定義依賴集合
deps: []
}
},
在這個例子中,(main是主入口,header是由main require進來的一個文件)
define(['modules/header/skin', 'lib/jquery-1.12.2'],fn)
如果直接像上面這一行這么引入,會是underfined的,因為jquery的路徑(lib/jquery-1.12.2)和名字(jquery,這個是JQ內置暴露的名字)不一樣
解決這個問題有兩個辦法:
a:paths: {
jquery: 'lib/jquery-1.12.2'
}
直接配置這個路徑,使他的名字和路徑一樣
b:還是define(['modules/header/skin', 'lib/jquery-1.12.2'],fn)這樣直接引入,不過在引入之前要 shim: {
// 處理jquery文件
'lib/jquery-1.12.2': {
// 定義接口
exports: '$',
// 定義依賴集合
deps: []
}
}
這樣的話,只要你路徑寫對了,訪問到這個文件了,它就會把$暴露出來!

 


還有 這里配置的mvc是一個路徑


小提示:想看JQ版本號,用$().jquery


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM