1.4 認識jQuery Mobile

經過之前的學習，相信讀者已經了解什么是跨平臺移動開發框架，以及為什么要使用跨平臺移動開發框架，接下來就應該選擇一款框架來進行學習了。

目前市面上有大量的移動開發框架，最重要的是它們還都是免費且開源的，而且這些框架都各具特色，很難說出哪一款比較好一些。因此，想要選擇一款適合自己的開發框架是有一定難度的。

1.4.1 為什么選擇jQuery Mobile

筆者剛開始了解到的是jQuery Mobile、Sencha Touch和PhoneGap\Cordova這3個框架。PhoneGap\Cordova不必多說，不管是jQuery Mobile還是Sencha Touch，最終都要靠它來打包成apk文件。但是當初之所以選擇jQuery Mobile而不是Sencha Touch，主要是因為關于jQuery Mobile的資料要比Sencha Touch多一些，也因為jQuery Mobile確實比Sencha Touch要容易上手。

自從選擇了jQuery Moble，筆者就一路與它一起走到了現在。它華麗的UI控件以及強大的跨平臺能力讓人一直對它非常放心，圖1-28列出了它目前所能支持的平臺。

圖1-28 jQuery Mobile所支持的平臺

除跨平臺的特性之外，筆者深深地被jQuery Mobile嚴謹的開發過程所折服。在jQuery Mobile官網上有jQuery Mobile每一個控件的每一項屬性的使用方法，毫不夸張地說，它是當前所有跨平臺開發框架中文檔最詳細的一個，如圖1-29所示。

圖1-29 jQuery Mobile的文檔示例

每一個屬性的用法都給出了簡單但是非常詳細的demo，還可以直接查看運行后的效果，為開發者的學習鋪平了道路。

隨著后來對jQuery Mobile理解的深入，筆者又發現了它更多的優點，主要包括：漸進式增強的主題界面、簡單但是有條理的標記化語言規范和自適應布局，下面分別對其進行介紹。

1.4.2 漸進式增強的主題界面

前面提到過，跨平臺框架其實并不能支持所有平臺，比如IE 6。在閱讀jQuery Mobile的支持手冊時發現，jQuery Mobile對瀏覽器的支持竟然分為了不同級別，如圖1-30所示。它使用A、B、C 3種不同的標記來定義這3種不同的級別，用以區分瀏覽器對于jQuery Mobile的支持程度。其中“A”級別中的瀏覽器對jQuery Mobile的支持度最低，而C級別的瀏覽器中jQuery Mobile所顯示的樣式與WAP頁面沒有什么不同。

圖1-30 主流手機瀏覽器對jQuery Mobile的支持情況

jQuery Mobile官方對這3種級別的定義如下。

        A:a browser that's capable of, at minimum, utilizing media queries (a requirement
    for jQuery Mobile). These browsers will be actively tested against but may not receive
    the full capabilities of jQuery Mobile.

A類瀏覽器比較強大，大多數具備對視頻/音頻的支持，因此jQuery Mobile的開發團隊也會主要針對這類瀏覽器進行測試，因此jQuery Mobile在這類瀏覽器中的運行效果非常好。

        B:a capable browser that doesn't have enough market share to warrant day-to-day
    testing. Bug fixes will still be applied to help these browsers.

B類瀏覽器也非常不錯，但是由于沒有很大的用戶群，因此jQuery Mobile的開發團隊也不會過多地測試這類瀏覽器上的使用效果，因此仍然會有bug出現。

        C:a browser that is not capable of utilizing media queries. They won't be provided
    any jQuery Mobile scripting or CSS (falling back to plain HTML and simple CSS).

C類瀏覽器連許多基本的CSS樣式都無法支持，因此jQuery Mobile也無法保證jQuery Mobile在這類瀏覽器上的運行效果。

有一點是肯定的，即使是C級的瀏覽器，當它運行jQuery Mobile時依然能夠保證使用大多數的功能，如本該是文本框的地方仍然是文本框，只是少了一些樣式而已。

1.4.3 簡單但是有條理的標記化語言規范

jQuery Mobile沿用了絕大多數的HTML 5命名規范，除少數新引入的數據類型之外，其他內容對于HTML 5開發者來說都是非常熟悉的，圖1-31是一個基本的jQuery Mobile框架代碼。

圖1-31 jQuery Mobile基本的框架代碼

現在暫時先不去管它們的具體含意，從圖中至少可以得到兩點信息：

● 它真的非常像普通的HTML頁面。

● 代碼的縮進非常整齊。

首先第一條是毋庸置疑的，畢竟它就是基于HTML 5的開發框架，不過可以看到在代碼中僅使用了div標簽而沒有引入新的標簽，僅僅通過data-role屬性來區分各個部分，并且data-role的命名方式也完全符合HTML 5的命名規范。

其次是代碼的縮進，可以看到頁面被分成了3個部分，各個部分之間的層次感非常強。相信開發過HTML頁面的讀者們都有被div的層次搞得暈頭轉向的經歷，但是在jQuery Mobile中，只要把握好頁面的結構，這樣的事情就絕對不會發生。

1.4.4 響應式布局

