【51CTO獨(dú)家譯文】經(jīng)常瀏覽Developer.com的讀者也許注意到了這點(diǎn)：我最近特別關(guān)注JavaScript驅(qū)動(dòng)的移動(dòng)應(yīng)用開(kāi)發(fā)解決方案，先后撰文介紹了眾多的相關(guān)話題，包括jQuery Mobile、jQTouch、Sencha Touch和PhoneGap。我得承認(rèn)，要搞清楚這一批前沿技術(shù)并非易事，于是我這回概述一下這些主要的移動(dòng)開(kāi)發(fā)解決方案的主要特性和優(yōu)點(diǎn)(51CTO注：PhoneGap未作介紹，欲了解更多PhoneGap內(nèi)容請(qǐng)移步51CTO專(zhuān)題：跨平臺(tái)移動(dòng)web中間件PhoneGap開(kāi)發(fā)入門(mén))。但愿這篇概述多少可以幫你確定哪一種解決方案最適合你項(xiàng)目的具體要求。

jQuery Mobile適合你嗎?

差不多二十年來(lái)，處理跨瀏覽器的HTML和CSS不一致問(wèn)題一直讓許多開(kāi)發(fā)人員頗為苦惱。而Ajax的出現(xiàn)更是加劇了這些問(wèn)題，因?yàn)殚_(kāi)發(fā)人員現(xiàn)在要處理新的問(wèn)題：無(wú)數(shù)與JavaScript有關(guān)的瀏覽器不兼容問(wèn)題和異?，F(xiàn)象。后來(lái)出現(xiàn)了jQuery：由于可以對(duì)基本的JavaScript任務(wù)進(jìn)行強(qiáng)大的抽象處理，jQuery大大減輕了編寫(xiě)復(fù)雜的跨瀏覽器代碼方面的壓力。難怪jQuery一下子火了起來(lái)。

眼下移動(dòng)應(yīng)用開(kāi)發(fā)人員面臨可能更艱巨的挑戰(zhàn)，這不僅是由于要處理各種各樣的移動(dòng)瀏覽器不兼容問(wèn)題，還由于需要設(shè)計(jì)合理布局，以便適合移動(dòng)設(shè)備所固有的各種外觀尺寸和有限資源。這時(shí)候，jQuery Mobile應(yīng)運(yùn)而生，它自詡是“一種針對(duì)觸摸而優(yōu)化的Web框架，面向智能手機(jī)和平板電腦”，可以充分發(fā)揮jQuery和jQuery UI(51CTO注：查看jQuery UI實(shí)例http://jqueryui.com/)的優(yōu)勢(shì)。

雖然jQuery Mobile目前仍是測(cè)試版(第二個(gè)測(cè)試版在去年8月3日宣布發(fā)布)，但已經(jīng)支持?jǐn)?shù)量多得驚人的移動(dòng)平臺(tái)，包括安卓、黑莓、iOS和Windows Mobile等其他平臺(tái)。同樣出色的是，它還支持眾多的窗口組件：由于jQuery Mobile對(duì)漸進(jìn)增強(qiáng)(progressive enhancement)很重視，開(kāi)發(fā)人員可以利用這些窗口組件，輕松創(chuàng)建統(tǒng)一的、跨移動(dòng)設(shè)備的界面。務(wù)必將演示程序(51CTO注：查看演示程序地址http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/)裝入到眾多不同的設(shè)備上(包括你的桌面瀏覽器)，領(lǐng)略一下界面是如何變化以適合目標(biāo)設(shè)備的。

此外，務(wù)必從桌面瀏覽器里面來(lái)查看演示程序的源代碼;連剛?cè)腴T(mén)的jQuery用戶(hù)也會(huì)注意到該程序的代碼很注重全面隔離頁(yè)面布局和JavaScript驅(qū)動(dòng)的功能。你會(huì)看到，整個(gè)應(yīng)用程序都在一個(gè)文檔里面，每個(gè)“頁(yè)面”及其組成部分使用與自定義屬性有關(guān)的DIV來(lái)定義。比如說(shuō)：

