jQuery Mobile和Sencha Touch开发移动应用过程对比

最新推荐文章于 2016-11-16 08:54:32 发布

xuewufeifang

最新推荐文章于 2016-11-16 08:54:32 发布

阅读量988

点赞数

分类专栏：移动终端web 界面设计 js 相关技术文章文章标签： jquery jQuery JQUERY Jquery JQuery jquery mobile jQuery Mobile sencha touch Sencha Touch web开发 Web开发开发移动应用

js 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

移动终端web

10 篇文章 0 订阅

订阅专栏

相关技术文章

10 篇文章 0 订阅

订阅专栏

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的渲染是最好的。

最终运行效果(点击查看大图)

jQuery Mobile和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>Listtitle> 
<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>Liststitle> 
<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 Readerh1> 
  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节点，形成列表显示  
 });  
 }});  
})