亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

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

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

requireJS API的三個主要函數(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>

知識擴展：

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

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

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

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

config > data-main > 默認baseUrl

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

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

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

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

　　使用require.config()方法，可以對模塊的加載行為進行自定義。在多頁面應(yīng)用中，可以將配置寫在共用的文件中，如本例中的common.js文件，然后各個頁面加載當前配置后，在回調(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'
]
}
});

知識擴展：

支持的配置項：

baseUrl ：

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

paths :

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

　　注意：在paths中定義的路徑不能含有.js后綴，因為路徑解析機制會自動添加上.js后綴；而且加載路徑可以設(shè)置多個，如從CDN加載失敗，則加載本地js文件；

shim:

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

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

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

知識拓展：　

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

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

4、模塊的定義

sayPage1.js中的代碼：

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

知識擴展：

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

　　當然最后上線的時候還要進行JS文件的合并與壓縮，可以利用r.js，方便快捷~

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

相關(guān)文章

最新評論