<div id="home" target="_blank"> 
   <h1>WJGilmore, LLC</h1> 
 </div> 
 <div>   
   <p>Check back regularly for the latest information about Jason's books!</p>       
 </div> 
 <div> 
   <h1>Copyright © 2011 W.J. Gilmore, LLC</h1> 
 </div> 
/div> 

jQuery Mobile的主要特性

雖然使用jQuery Mobile的理由有多個(gè)，但是下面三個(gè)理由顯得尤為突出：

• jQuery開(kāi)發(fā)人員使用jQuery Mobile時(shí)會(huì)覺(jué)得駕輕就熟，那是由于兩者使用共享的代碼庫(kù)。
• 如果目標(biāo)用戶(hù)群并不局限于使用某一種設(shè)備，關(guān)注跨平臺(tái)兼容性這個(gè)優(yōu)點(diǎn)很理想。
• 社區(qū)和企業(yè)的廣泛參與促使像Dreamweaver CS 5.5這些廣受歡迎的開(kāi)發(fā)產(chǎn)品和像非常出色的Photo Swipe這一批值得關(guān)注的插件內(nèi)置了對(duì)jQuery Mobile的支持。

51CTO專(zhuān)題推薦：jQuery Mobile基礎(chǔ)入門(mén)教程#p#

jQTouch適合你嗎?

那邊廂，jQuery Mobile力求提供在眾多移動(dòng)設(shè)備上兼容的功能;這邊廂，jQTouch項(xiàng)目而是將大部分精力投入到了支持基于WebKit的瀏覽器(Chrome和Safari)的設(shè)備上。因而，jQTouch應(yīng)該與旨在部署到iPhone和安卓設(shè)備上的Web應(yīng)用程序結(jié)合使用。支持針對(duì)WebKit而優(yōu)化的動(dòng)畫(huà)以及旨在與移動(dòng)設(shè)備的式樣融為一體的多個(gè)主題。

要熟悉jQTouch的功能，最容易的辦法就是通過(guò)你的移動(dòng)設(shè)備或WebKit瀏覽器，仔細(xì)研究演示網(wǎng)站(51CTO注：演示網(wǎng)站地址http://jqtouch.com/preview/demos/main/#home)。我尤其建議查看演示程序的源代碼;你會(huì)看到，與jQuery Mobile一樣， jQTouch“頁(yè)面”也使用一系列DIV元素和相關(guān)屬性來(lái)組裝，設(shè)計(jì)人員對(duì)這種方法應(yīng)該會(huì)很熟悉。

jQTouch的主要特性

雖然使用jQTouch的理由有多個(gè)，但是下面兩個(gè)理由顯得尤為突出：

• 雖然jQTouch同樣基于jQuery，但是其側(cè)重點(diǎn)主要是為基于WebKit的瀏覽器提供經(jīng)過(guò)優(yōu)化的支持。因而，如果你打算一心鎖定使用基于iOS或安卓的設(shè)備的用戶(hù)，那么jQTouch可能比較合適。
• 與jQuery Mobile一樣，jQTouch也采用了以HTML和CSS為中心的方法來(lái)開(kāi)發(fā)頁(yè)面，使用JavaScript專(zhuān)門(mén)致力于添加事件、動(dòng)畫(huà)及其他功能。如果你在與設(shè)計(jì)人員合作，或者開(kāi)發(fā)人員不是特別精通JavaScript，在想方設(shè)法逐步熟悉移動(dòng)Web開(kāi)發(fā)，那么這種方法就很吸引人。

51CTO專(zhuān)題推薦： Sencha Touch基礎(chǔ)入門(mén)教程#p#

Sencha Touch適合你嗎?

較之與jQuery Mobile和jQTouch，Sencha Touch學(xué)起來(lái)難度相對(duì)比較復(fù)雜，不過(guò)有弊也有利：雖然比較復(fù)雜，但是帶來(lái)了強(qiáng)大的功能。作為Sencha公司的一款雙許可證(商業(yè)版和GPL/FLOSS版)產(chǎn)品，Sencha Touch采用了與上述的幾種移動(dòng)開(kāi)發(fā)框架全然不同的方法，原因在于布局和界面窗口組件是使用出色的JavaScript庫(kù)構(gòu)建而成的，而該JavaScript庫(kù)恰好擁有豐富的實(shí)用特性，比如離線支持、獨(dú)特布局和輕松制作主題的功能。

此外，Sencha Touch采取了從極其全面的角度來(lái)應(yīng)對(duì)應(yīng)用程序開(kāi)發(fā)所固有的挑戰(zhàn)，原因在于它支持可以完全直接開(kāi)發(fā)MVC驅(qū)動(dòng)的應(yīng)用程序。為了形象地說(shuō)明開(kāi)發(fā)Sencha Touch應(yīng)用程序與開(kāi)發(fā)jQuery Mobile / jQTouch應(yīng)用程序之間的反差到底有多明顯，不妨將jQuery Mobile/jQTouch演示程序里面的源代碼與用于僅僅創(chuàng)建和啟動(dòng)視口的下列Sencha Touch代碼作一比較：

Ext.regApplication({ 
  name: 'App', 
  defaultUrl: 'Index/index', 
  launch: function() 
  { 
    this.viewport = new App.views.Viewport(); 
  }, 
}); 

雖然這種方法對(duì)相對(duì)不熟悉JavaScript的新手來(lái)說(shuō)可能難度很大，不過(guò)我還是建議花點(diǎn)時(shí)間嘗試一下Sencha Touch，因?yàn)橹庇^的語(yǔ)法、編寫(xiě)清晰的文檔以及眾多的配套實(shí)例對(duì)于你盡快上手會(huì)大有幫助。

