本文章是由機器翻譯。

切削刃

行動裝置網站開發，第 5 篇：jQuery Mobile

Dino Esposito

 

在本專欄中，我就分享關於 jQuery 移動，越來越受歡迎的移動技術的幾點思考。

隨著越來越多的網站兩側，為行動裝置使用者提供服務的專門網站，方程的形式很多開發人員和管理人員的頭腦中。簡單地說，這聽起來像如下：如果你愛 jQuery，你就太愛 jQuery 移動。事實是，很多人 （包括我） 愛 jQuery，從而可能大量的開發人員將傾向于使用 jQuery 移動作為預設選擇任何移動 Web 開發無任何進一步的思考。

我承認我遵循這種模式完全當我開始移動開發。有時它工作 ； 有時它沒還。並且，或許更重要的是，有時我以為它有效，但最終我真的沒有得到我的客戶正在尋找。

移動開發不是簡單的 Web 開發分支。大多數情況下，它並不成功的適應化修改 （嗯，大多簡化） 什麼你已經有，無論該用例、 佈局、 圖形、 腳本或其他相關的技術。熟，跨設備移動開發是真正的范式轉變凡 UX 先和新類型的專業人員顯示出來：資訊架構師、 交互設計師和內容的戰略家。移動軟體往往設計和批准通過模型，然後簡單地實施在給定位置和給定的格式顯示資料。

但是，請注意技術不應該支配你如何取得您的業務需要 ； 技術只應執行您立即發展目標的手段。這可能聽起來相當明顯，少收的語句，但 — — 老實說來 — — 多少次你見過違反此規則？你聽說過關于"寵物技術"的反模式嗎？您可以閱讀有關它在 bit.ly/OvJdx0。有時剛巧沒有令人信服，或面向業務的原因撿一給定的技術。同樣，有時它會發生錯誤的任務為拾取給定的技術 — — 或者，也許更糟的是尚未，其使用導致給定任務較少比理想方法。

在當今瞬息萬變的流動的世界裡，讓使用者體驗和戰略考慮任何技術是一個巨大的風險。中移動發展用例和視覺來第一次，和技術是唯一的一種手段 — — 應總是如此 ！

現在我將重點在本專欄中，jQuery 移動，其強弱點計算你能做什麼，而不是你想要做什麼的尺度往往來衡量的主題上。你可以閱讀更多有關在 jQuery 移動 jquerymobile.org。

jQuery 移動一瞥

總體而言，jQuery 移動的最適當定義來自它的網站。它解釋了 jQuery 移動是基於 HTML5 的 UI 系統為所有流行的行動裝置平臺。此外，它說 jQuery 的移動代碼生成"逐步增強"記住，結果應具有很容易"主題-能"的設計。此外，jQuery 移動是建在 jQuery 和 jQuery UI 的堅實的基礎。不過，許多專業開發人員負責 jQuery 移動是羽量級版本的 jQuery 優化的典型的行動裝置的限制。

說實話，jQuery 的移動網站的主頁上有什麼是精確地庫的真諦。jQuery 手機是一個框架，許多開發人員便於使用 — — 或者，至少，它原來是遠便於使用比大多數其他框架外面構建移動解決方案。它是一個框架，説明使用者介面的工作移動和基於觸摸設備上顯示時，好的意見。基於觸摸 （和隨後面向移動） 的意見不僅易於創建，而且它們還容易將聯繫在一起的形式與過渡和效果的導航系統。利用設施的 jQuery 移動創建的視圖以及與智慧手機和工作在某種程度上也與舊的設備，從而導致關鍵的問題：這真的是夠你移動 Web 開發嗎？

Jquery 移動手機在哪裡？

就個人而言，我已建立一個基於 Web 的應用程式的 UI 旨在筆記本電腦或平板電腦的使用者使用 jQuery 移動 — — 沒有任何的電話 ！ — — 和運作良好。正是在這個時候，我最初設想一些有點密切 jQuery UI 和 jQuery 移動之間的關係。

作為也許聽起來令人驚訝，讓我們提出一點：JQuery 移動真的是一個移動發展框架嗎？

基於技術在 jquerymobile.org 上的描述，應考慮作為主要工具 jQuery 移動基於觸摸前端的 ui。一個基於觸摸的前端有可能是行動裝置 （即，平板電腦或智慧手機），但移動 Web 開發有很多方面比剛才的前端。

只安排一些 UI，恰好在設備螢幕小房地產使用 jQuery 移動可能是簡單的情況中的工作方法。如果採取作為一個整體的、 全面的辦法，但是，它可能會有點過分簡單化。

來看一下您可能會發現在超越的 jQuery 移動功能的移動解決方案。首先，你應該有明確的目標，您正在構建，表示通過精選了好的用例、 伺服器和用戶端之間的明確定義資料流量的網站和清單移動的更重要的是，你型材打算為服務。移動設定檔是一個通用的術語，以指示您的網站擬送達的設備的不同家庭：智慧手機、 平板電腦、 筆記本電腦、 智慧電視和類似設備建在過去幾年左右，或任何手機，可以連接到互聯網。

不是每個移動網站需要支援多個設備設定檔，即使這種必要性正變得越來越嚴格和更迫切。支援多個設備設定檔意味著處理不同的意見和動態調整的目標回應設備特性和功能的基礎。我最後一列中 （msdn.microsoft.com/magazine/jj618291) 我向基於伺服器端設備描述存儲庫 （如無線通用的資源檔或 WURFL multi-serving 提出了一種方法 （見 wurfl.sourceforge.net)。什麼樣的外框支援你從 jQuery 移動這方面？

jQuery 移動和反應迅速的設計