在HTML中，對于不同尺寸分辨率屏幕的匹配一直是令開發人員頭疼的一個問題，不過在jQuery Mobile中卻不需要再為這樣的事情發愁。因為jQuery Mobile能夠根據屏幕的尺寸自動匹配最合適的樣式。圖1-32和圖1-33是本書后面將要介紹的一個例子，筆者分別在較小的窗口和全屏的瀏覽器中運行它，對比同一個頁面在不同屏幕中的效果。

圖1-32 jQuery Mobile運行在全屏的瀏覽器中（1366×768像素）

圖1-33 jQuery Mobile運行在手機屏幕上

通過對比可以發現，雖然屏幕的長寬比例發生了變化，但是卻并沒有影響整個界面的協調性。jQuery Mobile通過將頁面中的全部元素拉伸到占據頁面寬度的全部，使得每一行中僅有一個元素來保證不會發生位置上的變形。同時也固定某些控件的相對位置，比如列表每一項右側的箭頭永遠在列表項的最右側。另外，在圖1-33中，列表項中實際上有一部分內容是超出屏幕范圍的，jQuery Mobile會自動將這部分文字省略隱藏起來，以保證頁面整體的美觀和協調。

1.4.5 jQuery Mobile的缺點

介紹了jQuery Mobile那么多優點，那它是不是就是一款完美的應用了呢？當然不是。縱然jQuery Mobile有千萬條優點，但是卻不得不承認它有一個非常致命的缺點——慢。

曾經有人在優酷上做過一個測試，用兩臺相同的手機同時運行界面相同的APP，它們分別是使用jQuery Mobile通過PhoneGap編譯生成的安裝文件和使用AppCan生成的文件。其中AppCan生成的應用非常流暢，完全沒有卡頓的現象；但使用jQuery Mobile生成的應用，每次進行頁面切換時總能感覺屏幕頓了一下，如圖1-34和圖1-35所示。jQuery Mobile的開發者在API中也多次提到這個問題，但可惜的是一直沒有合適的解決方案。

圖1-34 使用AppCan生成的應用已經啟動，而jQuery Mobile生成的應用還在加載中

圖1-35 運行速度很明顯不一致

筆者也做過一些測試，發現jQuery Mobile速度慢這一現象在真實應用中并沒有測試視頻中那么嚴重，因為畢竟Web應用還需要從網絡中讀取數據，而這一時間延遲比jQuery Mobile進行頁面切換時所耗費的時間要長得多。

另外，在使用jQuery Mobile開發應用時，合理搭配jQuery Mobile各個部件的生命周期也可以有效減少卡頓的情況。筆者曾經試著做過一個與測試視頻中幾乎完全一樣的頁面，然后對它的內容進行了一定程度的優化，再利用PhoneGap\Cordova進行封裝，在同樣的手機中運行發現卡頓現象不見了。也就是說，只要合理安排頁面中的元素還是可以避免卡頓的。

還有不可忽略的一點是，隨著手機硬件水平的提高，這點運算量終究不會成為阻滯jQuery Mobile向前發展的絆腳石。

1.4.6 jQuery Mobile案例

介紹完jQuery Mobile的優點和缺點之后，接下來就通過幾個例子來進一步證明jQuery Mobile確實是一套值得依賴的跨平臺移動開發框架。

首先來看看jQuery Mobile開發團隊自己做出來的東西，如圖1-36和圖1-37所示。該應用是jQuery Mobile開發團隊設計的jQuery Mobile的說明文檔，很明顯是使用jQuery Mobile開發的。其界面非常簡潔和漂亮，本書第16章就仿照這種樣式開發了一款簡單的視頻播放器。

圖1-36 jQuery Mobile說明文檔主界面

圖1-37 jQuery Mobile說明文檔界面

除此之外，斯坦福大學也用jQuery Mobile開發了適合手機訪問的校園新聞網站，網址為：

        http://m.stanford.edu

其整體界面簡潔大氣，如圖1-38所示。

圖1-38 斯坦福大學的手機網站

WordPress是Web開發者都非常熟悉的開源個人博客，已經有開發者為WordPress開發了基于jQuery Mobile的手機版主題，如圖1-39、圖1-40和圖1-41所示。

圖1-39 基于jQuery Mobile的WordPress主題1

圖1-40 基于jQuery Mobile的WordPress主題2

圖1-41 基于jQuery Mobile的WordPress主題3

圖1-42是另一個基于jQuery Mobile的WordPress主題版本，只不過它是為平板電腦設計的。

圖1-42 基于jQuery Mobile的WordPress主題

當然，它也有針對手機設計的版本，如圖1-43所示。

圖1-43 基于jQuery Mobile的WordPress主題

另外，jQuery Mobile的官方網站還提供了許多利用jQuery Mobile開發的應用，如圖1-44、圖1-45和圖1-46所示。在http://www.jqmgallery.com/可以找到更多這樣的例子，事實上這個網站也是基于jQuery Mobile的，不得不說這是一件非常有意思的事情。

圖1-44 基于jQuery Mobile開發的網站1

圖1-45 基于jQuery Mobile開發的網站2

圖1-46 基于jQuery Mobile開發的網站3

從這些例子中可以看出，國外利用jQuery Mobile的技術已經非常成熟了，遺憾的是，目前還沒有找到國內使用jQuery Mobile比較成功的例子。這與整個業界的技術交流氛圍有很大的關系。