Sencha Touch的主要特性

雖然使用Sencha Touch的理由有多個(gè)，但是下面三個(gè)理由顯得尤為突出：

• 原生的MVC架構(gòu)致力于為面向框架的開(kāi)發(fā)人員消除緊張，他們可能在為如何合理地組織和管理JavaScript代碼而苦惱。
• Sencha開(kāi)發(fā)人員已付出了很大的努力，在Sencha網(wǎng)站(51CTO注：Sencha網(wǎng)站地址http://www.sencha.com/)上發(fā)布了眾多的教程和演示應(yīng)用程序。
• 對(duì)于之前熟悉窗口組件工具包(想一想Swing和GTK+)的開(kāi)發(fā)人員來(lái)說(shuō)，窗口組件的布局和組織方面采用JavaScript驅(qū)動(dòng)的方法自然很熟悉。#p#

結(jié)束語(yǔ)

讀者***總是問(wèn)我應(yīng)該選擇哪一種框架?；卮鹂偸且粯樱哼@得看情況。毫無(wú)疑問(wèn)，Sencha Touch是這種開(kāi)發(fā)框架當(dāng)中功能最豐富的，不過(guò)有時(shí)候?qū)W起來(lái)比較困難。話雖如此，如果你的目的僅僅是為現(xiàn)有的應(yīng)用程序提供對(duì)用戶(hù)友好的移動(dòng)界面，那么jQuery Mobile或jQTouch可能會(huì)提供一條阻力最小的道路。如果你給移動(dòng)應(yīng)用程序設(shè)的目標(biāo)比較高，那么Sencha Touch極有可能完全值得你為此投入時(shí)間。不管你***選擇了什么樣的解決方案，我都很想聽(tīng)聽(tīng)你使用后的感受!歡迎留言。

[[59797]]

本文作者

W.Jason Gilmore曾開(kāi)發(fā)了大量PHP和MySQL應(yīng)用程序，并在各大專(zhuān)業(yè)媒體發(fā)表了眾多膾炙人口的文章。

原文地址

http://www.developer.com/ws/mobile-web-development-frameworks-the-javascript-roundup.html

【51CTO譯稿，非經(jīng)授權(quán)謝絕轉(zhuǎn)載，合作媒體轉(zhuǎn)載請(qǐng)注明原文出處、作者及51CTO譯者！】