本文是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()來聲明依賴關系的模塊進行配置；
其中需要注意兩個參數：
?。?）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多頁面應用實例分析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
