最近公司的web app項目，使得我有幸一直接觸和學習jQuery Mobile。這确實是一個很不錯的移動開發庫，有助于擅長web開發的工程師，快速入門并建構自己的移動應用。但是在前兩天，我碰到了一個問題，使我查了很多資料都沒有找到很好的解決方案，最終隻能逼着我讀jQuery Mobile的源碼，再寫了個擴充，才得以解決。下面請讓我娓娓道來。
假設在項目中，有三個頁面，分别是main.html、test1.html、test2.html（後面分别簡稱main、test1、test2），其中main頁面是包含一個轉向到test1頁面的連結（即a标簽），test1中有一個屬性為data-rel=”back”的連結和一個轉向到test2的連結，test2隻有一個屬性為data-rel=”back”的連結。main轉向到test1後，點選back連結傳回main（相當于點選浏覽器的傳回按鈕），無需重新發送get請求；但是當test1轉向到test2，在test2頁面點選back連結想傳回test1時，會重新發送一個get請求。這樣導緻的問題就是：test1做的所有操作，在test2傳回後，都會失效。比如A是一個分頁的清單頁面，翻到第二頁後轉向到B，那麼當傳回A後，就無法地位到第二頁。
我首先用firebug看了一下html的結構，發現jQuery Mobile會把main和test1加入到頁面結構中去，當從test1轉向到test2後，test1會被自動删除，這樣dom樹中，隻包含了main和test2，是以在test2傳回test1就會在發送一個get請求。那麼是不是意味着，隻要能把曆史頁面緩存到dom中（就像main和test1一樣），就可以解決這個問題。
經過一番查找，在jQuery Mobile官網看到一段《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.
從這段引文中應該可以看到，這三種方法都可以緩存頁面到dom中，于是我就使用了第二種方法，即在page的div上增加了data-dom-cache=”true”屬性，但是卻出現了以下兩個問題：
1、如下圖所示，當我的通路路徑是main->test1->test2->test1（test2是history.back()傳回的）時，用firebug可以看到，test2仍然存在于dom中，這樣的結果就如紅色部分描述的：DOM會變得很大，結果會使頁面變慢和一些裝置上的記憶體錯誤。
2、當我存在這樣一個頁面，它通過不同的參數顯示不同的内容，并且頁面上，有一段js腳本，會對頁面上的元素做些處理，而我們常用的方式就是用id來獲得目标元素，由于我們是用了cache緩存page，就會導緻js事件或者操作混亂。比如在這裡我增加了一個test1_1頁面，它的内容幾乎和test1一樣，他們都有相同id的div和相同僚件處理的button，這個事件做的事情就是往這個div中增加内容，當通路路徑為main->test1->test1_1，在test1_1上點選按鈕，會發現好像沒有觸發這個事件，其實它已經觸發了，隻是内容增加到test1中的div中了，分别入下圖
是以對于目前大多數應用，這個方案是不可取的，除非自己管理dom中頁面的生命周期。
通過上面的實驗，我也知道了需要滿足我的需求，就隻能自己管理dom中頁面的生命周期了。那麼就涉及到一個問題：頁面什麼時候過期（即從dom中删除）呢？根據我的需求，當從test2傳回到test1時，就應該從dom中删除test2，同理從test1傳回main時，從dom中删除test1。如果再次從main導航到test1，就得發起一個get請求，我認為這是合理的，因為使用者不會認為點選連結到新頁面還需要緩存。是以我應該在頁面顯示前或者顯示後，删除它之後的history，于是我就在pagebeforeshow、pageshow的時候做了删除操作，即如下腳本（插件形式）：
結果事與願違，在頁面傳回時，出現了js腳本錯誤，如下圖：
那麼是什麼原因呢？不在這個事件裡做處理，那在哪裡處理呢？于是我仔細研讀了一下jQuery Mobile源碼，發現了下面一段：
在使用該插件時，請注意以下幾點：
1、必須在引用該腳本之前，引用jquery和jquery mobile腳本檔案；
2、必須在page上增加data-dom-cache="true"。