requireJS多頁面應用例項

本文是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
>
6head
>
7<
body
>
8<
a href
="page2.html"
>go to page 2
a>
9body
>
10html
>

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
>
6head
>
7<
body
>
8<
a href
="page1.html"
>go to page 1
a>
9body
>
10html
>

知識擴充套件：2、對模組的路徑等進行配置使用require.config()方法，可以對模組的載入行為進行自定義。在多頁面應用中，可以將配置寫在共用的檔案中，如本例中的common.js檔案，然後各個頁面載入當前配置後，在**函式中再載入各自需要的模組。

common.js**如下：

1
require.config(
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(,
7backbone: ,
11'zepto.animate': ['zepto']12}
13 });

3、模組的載入page1.js**如下：

1
require(['./common'], function (common) );
5 });

page2.js**如下：

1
require(['./common'], function (common) );
5 });

知識拓展：require()函式接受兩個引數。第乙個引數是乙個陣列，表示所依賴的模組；第二個引數是乙個**函式，當前面指定的模組都載入成功後，它才會被呼叫。載入的模組可以作為**函式的引數進行呼叫。

這裡為了保證配置完成後才載入需要的模組，主要是為了路徑的正確解析，在**函式中再進行require。

4、模組的定義

saypage1.js中的**：

1
define(['jquery'], function($) 
5return 
8 });

知識擴充套件：define函式也接受兩個引數。第乙個引數為所依賴模組組成的陣列，第二個引數是乙個**函式。

當然最後上線的時候還要進行js檔案的合併與壓縮，可以利用r.js，方便快捷~

requireJS多頁面應用例項

單頁面應用與多頁面應用

多頁面應用和單頁面應用

多頁面應用 VS 單頁面應用

requireJS多頁面應用例項

單頁面應用 與 多頁面應用

多頁面應用和單頁面應用

多頁面應用 VS 單頁面應用

相關推薦

單頁面應用與多頁面應用