RequireJS采用與傳統(tǒng)的<script>標(biāo)簽不同的方式來(lái)加載腳本文件。然而,這樣的方式依然可以以最優(yōu)的性能快速運(yùn)行心赶,這種方式的主要目標(biāo)是鼓勵(lì)代碼的模塊化。鼓勵(lì)使用模塊ID而非腳本便簽內(nèi)的ULR也是這種方式的組成部分缺猛。
RequireJS根據(jù)基URL來(lái)加載所有的代碼缨叫。基URL一般情況下被默認(rèn)為data-main屬性中指定腳本所在的目錄荔燎,該腳本是為頁(yè)面而加載的頂級(jí)腳本耻姥。data-main屬性是一個(gè)特殊的屬性,require.js將會(huì)檢查并開(kāi)始加載該腳本文件有咨。以下示例將以一個(gè)腳本的基URL結(jié)束:
``
<script data-main="script/main.js" src="scripts/require.js"></script>
或者咏闪,你可以手動(dòng)地在RequireJS config當(dāng)中設(shè)置。如果沒(méi)有顯式的配置文件以及data-main被使用摔吏,那么基URL將默認(rèn)為運(yùn)行RequireJS的文檔所在的目錄鸽嫂。
RequireJS同時(shí)也假設(shè)默認(rèn)情況下所有的依賴(lài)都是腳本文件,因此征讲,你不需要在模塊ID上加上.js后綴据某。RequireJS在將模塊ID轉(zhuǎn)換為路徑時(shí),自動(dòng)為其加上默認(rèn)擴(kuò)展名诗箍。通過(guò)使用paths config癣籽,你可以建立起一組腳本文件的位置。所有的這些功能使得你輸入地更少滤祖。
可能有些時(shí)候你想直接引用一個(gè)腳本文件筷狼,而不遵循“baseURL+paths”。如果一個(gè)模塊ID中有一下的字符之一的匠童,該ID將不會(huì)使用“baseURL+paths”配置來(lái)傳遞埂材,僅僅將其視為普通的URL:
- 以“.js”結(jié)尾
- 以“/”開(kāi)頭
- 包含一個(gè)URL協(xié)議,例如“http:”汤求、“https”
一般情況下俏险,最好使用基URL以及“paths”配置來(lái)為模塊ID設(shè)立路徑。通過(guò)這樣做扬绪,今后你在重命名以及為優(yōu)化版本配置不同的路徑時(shí)竖独,將更加的靈活方便。
相似地挤牛,為了避免一連串連鎖配置莹痢,最好避免為腳本設(shè)置過(guò)深的目錄,而是采用基Url墓赴,或者你想通過(guò)將你的應(yīng)用代碼與庫(kù)代碼或者是組建代碼分隔開(kāi)來(lái)竞膳,你可以使用以下目錄布局:
www/
??|--- index.html
??|--- js/
????|--- app/
??????|---sub.js
????|--- lib/
??????|--- jquery.js
??????|--- canvas.js
????|--- app.js
????|--- require.js
在index.html中:
<script data-main="js/app.js" src="js/require.js"></script>
在app.js中:
requirejs.config({ //默認(rèn)情況下會(huì)在js/lib目錄下加載任何模塊ID baseUrl:'js/lib', //除非模塊ID使用‘‘a(chǎn)pp’’開(kāi)頭,從js/app目錄中加載它竣蹦。 //路徑配置是相對(duì)于基Url顶猜,而且不會(huì)包含任何的擴(kuò)展 //名'.js',因?yàn)槁窂脚渲檬菫榱四夸?path:{ app:'.../app' } }); //主要應(yīng)用邏輯開(kāi)始 requirejs(['jquery','canvas','app/sub'], function($, canvas, sub){ //jQuery, canvas and the app/sub模塊全部能被加載并能在此被使用 });
作為示例的一部分痘括,這些組件庫(kù)长窄,例如jQuery在它們的文件名當(dāng)中都沒(méi)有出現(xiàn)版本數(shù)字。如果你想追蹤版本纲菌,我們推薦將版本信息保存在單獨(dú)的文本文件中挠日,或者你可以使用像volo這類(lèi)工具,這類(lèi)工具將會(huì)建立起一個(gè)保存有版本信息的package.json文件在硬盤(pán)上翰舌。這樣你就可以進(jìn)行非常微小的配置嚣潜,而不是為每個(gè)庫(kù)在配置中建立起單獨(dú)的入口。例如椅贱,配置'jquery'為'jquery-1.7.2'懂算。
理想情況下只冻,你所加載的模塊將成為模塊,這些模塊通過(guò)調(diào)用define()函數(shù)來(lái)定義计技。然而喜德,你可能需要使用一些傳統(tǒng)的‘瀏覽器全局’腳本,這些腳本不會(huì)使用define()來(lái)定義他們的依賴(lài)垮媒。出于這個(gè)目的舍悯,你可以使用shim config。該工具能夠很好地表述他們的依賴(lài)睡雇。
如果你表述依賴(lài)萌衬,你很可能會(huì)遇到加載錯(cuò)誤,因?yàn)镽equireJS為了加快加載速度它抱,將異步無(wú)序地加載腳本文件秕豫。