深刻jQuery Mobile

深刻jQuery Mobile

http://blog.csdn.net/shoyer/article/details/8451070

jQueryMobile上手很是容易，可是要作到近似於原生APP的效果則很不容易。

如下內容不斷更新中，均爲實際開發中的經驗

追信魔盒PhoneGap打包模式下的最佳模式

追信魔盒的PhoneGap打包模式，將全部HTML文件、CSS文件和JS文件打包在客戶端中，這樣就不考慮在線模式的網絡延遲問題，能夠用各類方式將應用的表現更貼近原生程序

• 採用OPOA（One Page, One Application）模式，將全部主要內容放置在一張頁面中，這樣能夠確保不一樣的Page切換最爲順暢。
• 儘量將全部的點擊連接經過javascript來控制。綁定jQueryMobile的tap事件來處理。這樣能夠確保最快響應點擊事件
• 使用$(document).bind('pageinit')，而不是 $(document).ready()。
• 對不一樣的Page中的JS腳本分別實現載入後運行（默認的教程都是教你使用$(document).bind('pageinit')。例如：

$("#Home").live('pageinit',function() { //在這裏執行#Home頁面加載後須要運行的方法 });

• 儘量避免在轉場時使用fade，這個方法在不少場合容易閃屏，使用slide相對保險一些。
• 避免使用alert來彈出提醒，能夠考慮使用PhoneGap的通知事件來實現純原生客戶端的提醒樣式

固定頂部導航欄以及可能引起的問題

對於頂部導航欄，咱們一般使用data-position="fixed"來固定頂部的顯示。

如圖，頂部固定的代碼：

    <div data-role="header" data-position="fixed"> <a href="#Home" data-icon="back" data-direction="reverse" data-transition="slide" >返回</a> <h1> 複合大城 </h1> <a href="#Home" data-icon="home" data-iconpos="notext" data-direction="reverse" data-transition="slide" class="ui-btn-right">首頁</a> <div class="segmented-control ui-bar-d"> <div data-role="controlgroup" data-type="horizontal" id="fhdcList"> <a href="#" class="ui-btn-active" data-role="button">非凡血統</a> <a href="#" data-role="button" >完美規劃</a> <a href="#" data-role="button" >大城崛起</a> <a href="#" data-role="button" >商學院</a> </div> </div> </div>

這樣的效果在表現上已接近原生效果。

可是若是在真機打包模式下（而且全部Page放在一個Html文件中），會發現若是先後兩張頁面都採用了固定頭部，在Slide過場效果下，第一次切換會先只顯示下一張Page的頭部覆蓋當前Page，再切換到下一張，而並不是第二張Page完整顯示。 爲了不這種狀況，能夠將第一張Page的頭部的fix屬性去掉。對於通常的軟件，若是隻有兩層內容深度，那麼只要首頁的頂部不固定便可。（對於此問題嘗試增長DOM緩存等都無效，僅測試出這個解決方案）

 

點擊連接響應速度慢的問題

對於a標記的點擊導航，默認是在onclick事件中處理的。而移動客戶端對onclick的響應相比PC瀏覽器有着明顯的幾百毫秒延遲。

在移動瀏覽器中對觸摸事件的響應順序應當是： ontouchstart -> ontouchmove -> ontouchend -> onclick

所以，若是確實要加快對點擊事件的響應，就應當綁定ontouchend事件。

若是不用jQueryMobile，能夠考慮用第三方的腳本，例如 http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone 。而那個地址中的代碼不支持Android，能夠考慮採用評論中的代碼。這個腳本主要考慮到ontouchstart和ontouchend的觸摸點位移，確保不會在用戶滑動(swipe)畫面後觸發到點擊事件。

對於使用jQueryMobile的人來講就幸運不少了，使用內置的tap事件便可在ontouchend事件環節捕獲到被點擊的請求，這個方法的響應時間明顯快於onclick事件。代碼範例以下：

$("#fhdclink").live('tap',function(event) { $.mobile.changePage($("#fhdc"), { transition: 'slide', reverse: false } ); return false; });

對載入文字和錯誤文字的漢化

$(document).bind("mobileinit",function() { $.mobile.loadingMessage = '頁面載入中'; $.mobile.pageLoadErrorMessage = '頁面載入失敗'; });

整合PhoneGap(Cordova)

<script data-minified="true" src="js/jquery.min.js"></script> <script type="text/javascript" charset="utf-8" src="js/cordova.js"></script> <script type="text/javascript" charset="utf-8"> $(document).bind("mobileinit",function() { $.support.cors = true; $.mobile.allowCrossDomainPages=true; }); document.addEventListener("deviceready", onDeviceReady, false);   function onDeviceReady() { // Register the event listener document.addEventListener("backbutton", onBackKeyDown, false); } function onBackKeyDown() { history.back(); return false; } </script> <script data-minified="true" src="js/jquery.mobile-1.1.0.min.js"></script>

手機環境下jQuery的DOM性能問題

使用jQuery的選擇器，在PC環境下效果比較理想，但在手機環境下DOM選擇會比較卡，若是選擇器使用頻繁，會形成用戶UI響應變化滯後。 jQuery默認不會緩存DOM選擇，每次使用選擇器都會從根節點進行檢索，所以，強烈建議緩存DOM選擇結果。

例如標籤頁效果,未優化前：

$("#fhdcList a").each(function(index){ $(this).click(function(){ $("#fhdcList a.ui-btn-active").removeClass("ui-btn-active"); $("#fhdcList a:eq(" + index + ")").addClass("ui-btn-active"); $(".fhdcTab:visible").hide(); $(".fhdcTab:eq(" + index + ")").show(); }); });

這樣在循環時每一句語句都會對DOM樹從頭至尾查找一遍。在PC環境下看不出時延，但在手機環境下切換時明顯有點卡。這須要優化：

var tab = $(".fhdcTab"); var listdiv = $("#fhdcList"); listdiv.find("a").each(function(index){ $(this).live('tap',function(event) { listdiv.find("a.ui-btn-active").removeClass("ui-btn-active"); tab.hide(); tab.eq(index).show(); listdiv.find("a:eq(" + index + ")").addClass("ui-btn-active"); }); });