反應迅速的設計是為特定設備提供定制版本頁面框架的能力。在本文中，較早前報價 jquerymobile.org 網站，我提到逐步增強為 jQuery 移動框架的支柱之一。漸進增強是自下而上的 Web 設計模式創建頁逐步加強在任何瀏覽器工作的核心。漸進增強是相反的"優雅退化，"選擇的自上而下的方法：定義最佳體驗，作為正常，你可以如果瀏覽器未命中一些所需的能力降低。漸進增強可被視為模式使您的 Web 體驗更積極的反應。

請注意使 Web 體驗更積極的反應可能包括提供一些特設的移動支援，但正在回應在瀏覽器上並不一定意味著移動用戶端為重點。

所以通過使用 jQuery 移動，您可能不擔心檢測裝置功能，因為圖書館保證輸出還將在低級別瀏覽器上。讓我們回顧的 jQuery 移動執行漸進增強模式的核心。

瀏覽器進行分區

JQuery 流動圖書館支援三個瀏覽器設定檔 — — 名為 A、 B 和 C — — 凡 A 級瀏覽器接收最增強的標記庫可以為服務和 C 級的瀏覽器只接收純 HTML 內容與沒有額外的功能，例如樣式和 AJAX。每個設定檔的特點是瀏覽器提供圖書館的需求方面的功能的清單。例如，支援 CSS 媒體查詢是中移動，jQuery 的關鍵能力，這是根本的先決條件，瀏覽器將分為 A 組。除了 CSS 媒體查詢，A 級的瀏覽器支援 JavaScript，AJAX 和完全的文件物件模型 (DOM) 操作。A 級的瀏覽器是在其全力，運行庫和 A 級瀏覽器清單經常更新的地方。

A 級和 B 級的瀏覽器之間的基本區別是缺乏支援 AJAX。在 B 級的瀏覽器，jQuery 移動停止使用 AJAX 頁面過渡效果和請求。所以你可能希望能夠進行操作成功，但不太愉快的體驗。

最後，C 級瀏覽器大多是舊版瀏覽器不支援媒體查詢和 JavaScript、 CSS 和 DOM 操縱的有限的支援。在 C 級的瀏覽器，沒有標準的 DOM 操作應用於網頁元素，和普通的 html。瀏覽器及職系的最新的矩陣是可在 jquerymobile.com/gbs。圖 1 和圖 2 A 級和 C 級的瀏覽器上顯示在同一頁的呈現方式。

圖 1 示例頁 A 級 Android 設備上

圖 2 示例頁 C 級的 Android 設備上

合理，jQuery 流動圖書館沒有為 B 級和 C 級瀏覽器優化。作為圖 2 所示，您的使用者可能仍會收到很好的治療，但更重要的是，你有不能控制的。在 HTML 圖 1 和圖 2 相當簡單，並不包含多於一個無序清單。如果您有與圖像、 快顯視窗、 各種長度、 格式和按鈕的文字區塊的更為複雜的頁面嗎？

jQuery 移動欠其漂亮的圖形 （如中所示圖 1) 向集約 DOM 操作和 AJAX 功能。A 級的瀏覽器之外，jQuery 手機只能保證網頁是可查看。您可能會發現更突然轉換 （沒有 AJAX 等) 和更簡單的 DOM 操作，或者可能完全回退到純 HTML。儘管這 jQuery 移動可以為三個不同的視圖相同的頁，基本的 HTML 仍然相同和轉換規則固定的和不受控制。

底線是如果您需要支援以上 A 級的瀏覽器，你可能會更好滴 jQuery 的手機瀏覽器分級和介紹自己的邏輯來處理瀏覽器設定檔和特設的意見 （見圖 3)。

圖 3 針對不同職系的瀏覽器

上個月的列中的代碼示例提供了此方法的一個示例。

總之，jQuery 移動是基本上不會很好地讓您可以使用熟悉的 HTML 元素，創作視圖時的 UI 框架。下一步，它將普通 HTML 元素轉換為基於觸摸的環境中很好的工作和適合於小的螢幕大小的語義上等效物件。jQuery 移動實現漸進增強模式，並不會留下任何瀏覽器。然而，這並不意味著直接通過 jQuery 移動，您可以有效地處理設備碎片問題 — — 大量的明顯不同的移動瀏覽器和設備。有時你必須提供完全不同的意見，對不同類別的設定檔和甚至確保您分區瀏覽器根據不同的邏輯。jQuery 移動包括回應 Web 設計的邏輯，並側重于 CSS 媒體查詢。我 2012 年 7 月的專欄文章中所述 （msdn.microsoft.com/magazine/jj190798），CSS 媒體查詢很棒，可以使用具有豐富設備 （也許智慧手機、 筆記本電腦、 智慧電視片) 所有你想要做在哪裡重定和隱藏您不能顯示的元素。媒體查詢需要豐富的瀏覽器，並且不移動特定功能。

我建議你擁抱 jQuery 移動之前，你問下列問題：它是作為真的很喜歡你的網站的進入點確定以指定某些智慧手機 （或類似設備） 嗎？如果是的話，然後移動 jQuery 是更多為您的確定。否則為進一步採取並探討其他選項。

埃斯波西托 Dino "構建移動解決方案為企業"（微軟出版社，2012年） 的作者是和"程式設計 ASP.NET MVC 3"（微軟出版社，2011年），並"Microsoft.NET：構建企業應用程式"（微軟出版社，2008年）。設在義大利的埃斯波西托是經常在世界各地的行業事件發表演講。跟隨他在 Twitter 上 twitter.com/despos。

由於以下的技術專家對本文的審閱：克里斯多夫 · Bennage