自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

Sencha Touch和jQuery Mobile開發(fā)過程對(duì)比

作者：郭少瑞
移動(dòng)開發(fā)
HTML5雖然離全面普及還有很長(zhǎng)的時(shí)間，但在一些開發(fā)領(lǐng)域，HTML5已經(jīng)嶄露頭角。比如在移動(dòng)開發(fā)中，HTML5更能體現(xiàn)其跨平臺(tái)的特性（Flash雖然積極努力，但仍然被iOS等系統(tǒng)拒之門外），說到這里，不得不提一下HTML5在移動(dòng)開發(fā)領(lǐng)域的兩個(gè)優(yōu)秀框架：Sencha Touch 和 jQuery Mobile。

本文將站在一個(gè)Flash開發(fā)者的角度，以一個(gè)簡(jiǎn)單的RSS閱讀器實(shí)例(這個(gè)實(shí)例已經(jīng)在這篇文章《如何開發(fā)基于Adobe AIR的Android應(yīng)用》中實(shí)現(xiàn)過)，初步為大家介紹一下使用這兩個(gè)框架構(gòu)建移動(dòng)應(yīng)用的差異。

前置知識(shí)

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

Sencha Touch簡(jiǎn)介：http://mobile.51cto.com/Sencha-278623.htm

前不久基于JavaScript編寫的Ajax框架ExtJS,將現(xiàn)有的ExtJS整合JQTouch、Raphaël庫，推出適用于最前沿Touch Web的Sencha Touch框架，該框架是世界上第一個(gè)基于HTML5的移動(dòng)應(yīng)用框架。進(jìn)入Sencha Touch官方網(wǎng)站查看更多介紹。

jQuery Mobile簡(jiǎn)介：http://mobile.51cto.com/others-277308.htm

