jQuery Mobile和Sencha Touch開發移動應用過程對比

作者：佚名 2011-09-01 10:09:04

jQuery開發團隊發布了jQuery移動設備版開發項目jQuery Mobile Project。jQuery Mobile不僅會給主流移動平臺帶來jQuery核心庫，而且會發布一個完整統一的jQuery移動UI框架。

jQuery Mobile和Sencha Touch開發移動應用過程對比是本文要介紹的內容，HTML5雖然離全面普及還有很長的時間，但在一些開發領域，HTML5已經嶄露頭角。

比如在移動開發中，HTML5更能體現其跨平臺的特性（Flash雖然積極努力，但仍然被iOS等系統拒之門外），說到這里，不得不提一下HTML5在移動開發領域的兩個優秀框架：Sencha Touch 和 jQuery Mobile。本文將站在一個Flash開發者的角度，以一個簡單的RSS閱讀器實例（這個實例已經在這篇文章《走進Android[1]:如何開發基于Adobe AIR的Android應用》中實現過），初步為大家介紹一下使用這兩個框架構建移動應用的差異。

前置知識

首先您需要大致了解Sencha Touch 和 jQuery Mobile。

Sencha Touch簡介：

前不久基于JavaScript編寫的Ajax框架ExtJS,將現有的ExtJS整合JQTouch、Rapha?l庫，推出適用于最前沿Touch Web的Sencha Touch框架，該框架是世界上***個基于HTML5的移動應用框架。進入Sencha Touch官方網站查看更多介紹。

jQuery Mobile簡介：

為了讓移動設備也能用上jQuery，jQuery開發團隊發布了jQuery移動設備版開發項目jQuery Mobile Project。jQuery Mobile不僅會給主流移動平臺帶來jQuery核心庫，而且會發布一個完整統一的jQuery移動UI框架。

工具

工欲善其事，必先利其器，開發之前，要先準備好開發工具和調試工具。

IDE：可以使用任意文本編輯器，隨您哪個順手就用哪個，本文將使用Eclipse+Spket，這是一個非常不錯的，主要用于開發Ext應用的插件，但經過配置也可用于jQuery開發，點擊這里查看詳細介紹。

調試工具：很遺憾Firefox對Sencha Touch的渲染效果非常差，所以我們不能使用Firebug來調試。可以使用谷歌瀏覽器，其調試工具也不遜色，而對這兩款框架的支持程度都尚好。而為了驗證Sencha Touch的效果無偏差，***再裝一個Safari瀏覽器，它對Sencha Touch的渲染是***的。

最終運行效果(點擊查看大圖)

在線預覽（請使用Safari或谷歌瀏覽器觀看）：

Sencha Touch版：  
http://wwwriameetingcom/examples/sencha/  
jQuery Mobile版：  
http://wwwriameetingcom/examples/jqmobile/

RSS閱讀器開發過程之Sencha Touch篇

首先進入Sencha Touch官網，下載開發包，開發包中包含必須的JS類庫和CSS，示例等等。

然后新建一個HTML頁面，代碼如下：

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<meta name="viewport" content="width=device-width;   
initial-scale=10;   
maximum-scale=10;   
minimum-scale=10;   
user-scalable=0;" /> 
<link rel="stylesheet" href="css/sencha-touchcss" type="text/css"> 
<link rel="stylesheet" href="css/indexcss" type="text/css"> 
<title>List</title> 
<script type="text/javascript" src="ext-touch-debugjs"> 
</script> 
<script type="text/javascript" src="testjs"> 
</script> 
</head> 
<body> 
</body> 
</html>

body區域留空即可，這也算是Ext開發的一個特點，絕大多數工作都依賴JS來完成。注意testjs是由我們建立，用來編寫頁面邏輯。邏輯代碼的實現步驟：

首先創建一個ExtComponent，并指定它的HTML模板定義，用來作為RSS顯示的列表視圖

創建一個基本組件，只顯示一行字符串，作為第二個視圖

創建一個基于Tab顯示的面板，面板的Tab自動從視圖的Title中抽取，類似于Flex中的ViewStack

用Ajax的方式，發起對遠程數據的請求，用循環的方式獲取數據，并Push到數組中，更新顯示列表

具體代碼如下：

