使用jQuery Mobile和JSON創建移動應用程序

來源: InfoQ 發布時間: 2011-03-20 22:46 閱讀: 2374 次推薦: 1 原文鏈接 [收藏]

　　近來移動應用開發迅速受到很多公司的關注，他們尋求為現存的產品和應用程序添加移動展現或者“觸點”。即便不是所有，大部分移動應用開發框架也都會適應某種現存的“桌面”開發平臺。基于Web的框架則不同。業界當前采用jQuery來創建移動web應用程序（上個月發布了jQuery Mobile Alpha 3）。

　　在移動領域，除了對設備特定屬性的支持之外，最主要的一個問題就是程序的大小，正如Aaron Quint所說：

壓縮后的jQuery也大概有40-50K，可能還會稍微多一些，此外，如果你想要jQuery UI和一些動畫功能，那么就還需要100K。對于移動設備來說，可能沒有那么多空間。

　　JQM Alpha 3現在已經精簡到17K，其中還有相關的CSS文件。

　　Enrique Ortiz還發現了JQM的其他優勢：

總體上的簡單性：你可以主要使用標簽驅動的方式開發頁面，那樣，你只需要使用很少或者不使用JavaScript。

進一步改善和得體的降格： jQuery Mobile哲學是要同時支持高端和性能較差的設備，包括那些不支持JavaScript的設備，并且還要盡可能提供最佳體驗。

可訪問性： jQuery已經支持可訪問的富Internet應用程序（WAI-ARIA），以有助于使用輔助技術讓有殘疾的訪問者也能夠訪問網頁。

小文件

主題

　　安裝JQM很簡單，只需要添加一個樣式表文件和三個JavaScript文件：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1 /jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"> </script>
<script src="http://jquery.ibm.navitend.com/utils.js"></script>

　　此外，Frank還提到，在移動領域JQM的關鍵優勢就在于，它能夠使用AJAX讓用戶界面更平滑：

JQM把Ajax提升了一個層次，這是通過攔截頁面請求，并在大多數情況下把這些請求轉化為指定的Ajax調用達到的。最基本的結果是，當用戶訪問使用JQM構建的web應用程序時，只會修改頁面的DOM結構，而不是每次都替換所有頁面。

　　這種效果是通過使用HTML5的data-*屬性達到的。在HTML5中，任何帶有data-前綴的屬性本質上都會被驗證解析器忽略，而應用程序可以任意地攔截那些屬性。JQM依賴于data-role屬性把它的核心功能組合成字符串。

當JQM應用程序從一個頁面切換到下一個頁面時，發生的主要動作就是內容div中的內容會換成新頁面的內容。

　　我們可以使用data-rel屬性請求窗口如何顯示，當它顯示出來的時候，data-transition屬性會告訴JQM做出相應的轉換。我們可以使用data-filter屬性來指定data-role列表的行為，而該列表可以基于輸入的關鍵字來過濾列表的值。Frank還說明了如何創建自定義的data-*屬性，從而實現應用程序的特殊屬性。

　　JQM會在今年上半年發布。Frank最后做出結論：