jQuery Mobile 是用于創(chuàng)建移動(dòng) Web 應(yīng)用的前端開(kāi)發(fā)框架。

jQuery Mobile 可以應(yīng)用于智能手機(jī)與平板電腦。

jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來(lái)布局網(wǎng)頁(yè)。

最近公司的web app項(xiàng)目，使得我有幸一直接觸和學(xué)習(xí)jQuery Mobile。這確實(shí)是一個(gè)很不錯(cuò)的移動(dòng)開(kāi)發(fā)庫(kù)，有助于擅長(zhǎng)web開(kāi)發(fā)的工程師，快速入門(mén)并構(gòu)建自己的移動(dòng)應(yīng)用。但是在前兩天，我碰到了一個(gè)問(wèn)題，使我查了很多資料都沒(méi)有找到很好的解決方案，最終只能逼著我讀jQuery Mobile的源碼，再寫(xiě)了個(gè)擴(kuò)展，才得以解決。下面請(qǐng)讓我娓娓道來(lái)。

問(wèn)題描述

假設(shè)在項(xiàng)目中，有三個(gè)頁(yè)面，分別是main.html、test1.html、test2.html（后面分別簡(jiǎn)稱main、test1、test2），其中main頁(yè)面是包含一個(gè)轉(zhuǎn)向到test1頁(yè)面的鏈接（即a標(biāo)簽），test1中有一個(gè)屬性為data-rel=”back”的鏈接和一個(gè)轉(zhuǎn)向到test2的鏈接，test2只有一個(gè)屬性為data-rel=”back”的鏈接。main轉(zhuǎn)向到test1后，點(diǎn)擊back鏈接返回main（相當(dāng)于點(diǎn)擊瀏覽器的返回按鈕），無(wú)需重新發(fā)送get請(qǐng)求；但是當(dāng)test1轉(zhuǎn)向到test2，在test2頁(yè)面點(diǎn)擊back鏈接想返回test1時(shí)，會(huì)重新發(fā)送一個(gè)get請(qǐng)求。這樣導(dǎo)致的問(wèn)題就是：test1做的所有操作，在test2返回后，都會(huì)失效。比如A是一個(gè)分頁(yè)的列表頁(yè)面，翻到第二頁(yè)后轉(zhuǎn)向到B，那么當(dāng)返回A后，就無(wú)法地位到第二頁(yè)。

原因分析

我首先用firebug看了一下html的結(jié)構(gòu)，發(fā)現(xiàn)jQuery Mobile會(huì)把main和test1加入到頁(yè)面結(jié)構(gòu)中去，當(dāng)從test1轉(zhuǎn)向到test2后，test1會(huì)被自動(dòng)刪除，這樣dom樹(shù)中，只包含了main和test2，所以在test2返回test1就會(huì)在發(fā)送一個(gè)get請(qǐng)求。那么是不是意味著，只要能把歷史頁(yè)面緩存到dom中（就像main和test1一樣），就可以解決這個(gè)問(wèn)題。

解決問(wèn)題

經(jīng)過(guò)一番查找，在jQuery Mobile官網(wǎng)看到一段《Caching pages in the DOM》的描述：

Caching pages in the DOM
To keep all previously-visited pages in the DOM, set the domCache option on the page plugin to true, like this:
$.mobile.page.prototype.options.domCache = true;
Alternatively, to cache just a particular page, you can add the data-dom-cache="true" attribute to the page's container:
<div data-role="page" id="cacheMe" data-dom-cache="true">
You can also cache a page programmatically like this:
pageContainerElement.page({ domCache: true });
The drawback of DOM caching is that the DOM can get very large, resulting in slowdowns and memory issues on some devices. If you enable DOM caching, take care to manage the DOM yourself and test thoroughly on a range of devices.

從這段引文中應(yīng)該可以看到，這三種方法都可以緩存頁(yè)面到dom中，于是我就使用了第二種方法，即在page的div上增加了data-dom-cache=”true”屬性，但是卻出現(xiàn)了以下兩個(gè)問(wèn)題：

1、如下圖所示，當(dāng)我的訪問(wèn)路徑是main->test1->test2->test1（test2是history.back()返回的）時(shí)，用firebug可以看到，test2仍然存在于dom中，這樣的結(jié)果就如紅色部分描述的：DOM會(huì)變得很大，結(jié)果會(huì)使頁(yè)面變慢和一些設(shè)備上的內(nèi)存錯(cuò)誤。

