本文是requireJS的一些知識點的總結，配上多頁面應用中的實例分析。
本案例的目錄結構如下：
requireJS API的三個主要函數：define（創建模塊），require（加載模塊），config（配置）
1、 HTML文件中加載JS文件
page1.html內容如下：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Page 1</title>
5 <script data-main="scripts/page1" src="scripts/lib/require.js"></script>
6 </head>
7 <body>
8 <a href="page2.html">Go to Page 2</a>
9 </body>
10 </html>
page2.html內容如下：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Page 2</title>
5 <script data-main="scripts/page2" src="scripts/lib/require.js"></script>
6 </head>
7 <body>
8 <a href="page1.html">Go to Page 1</a>
9 </body>
10 </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代碼如下：
1 require.config({ 2 baseUrl: 'scripts/app', 3 paths: { 4 jquery: [ 5 'http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min', 6 '../lib/jquery' 7 ] 8 } 9 });
知識擴展：
支持的配置項：
baseUrl ：
所有模塊的查找根路徑。注意：當加載的js文件(以.js結尾、以”/”開頭、含有協議)，不會使用baseUrl；
paths :
path映射那些不直接放置於baseUrl下的模塊名。設置path時起始位置是相對於baseUrl的，除非該path設置以"/"開頭或含有URL協議；
注意：在paths中定義的路徑不能含有.js后綴，因為路徑解析機制會自動添加上.js后綴；而且加載路徑可以設置多個，如從CDN加載失敗，則加載本地js文件；
shim:
為那些沒有使用define()來聲明依賴關系的模塊進行配置；
其中需要注意兩個參數：
（1）exports值（輸出的變量名），暴露方法接口
（2）deps數組，表明該模塊的依賴性
如：
1 require.config({ 2 baseUrl: '/scripts/lib', 3 shim:{ 4 zepto: { 5 exports: '$' 6 }, 7 backbone: { 8 deps: ['underscore', 'zepto'], 9 exports: 'Backbone' 10 }, 11 'zepto.animate': ['zepto'] 12 } 13 });
3、模塊的加載
page1.js代碼如下：
1 require(['./common'], function (common) { 2 require(['sayPage1'], function (sayPage1) { 3 sayPage1.hello(); 4 }); 5 });
page2.js代碼如下：
1 require(['./common'], function (common) { 2 require(['sayPage2'], function (sayPage2) { 3 sayPage2.hello(); 4 }); 5 });
知識拓展：
require()函數接受兩個參數。第一個參數是一個數組，表示所依賴的模塊；第二個參數是一個回調函數，當前面指定的模塊都加載成功后，它才會被調用。加載的模塊可以作為回調函數的參數進行調用。
這里為了保證配置完成后才加載需要的模塊，主要是為了路徑的正確解析，在回調函數中再進行require。
4、模塊的定義
sayPage1.js中的代碼：
1 define(['jquery'], function($) { 2 function sayHi(){ 3 $('body').append('<h1>Hello page1!</h1>'); 4 } 5 return { 6 hello: sayHi 7 } 8 });
知識擴展：
define函數也接受兩個參數。第一個參數為所依賴模塊組成的數組，第二個參數是一個回調函數。
當然最后上線的時候還要進行JS文件的合並與壓縮，可以利用r.js，方便快捷~