requireJS多頁面應用實例

時間 2019-11-30

原文原文鏈接

本文是requireJS的一些知識點的總結，配上多頁面應用中的實例分析。html

本案例的目錄結構以下：jquery

requireJS API的三個主要函數：define（建立模塊），require（加載模塊），config（配置）數組

一、 HTML文件中加載JS文件app

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內容以下：ui

 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>

知識擴展：spa

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，也可爲每個模塊單獨設置路徑

二、對模塊的路徑等進行配置code

　　使用require.config()方法，能夠對模塊的加載行爲進行自定義。在多頁面應用中，能夠將配置寫在共用的文件中，如本例中的common.js文件，而後各個頁面加載當前配置後，在回調函數中再加載各自須要的模塊。htm

common.js代碼以下：blog

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 });

三、模塊的加載

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。

四、模塊的定義

sayPage1.js中的代碼：

1 define(['jquery'], function($) { 2  function sayHi(){ 3         $('body').append('<h1>Hello page1!</h1>'); 4  } 5  return { 6  hello: sayHi 7  } 8 });