Extsetup({tabletStartupScreen: 'tablet_startuppng',//設置加載狀態時平板電腦上顯示的圖片  
phoneStartupScreen: 'phone_startuppng',//設置加載狀態時手機屏幕顯示圖片  
icon: 'iconpng',//圖標設置  
glossOnIcon: false,//相當于HTML的onload,加載完畢時觸發的方法  
onReady:function() {  
   //創建一個列表組件，Component是所有Ext組件類的基類，設置尺寸為充滿這個屏幕  
   //注意tpl屬性，這是定義一個HTML模板，使用{}來表明是可變字段  
   var list = new ExtComponent({fullscreen: true,title: 'RIAMeeting News Reader',scroll: 'vertical',tpl:'  
   <tpl for=""> 
   <div class="listItem"> 
   <h2>{title}</h2> 
   <p>{content}</p> 
   </div></tpl>'  
 });//創建一個基本組件，只顯示一行字符串  
 var about = new ExtBoxComponent({  
 fullscreen: true,title: 'About',scroll: 'vertical',html:'RIAMeeting'});  
   //創建一個基于Tab顯示的面板，面板的Tab自動從視圖的Title中抽取，類似于Flex中的ViewStack  
   //注意animation用來設置切換視圖產生的動畫，而item則指定顯示哪些視圖  
   var panel = new ExtTabPanel({fullscreen: true,animation: 'slide',items: [list,about]});  
   //加載數據之前，先在界面上顯示LoadingExtgetBody()mask('Loading', 'x-mask-loading', false);  
   //聲明一個數組，將來用返回數據來填充var result = [];  
   //用Ajax的方式，發起對遠程數據的請求，注意跨域問題，一旦跨域請使用代理或其它方式解決ExtAjaxrequest({url: 'rssxml',  
   //數據URLsuccess: function(response, opts) {  
   //數據加載成功之后的回調方法  
   var xmlDom = responseresponseXML;  
   var items = xmlDomgetElementsByTagName('item');  
   //用XMLDom的方式獲取數據節點//用循環的方式獲取數據，并Push到數組中  
   for(var i=0;i<itemslength;i++) {  
      var item = items[i];  
      var t = getText(itemgetElementsByTagName('title')[0]);  
      var d = getText(itemgetElementsByTagName('description')[0]);  
      resultpush({title:t,content:d});  
    }ExtgetBody()unmask();//刪除Loading顯示  
    listupdate(result);//更新列表  
  }  
}  
);  
//這個方法用來獲取XML節點的文本值  
function getText(oNode) {var sText = "";for (var i = 0;   
i < oNodechildNodeslength;   
i++) {  
if (oNodechildNodes[i]hasChildNodes()) {  
sText += getText(oNodechildNodes[i]);  
} else   
{sText += oNodechildNodes[i]nodeValue;  
}}  
return sText;  
}  
}  
}  
);

注意因為要調取遠程數據，在本地是看不到效果的，您需要將它部署到一個Server上，才能正常運行。

RSS閱讀器開發過程之jQuery Mobile篇

同樣請進入jQuery Mobile的官網，下載***的開發包（依賴的JS類庫和CSS，圖片）。

創建HTML頁面，代碼如下：

<html> 
<head> 
<title>Lists</title> 
<link rel="stylesheet"  href="jquerymobile-10a1mincss" /> 
  <script src="jquery-143minjs"> 
  </script><script type="text/javascript" src="jquerymobile-10a1minjs"> 
  </script><script src="newsjs"> 
  </script> 
</head> 
<body> 
  <div data-role="page"> 
  <div data-role="header"> 
  <h1>RIAMeeting RSS Reader</h1> 
  </div> 
  <div data-role="content"> 
  <ul data-role="listview"> 
  </ul> 
  /div> 
  </div> 
</body> 
</html>

注意newsjs是我們用來編寫邏輯JavaScript的文件，而ul則是RSS列表顯示所用的容器。

newsjs的邏輯實現：

//相當于HTML的onload,加載完畢時觸發的方法  
$(document)ready(function(){  
   //用Ajax的方式，發起對遠程數據的請求，注意跨域問題，一旦跨域請使用代理或其它方式解決  
 $ajax({url: '/rssxml',//數據  
 URLdataType: 'xml',//數據類型設置  
 type: 'GET',//Get還是  
 Posttimeout: 10000,//超時設置，單位為毫秒  
 error: function(xml){//加載錯誤的處理方法  
    alert("loading xml error");  
 },success: function(xml){/加載成功的處理方法//也是用循環遍歷數據節點  
 $(xml)find("item")each(function(i){var title = $(this)children("title")text();//獲取標題內容  
 var description = $(this)children("description")text();//獲取摘要內容  
 var liNode = $('<li role="option" class="ui-li ui-li-static ui-btn-up-c">');//聲明一個li標簽節點  
 $("<h3></h3>")html(title)appendTo(liNode);//用h3包裹標題并添加到li節點  
 $("<p></p>")html(description)appendTo(liNode);//用p包裹摘要并添加到li節點  
 liNodeappendTo("ul");//最終將li節點添加到ul節點，形成列表顯示  
 });  
 }});  
})

同樣的，您需要將它部署到一個Server上，才能正常運行。

總結對比

Sencha Touch：重量級框架，類似于Flex SDK；組件封裝較多；在各平臺交互表現統一(內部封裝)；入門門檻較高

jQuery Mobile：輕量級框架，實質是jQuery插件；組件較少；交互表現依賴于平臺自身，會有差異；入門門檻較低。

小結：jQuery Mobile和Sencha Touch應用移動開發過程對比的內容介紹完了，希望通過本文的學習能對你有所幫助！

責任編輯：zhaolei 來源：互聯網