欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

RequireJS多頁面應(yīng)用實(shí)例分析

 更新時(shí)間：2016年06月29日 14:57:14   作者：文文向天歌  
這篇文章主要介紹了RequireJS多頁面應(yīng)用實(shí)例分析的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

本文是requireJS的一些知識(shí)點(diǎn)的總結(jié)，配上多頁面應(yīng)用中的實(shí)例分析。

本案例的目錄結(jié)構(gòu)如下：

requireJS API的三個(gè)主要函數(shù)：define（創(chuàng)建模塊），require（加載模塊），config（配置）

1、 HTML文件中加載JS文件

page1.html內(nèi)容如下：

<!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內(nèi)容如下：

<!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>

知識(shí)擴(kuò)展：

data-main屬性指定網(wǎng)頁程序的主模塊，這個(gè)文件被requireJS首先加載。由于requireJS默認(rèn)的文件后綴名是js，所以可以把page1.js簡(jiǎn)寫成page1

加載腳本文件的根路徑優(yōu)先規(guī)則

用require()加載模塊時(shí)，省略.js后綴，會(huì)從baseUrl下查找；如果帶有.js后綴、或以”/"開始、或包含URL協(xié)議（http/https）則將根

據(jù)你的具體路徑設(shè)置去查找

config > data-main > 默認(rèn)baseUrl

不對(duì)data-main和config進(jìn)行設(shè)置，則默認(rèn)baseUrl為引用require.js的那個(gè)HTML頁面所在目錄

設(shè)置data-main，則baseUrl為主模塊所在目錄（如第一段HTML中的主模塊為page1.js，因此以其所在目錄/scripts為根目錄）

配置config，顯式設(shè)置baseUrl，也可為每一個(gè)模塊單獨(dú)設(shè)置路徑

2、對(duì)模塊的路徑等進(jìn)行配置

　　使用require.config()方法，可以對(duì)模塊的加載行為進(jìn)行自定義。在多頁面應(yīng)用中，可以將配置寫在共用的文件中，如本例中的common.js文件，然后各個(gè)頁面加載當(dāng)前配置后，在回調(diào)函數(shù)中再加載各自需要的模塊。

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

知識(shí)擴(kuò)展：

支持的配置項(xiàng)：

baseUrl ：

　　所有模塊的查找根路徑。注意：當(dāng)加載的js文件(以.js結(jié)尾、以”/”開頭、含有協(xié)議)，不會(huì)使用baseUrl；

paths :

　　path映射那些不直接放置于baseUrl下的模塊名。設(shè)置path時(shí)起始位置是相對(duì)于baseUrl的，除非該path設(shè)置以"/"開頭或含有URL協(xié)議；

　　注意：在paths中定義的路徑不能含有.js后綴，因?yàn)槁窂浇馕鰴C(jī)制會(huì)自動(dòng)添加上.js后綴；而且加載路徑可以設(shè)置多個(gè)，如從CDN加載失敗，則加載本地js文件；

shim:

　　為那些沒有使用define()來聲明依賴關(guān)系的模塊進(jìn)行配置；

　　其中需要注意兩個(gè)參數(shù)：

　　　?。?）exports值（輸出的變量名），暴露方法接口

　　　?。?）deps數(shù)組，表明該模塊的依賴性

　　如：

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

知識(shí)拓展：　

　require()函數(shù)接受兩個(gè)參數(shù)。第一個(gè)參數(shù)是一個(gè)數(shù)組，表示所依賴的模塊；第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，當(dāng)前面指定的模塊都加載成功后，它才會(huì)被調(diào)用。加載的模塊可以作為回調(diào)函數(shù)的參數(shù)進(jìn)行調(diào)用。

　　這里為了保證配置完成后才加載需要的模塊，主要是為了路徑的正確解析，在回調(diào)函數(shù)中再進(jìn)行require。

4、模塊的定義

sayPage1.js中的代碼：

define(['jquery'], function($) {
function sayHi(){
$('body').append('<h1>Hello page1!</h1>');
}
return {
hello: sayHi
}
});

知識(shí)擴(kuò)展：

　　define函數(shù)也接受兩個(gè)參數(shù)。第一個(gè)參數(shù)為所依賴模塊組成的數(shù)組，第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)。

　　當(dāng)然最后上線的時(shí)候還要進(jìn)行JS文件的合并與壓縮，可以利用r.js，方便快捷~

以上所述是小編給大家介紹的RequireJS多頁面應(yīng)用實(shí)例分析，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論