為了讓移動(dòng)設(shè)備也能用上jQuery，jQuery開發(fā)團(tuán)隊(duì)發(fā)布了jQuery移動(dòng)設(shè)備版開發(fā)項(xiàng)目jQuery Mobile Project(http://jquerymobile.com)。jQuery Mobile不僅會(huì)給主流移動(dòng)平臺(tái)帶來jQuery核心庫，而且會(huì)發(fā)布一個(gè)完整統(tǒng)一的jQuery移動(dòng)UI框架。

工具

工欲善其事，必先利其器，開發(fā)之前，要先準(zhǔn)備好開發(fā)工具和調(diào)試工具。

IDE：可以使用任意文本編輯器，隨您哪個(gè)順手就用哪個(gè)，本文將使用Eclipse+Spket，這是一個(gè)非常不錯(cuò)的，主要用于開發(fā)Ext應(yīng)用的插件，但經(jīng)過配置也可用于jQuery開發(fā)，點(diǎn)擊這里查看詳細(xì)介紹。

調(diào)試工具：很遺憾Firefox對(duì)Sencha Touch的渲染效果非常差，所以我們不能使用Firebug來調(diào)試?？梢允褂霉雀铻g覽器，其調(diào)試工具也不遜色，而對(duì)這兩款框架的支持程度都尚好。而為了驗(yàn)證Sencha Touch的效果無偏差，最好再裝一個(gè)Safari瀏覽器，它對(duì)Sencha Touch的渲染是最好的。

最終運(yùn)行效果(點(diǎn)擊查看大圖)

在線預(yù)覽(請(qǐng)使用Safari或谷歌瀏覽器觀看)：

Sencha Touch版：http://www.riameeting.com/examples/sencha/

jQuery Mobile版：http://www.riameeting.com/examples/jqmobile/

RSS閱讀器開發(fā)過程之Sencha Touch篇

首先進(jìn)入Sencha Touch官網(wǎng)，下載開發(fā)包，開發(fā)包中包含必須的JS類庫和CSS，示例等等。

然后新建一個(gè)HTML頁面，代碼如下：

  1. <html> 
  2. <head> 
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  4. <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" /> 
  5. <link rel="stylesheet" href="css/sencha-touch.css" type="text/css"> 
  6. <link rel="stylesheet" href="css/index.css" type="text/css"> 
  7. <title>List</title> 
  8. <script type="text/javascript" src="ext-touch-debug.js"></script> 
  9. <script type="text/javascript" src="test.js"></script> 
  10. </head> 
  11. <body></body> 
  12. </html> 

 

body區(qū)域留空即可，這也算是Ext開發(fā)的一個(gè)特點(diǎn)，絕大多數(shù)工作都依賴JS來完成。注意test.js是由我們建立，用來編寫頁面邏輯。邏輯代碼的實(shí)現(xiàn)步驟：

  • 首先創(chuàng)建一個(gè)Ext.Component，并指定它的HTML模板定義，用來作為RSS顯示的列表視圖
  • 創(chuàng)建一個(gè)基本組件，只顯示一行字符串，作為第二個(gè)視圖
  • 創(chuàng)建一個(gè)基于Tab顯示的面板，面板的Tab自動(dòng)從視圖的Title中抽取，類似于Flex中的ViewStack
  • 用Ajax的方式，發(fā)起對(duì)遠(yuǎn)程數(shù)據(jù)的請(qǐng)求，用循環(huán)的方式獲取數(shù)據(jù)，并Push到數(shù)組中，更新顯示列表

具體代碼如下：

  1. xt.setup({ 
  2. tabletStartupScreen: 'tablet_startup.png',//設(shè)置加載狀態(tài)時(shí)平板電腦上顯示的圖片 
  3. phoneStartupScreen: 'phone_startup.png',//設(shè)置加載狀態(tài)時(shí)手機(jī)屏幕顯示圖片 
  4. icon: 'icon.png',//圖標(biāo)設(shè)置 
  5. glossOnIcon: false, 
  6. //相當(dāng)于HTML的onload,加載完畢時(shí)觸發(fā)的方法 
  7. onReady:function() { 
  8. //創(chuàng)建一個(gè)列表組件，Component是所有Ext組件類的基類，設(shè)置尺寸為充滿這個(gè)屏幕 
  9. //注意tpl屬性，這是定義一個(gè)HTML模板，使用{}來表明是可變字段 
  10. var list = new Ext.Component({ 
  11. fullscreen: true, 
  12. title: 'RIAMeeting News Reader', 
  13. scroll: 'vertical', 
  14. tpl:'<tpl for="."><div class="listItem"><h2>{title}</h2><p>{content}</p></div></tpl>' 
  15. }); 
  16. //創(chuàng)建一個(gè)基本組件，只顯示一行字符串 
  17. var about = new Ext.BoxComponent({ 
  18. fullscreen: true, 
  19. title: 'About', 
  20. scroll: 'vertical', 
  21. html:'RIAMeeting' 
  22. }); 
  23. //創(chuàng)建一個(gè)基于Tab顯示的面板，面板的Tab自動(dòng)從視圖的Title中抽取，類似于Flex中的ViewStack 
  24. //注意animation用來設(shè)置切換視圖產(chǎn)生的動(dòng)畫，而item則指定顯示哪些視圖 
  25. var panel = new Ext.TabPanel({ 
  26. fullscreen: true, 
  27. animation: 'slide', 
  28. items: [list,about] 
  29. }); 
  30. //加載數(shù)據(jù)之前，先在界面上顯示Loading 
  31. Ext.getBody().mask('Loading...', 'x-mask-loading', false); 
  32. //聲明一個(gè)數(shù)組，將來用返回?cái)?shù)據(jù)來填充 
  33. var result = []; 
  34. //用Ajax的方式，發(fā)起對(duì)遠(yuǎn)程數(shù)據(jù)的請(qǐng)求，注意跨域問題，一旦跨域請(qǐng)使用代理或其它方式解決 
  35. Ext.Ajax.request({ 
  36. url: 'rss.xml',//數(shù)據(jù)URL 
  37. success: function(response, opts) {//數(shù)據(jù)加載成功之后的回調(diào)方法 
  38. var xmlDom = response.responseXML; 
  39. var items = xmlDom.getElementsByTagName('item');//用XMLDom的方式獲取數(shù)據(jù)節(jié)點(diǎn) 
  40. //用循環(huán)的方式獲取數(shù)據(jù)，并Push到數(shù)組中 
  41. for(var i=0;i<items.length;i++) { 
  42. var item = items[i]; 
  43. var t = getText(item.getElementsByTagName('title')[0]); 
  44. var d = getText(item.getElementsByTagName('description')[0]); 
  45. result.push({title:t,content:d}); 
  46. } 
  47. Ext.getBody().unmask();//刪除Loading顯示 
  48. list.update(result);//更新列表 
  49. } 
  50. }); 
  51. //這個(gè)方法用來獲取XML節(jié)點(diǎn)的文本值 
  52. function getText(oNode) { 
  53. var sText = ""; 
  54. for (var i = 0; i < oNode.childNodes.length; i++) { 
  55. if (oNode.childNodes[i].hasChildNodes()) { 
  56. sText += getText(oNode.childNodes[i]); 
  57. } else { 
  58. sText += oNode.childNodes[i].nodeValue; 
  59. } 
  60. } 
  61. return sText; 
  62. } 
  63. } 
  64. }); 

注意因?yàn)橐{(diào)取遠(yuǎn)程數(shù)據(jù)，在本地是看不到效果的，您需要將它部署到一個(gè)Server上，才能正常運(yùn)行。

RSS閱讀器開發(fā)過程之jQuery Mobile篇

同樣請(qǐng)進(jìn)入jQuery Mobile的官網(wǎng)，下載最新的開發(fā)包(依賴的JS類庫和CSS，圖片)。

創(chuàng)建HTML頁面，代碼如下：

  1. <html> 
  2. <head> 
  3. <title>Lists</title> 
  4. <link rel="stylesheet" href="jquery.mobile-1.0a1.min.css" /> 
  5. <script src="jquery-1.4.3.min.js"></script> 
  6. <script type="text/javascript" src="jquery.mobile-1.0a1.min.js"></script> 
  7. <script src="news.js"></script> 
  8. </head> 
  9. <body> 
  10. <div data-role="page"> 
  11. <div data-role="header"> 
  12. <h1>RIAMeeting RSS Reader</h1> 
  13. </div> 
  14. <div data-role="content"> 
  15. <ul data-role="listview"></ul> 
  16. </div> 
  17. </div> 
  18. </body> 
  19. </html> 
 

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

news.js的邏輯實(shí)現(xiàn)：

  1. //相當(dāng)于HTML的onload,加載完畢時(shí)觸發(fā)的方法 
  2. $(document).ready(function(){ 
  3. //用Ajax的方式，發(fā)起對(duì)遠(yuǎn)程數(shù)據(jù)的請(qǐng)求，注意跨域問題，一旦跨域請(qǐng)使用代理或其它方式解決 
  4. $.ajax({ 
  5. url: '../rss.xml',//數(shù)據(jù)URL 
  6. dataType: 'xml',//數(shù)據(jù)類型設(shè)置 
  7. type: 'GET',//Get還是Post 
  8. timeout: 10000,//超時(shí)設(shè)置，單位為毫秒 
  9. error: function(xml){//加載錯(cuò)誤的處理方法 
  10. alert("loading xml error"); 
  11. }, 
  12. success: function(xml){//加載成功的處理方法 
  13. //也是用循環(huán)遍歷數(shù)據(jù)節(jié)點(diǎn) 
  14. $(xml).find("item").each(function(i){ 
  15. var title = $(this).children("title").text();//獲取標(biāo)題內(nèi)容 
  16. var description = $(this).children("description").text();//獲取摘要內(nèi)容 
  17. var liNode = $('<li role="option" class="ui-li ui-li-static ui-btn-up-c">');//聲明一個(gè)li標(biāo)簽節(jié)點(diǎn) 
  18. $("<h3></h3>").html(title).appendTo(liNode);//用h3包裹標(biāo)題并添加到li節(jié)點(diǎn) 
  19. $("<p></p>").html(description).appendTo(liNode);//用p包裹摘要并添加到li節(jié)點(diǎn) 
  20. liNode.appendTo("ul");//最終將li節(jié)點(diǎn)添加到ul節(jié)點(diǎn)，形成列表顯示 
  21. }); 
  22. } 
  23. }); 
  24. }) 

同樣的，您需要將它部署到一個(gè)Server上，才能正常運(yùn)行。

總結(jié)對(duì)比

Sencha Touch：重量級(jí)框架，類似于Flex SDK;組件封裝較多;在各平臺(tái)交互表現(xiàn)統(tǒng)一(內(nèi)部封裝);入門門檻較高

jQuery Mobile：輕量級(jí)框架，實(shí)質(zhì)是jQuery插件;組件較少;交互表現(xiàn)依賴于平臺(tái)自身，會(huì)有差異;入門門檻較低

責(zé)任編輯：佚名 來源： 瑞研社區(qū)
Sencha TouchjQuery Mobile
相關(guān)推薦

2011-09-01 10:09:04

2011-09-05 10:49:14

Sencha ToucjQuery MobiHTML5

2011-09-05 13:45:25

jQuery MobiSencha Touc移動(dòng)Web UI框架

2011-09-02 15:18:49

Sencha Touc

2011-07-25 16:21:22

Sencha touc

2011-09-05 11:23:26

EclipseSencha Touc框架

2011-07-26 09:41:50

Sencha Touc特性HTML 5

2010-11-22 10:31:17

Sencha touc

2011-07-25 15:55:21

Sencha ToucHtml 5

2011-09-02 16:42:51

Sencha ToucWeb應(yīng)用

2011-09-05 11:27:17

Sencha Touc框架HTML5

2011-09-05 10:20:21

Sencha ToucAPP

2011-07-26 09:46:53

Sencha Touc

2012-01-10 14:10:26

Sencha Touc

2011-07-26 09:58:24

2011-07-26 10:21:25

Sencha Touc

2011-07-26 10:44:15

Sencha Touc

2011-08-15 10:14:41

Sencha ToucMyEclipseTomcat

2011-09-02 16:21:08

Sencha Touc自動(dòng)生成工具

2011-07-25 16:41:16

Sencha Touc
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)