RequireJS以一個(gè)相對(duì)于baseUrl的地址來加載所有的代碼。頁面頂層<script>標(biāo)簽中含有一個(gè)特殊的屬性data-main,require.js來使用它來啟動(dòng)腳本加載過程,而baseUrl一般設(shè)置到與該屬性相一致的目錄。
<script data-main="scripts/main.js" src="scripts/require.js"></script>
這樣,使用requireJS之后就只需要寫一個(gè)script標(biāo)簽即可,瀏覽器在執(zhí)行的時(shí)候,不會(huì)識(shí)別data-main中的入口js文件,只會(huì)識(shí)別src中的require.js框架文件,然后在require.js的執(zhí)行過程中,會(huì)去查找data-main中的入口文件,再去執(zhí)行入口文件。
也可以手動(dòng)在入口js中設(shè)置requirejs.config,在里面設(shè)置baseUrl和path,可以相對(duì)方便一點(diǎn)。
比如說有如下結(jié)構(gòu)的文件:
-project/
-index.html
-js/
-app/
-sub.js
-lib/
-jQuery.js
- canvas.js
-app.js
project文件夾下面有index.html和js文件夾,然后js文件夾下面又相對(duì)的有三個(gè)文件夾存放對(duì)應(yīng)文件,app.js為入口文件,就可以在app.js中設(shè)置requirejs.config
requirejs.config ({
baseUrl: 'js/lib',
path: {
app: '../app',
}
});
設(shè)置了baseUrl之后,要require模塊可以直接相對(duì)于baseUrl來寫,比如我們要請(qǐng)求js/lib下的jquery.js,直接寫成require('jquery')就可以,然后path內(nèi)設(shè)置其他文件夾相對(duì)于baseUrl的路徑,要require的話,設(shè)置了path之后也可以直接寫,例如我們?cè)O(shè)置了app文件夾的path為../app,即相對(duì)于baseUrl的地址,我們要require app文件夾下的sub.js時(shí)就可以直接寫成require('sub').
使用舉例:
//我們要使用上面例子中的依賴模塊
requirejs(['jquery','canvas','app/sub'], function ($, canvas, sub) {
//上面三個(gè)依賴模塊已經(jīng)加載完,并且在這就可以使用了
})