2、當(dāng)我存在這樣一個(gè)頁(yè)面，它通過(guò)不同的參數(shù)顯示不同的內(nèi)容，并且頁(yè)面上，有一段js腳本，會(huì)對(duì)頁(yè)面上的元素做些處理，而我們常用的方式就是用id來(lái)獲得目標(biāo)元素，由于我們是用了cache緩存page，就會(huì)導(dǎo)致js事件或者操作混亂。比如在這里我增加了一個(gè)test1_1頁(yè)面，它的內(nèi)容幾乎和test1一樣，他們都有相同id的div和相同事件處理的button，這個(gè)事件做的事情就是往這個(gè)div中增加內(nèi)容，當(dāng)訪問(wèn)路徑為main->test1->test1_1，在test1_1上點(diǎn)擊按鈕，會(huì)發(fā)現(xiàn)好像沒(méi)有觸發(fā)這個(gè)事件，其實(shí)它已經(jīng)觸發(fā)了，只是內(nèi)容增加到test1中的div中了，分別入下圖

所以對(duì)于目前大多數(shù)應(yīng)用，這個(gè)方案是不可取的，除非自己管理dom中頁(yè)面的生命周期。

優(yōu)化方案

通過(guò)上面的實(shí)驗(yàn)，我也知道了需要滿足我的需求，就只能自己管理dom中頁(yè)面的生命周期了。那么就涉及到一個(gè)問(wèn)題：頁(yè)面什么時(shí)候過(guò)期（即從dom中刪除）呢？根據(jù)我的需求，當(dāng)從test2返回到test1時(shí)，就應(yīng)該從dom中刪除test2，同理從test1返回main時(shí)，從dom中刪除test1。如果再次從main導(dǎo)航到test1，就得發(fā)起一個(gè)get請(qǐng)求，我認(rèn)為這是合理的，因?yàn)橛脩舨粫?huì)認(rèn)為點(diǎn)擊鏈接到新頁(yè)面還需要緩存。所以我應(yīng)該在頁(yè)面顯示前或者顯示后，刪除它之后的history，于是我就在pagebeforeshow、pageshow的時(shí)候做了刪除操作，即如下腳本（插件形式）：

(function($, undefined) {
$.fn.subpage = function(options) {
$(document).bind(
"pagebeforeshow",
function() {
var forword = $.mobile.urlHistory.getNext();
if (forword) {
var dataUrl = forword.url;
var forwordPage=$.mobile.pageContainer
.children(":jqmData(url='" + dataUrl + "')");
if(forwordPage){
forwordPage.remove();
}
}
$.mobile.urlHistory.clearForward();
});
};
$(document).bind("pagecreate create", function(e) {
$(":jqmData(role='page')", e.target).subpage();
});
})(jQuery); 

結(jié)果事與愿違，在頁(yè)面返回時(shí)，出現(xiàn)了js腳本錯(cuò)誤，如下圖：

那么是什么原因呢？不在這個(gè)事件里做處理，那在哪里處理呢？于是我仔細(xì)研讀了一下jQuery Mobile源碼，發(fā)現(xiàn)了下面一段：

transitionPages( toPage, fromPage, settings.transition, settings.reverse )
.done(function() {
removeActiveLinkClass();
//if there's a duplicateCachedPage, remove it from the DOM now that it's hidden
if ( settings.duplicateCachedPage ) {
settings.duplicateCachedPage.remove();
}
//remove initial build class (only present on first pageshow)
$html.removeClass( "ui-mobile-rendering" );
releasePageTransitionLock();
// Let listeners know we're all done changing the current page.
mpc.trigger( "pagechange", triggerData );
}); 

頁(yè)面在切換完后，會(huì)觸發(fā)pagechange事件，于是我把pagebeforeshow改成了pagechange，一切都按預(yù)期運(yùn)行，并且沒(méi)有錯(cuò)誤，終于大功告成了。

總結(jié)

在使用該插件時(shí)，請(qǐng)注意以下幾點(diǎn)：

1、必須在引用該腳本之前，引用jquery和jquery mobile腳本文件；

2、必須在page上增加data-dom-cache="true"。

以上所述是小編給大家介紹的jQuery Mobile頁(yè)面返回不需要重新get 的相關(guān)說(shuō)明，希望對(duì)大家有所幫助！

最新評(píng)論