本文是requireJS的一些知識點的總結，配上多頁面應用中的實例分析。
本案例的目錄結構如下：
requireJS API的三個主要函數：define（創建模塊），require（加載模塊），config（配置）
1、 HTML文件中加載JS文件
page1.html內容如下：
<!DOCTYPE html> <html> <head> <title>Page 1</title> <script data-main="scripts/page1" src="scripts/lib/require.js"></script> </head> <body> <a href="page2.html">Go to Page 2</a> </body> </html>
page2.html內容如下：
<!DOCTYPE html> <html> <head> <title>Page 2</title> <script data-main="scripts/page2" src="scripts/lib/require.js"></script> </head> <body> <a href="page1.html">Go to Page 1</a> </body> </html>
知識擴展：
data-main屬性指定網頁程序的主模塊，這個文件被requireJS首先加載。由於requireJS默認的文件後綴名是js，所以可以把page1.js簡寫成page1
加載腳本文件的根路徑優先規則
用require()加載模塊時，省略.js後綴，會從baseUrl下查找；如果帶有.js後綴、或以”/"開始、或包含URL協議（http/https）則將根
據你的具體路徑設置去查找
config > data-main > 默認baseUrl
不對data-main和config進行設置，則默認baseUrl為引用require.js的那個HTML頁面所在目錄
設置data-main，則baseUrl為主模塊所在目錄（如第一段HTML中的主模塊為page1.js，因此以其所在目錄/scripts為根目錄）
配置config，顯式設置baseUrl，也可為每一個模塊單獨設置路徑
2、對模塊的路徑等進行配置
使用require.config()方法，可以對模塊的加載行為進行自定義。在多頁面應用中，可以將配置寫在共用的文件中，如本例中的common.js文件，然後各個頁面加載當前配置後，在回調函數中再加載各自需要的模塊。
common.js代碼如下：
require.config({
baseUrl: 'scripts/app',
paths: {
jquery: [
'http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min',
'../lib/jquery'
]
}
});
知識擴展：
支持的配置項：
baseUrl ：
所有模塊的查找根路徑。注意：當加載的js文件(以.js結尾、以”/”開頭、含有協議)，不會使用baseUrl；
paths :
path映射那些不直接放置於baseUrl下的模塊名。設置path時起始位置是相對於baseUrl的，除非該path設置以"/"開頭或含有URL協議；
注意：在paths中定義的路徑不能含有.js後綴，因為路徑解析機制會自動添加上.js後綴；而且加載路徑可以設置多個，如從CDN加載失敗，則加載本地js文件；
shim:
為那些沒有使用define()來聲明依賴關系的模塊進行配置；
其中需要注意兩個參數：
（1）exports值（輸出的變量名），暴露方法接口
（2）deps數組，表明該模塊的依賴性
如：
require.config({
baseUrl: '/scripts/lib',
shim:{
zepto: {
exports: '$'
},
backbone: {
deps: ['underscore', 'zepto'],
exports: 'Backbone'
},
'zepto.animate': ['zepto']
}
});
3、模塊的加載
page1.js代碼如下：
require(['./common'], function (common) {
require(['sayPage1'], function (sayPage1) {
sayPage1.hello();
});
});
page2.js代碼如下：
require(['./common'], function (common) {
require(['sayPage2'], function (sayPage2) {
sayPage2.hello();
});
});
知識拓展：
require()函數接受兩個參數。第一個參數是一個數組，表示所依賴的模塊；第二個參數是一個回調函數，當前面指定的模塊都加載成功後，它才會被調用。加載的模塊可以作為回調函數的參數進行調用。
這裡為了保證配置完成後才加載需要的模塊，主要是為了路徑的正確解析，在回調函數中再進行require。
4、模塊的定義
sayPage1.js中的代碼：
define(['jquery'], function($) {
function sayHi(){
$('body').append('<h1>Hello page1!</h1>');
}
return {
hello: sayHi
}
});
知識擴展：
define函數也接受兩個參數。第一個參數為所依賴模塊組成的數組，第二個參數是一個回調函數。
當然最後上線的時候還要進行JS文件的合並與壓縮，可以利用r.js，方便快捷~
以上所述是小編給大家介紹的RequireJS多頁面應用實例分析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！