Sencha Touch和jQuery Mobile开发过程对比--webkit-overflow-scrolling: touch;

本文将站在一个Flash开发者的角度，以一个简单的RSS阅读器实例(这个实例已经在这篇文章《如何开发基于Adobe AIR的Android应用》中实现过)，初步为大家介绍一下使用这两个框架构建移动应用的差异。

前置知识

Sencha Touch简介：http://mobile.51cto.com/Sencha-278623.htm

前不久基于JavaScript编写的Ajax框架ExtJS,将现有的ExtJS整合JQTouch、Raphaël库，推出适用于最前沿Touch Web的Sencha Touch框架，该框架是世界上第一个基于HTML5的移动应用框架。进入Sencha Touch官方网站查看更多介绍。

jQuery Mobile简介：http://mobile.51cto.com/others-277308.htm

为了让移动设备也能用上jQuery，jQuery开发团队发布了jQuery移动设备版开发项目jQuery Mobile Project(http://jquerymobile.com)。jQuery Mobile不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。

工具

工欲善其事，必先利其器，开发之前，要先准备好开发工具和调试工具。

IDE：可以使用任意文本编辑器，随您哪个顺手就用哪个，本文将使用Eclipse+Spket，这是一个非常不错的，主要用于开发Ext应用的插件，但经过配置也可用于jQuery开发，点击这里查看详细介绍。

调试工具：很遗憾Firefox对Sencha Touch的渲染效果非常差，所以我们不能使用Firebug来调试。可以使用谷歌浏览器，其调试工具也不逊色，而对这两款框架的支持程度都尚好。而为了验证Sencha Touch的效果无偏差，最好再装一个Safari浏览器，它对Sencha Touch的渲染是最好的。

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

在线预览(请使用Safari或谷歌浏览器观看)：

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

jQuery Mobile版：http://www.riameeting.com/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=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" /> 
<link rel="stylesheet" href="css/sencha-touch.css" type="text/css"> 
<link rel="stylesheet" href="css/index.css" type="text/css"> 
<title>List</title> 
<script type="text/javascript" src="ext-touch-debug.js"></script> 
<script type="text/javascript" src="test.js"></script> 
</head> 
<body></body> 
</html>

body区域留空即可，这也算是Ext开发的一个特点，绝大多数工作都依赖JS来完成。注意test.js是由我们建立，用来编写页面逻辑。逻辑代码的实现步骤：

首先创建一个Ext.Component，并指定它的HTML模板定义，用来作为RSS显示的列表视图
创建一个基本组件，只显示一行字符串，作为第二个视图
创建一个基于Tab显示的面板，面板的Tab自动从视图的Title中抽取，类似于Flex中的ViewStack
用Ajax的方式，发起对远程数据的请求，用循环的方式获取数据，并Push到数组中，更新显示列表

具体代码如下：

xt.setup({ 
tabletStartupScreen: 'tablet_startup.png',//设置加载状态时平板电脑上显示的图片 
phoneStartupScreen: 'phone_startup.png',//设置加载状态时手机屏幕显示图片 
icon: 'icon.png',//图标设置 
glossOnIcon: false, 
//相当于HTML的onload,加载完毕时触发的方法 
onReady:function() { 
//创建一个列表组件，Component是所有Ext组件类的基类，设置尺寸为充满这个屏幕 
//注意tpl属性，这是定义一个HTML模板，使用{}来表明是可变字段 
var list = new Ext.Component({ 
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 Ext.BoxComponent({ 
fullscreen: true, 
title: 'About', 
scroll: 'vertical', 
html:'RIAMeeting' 
}); 
//创建一个基于Tab显示的面板，面板的Tab自动从视图的Title中抽取，类似于Flex中的ViewStack 
//注意animation用来设置切换视图产生的动画，而item则指定显示哪些视图 
var panel = new Ext.TabPanel({ 
fullscreen: true, 
animation: 'slide', 
items: [list,about] 
}); 
//加载数据之前，先在界面上显示Loading 
Ext.getBody().mask('Loading...', 'x-mask-loading', false); 
//声明一个数组，将来用返回数据来填充 
var result = []; 
//用Ajax的方式，发起对远程数据的请求，注意跨域问题，一旦跨域请使用代理或其它方式解决 
Ext.Ajax.request({ 
url: 'rss.xml',//数据URL 
success: function(response, opts) {//数据加载成功之后的回调方法 
var xmlDom = response.responseXML; 
var items = xmlDom.getElementsByTagName('item');//用XMLDom的方式获取数据节点 
//用循环的方式获取数据，并Push到数组中 
for(var i=0;i<items.length;i++) { 
var item = items[i]; 
var t = getText(item.getElementsByTagName('title')[0]); 
var d = getText(item.getElementsByTagName('description')[0]); 
result.push({title:t,content:d}); 
} 
Ext.getBody().unmask();//删除Loading显示 
list.update(result);//更新列表 
} 
}); 
//这个方法用来获取XML节点的文本值 
function getText(oNode) { 
var sText = ""; 
for (var i = 0; i < oNode.childNodes.length; i++) { 
if (oNode.childNodes[i].hasChildNodes()) { 
sText += getText(oNode.childNodes[i]); 
} else { 
sText += oNode.childNodes[i].nodeValue; 
} 
} 
return sText; 
} 
} 
});

注意因为要调取远程数据，在本地是看不到效果的，您需要将它部署到一个Server上，才能正常运行。

RSS阅读器开发过程之jQuery Mobile篇

同样请进入jQuery Mobile的官网，下载最新的开发包(依赖的JS类库和CSS，图片)。

创建HTML页面，代码如下：

<html> 
<head> 
<title>Lists</title> 
<link rel="stylesheet" href="jquery.mobile-1.0a1.min.css" /> 
<script src="jquery-1.4.3.min.js"></script> 
<script type="text/javascript" src="jquery.mobile-1.0a1.min.js"></script> 
<script src="news.js"></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>

注意news.js是我们用来编写逻辑JavaScript的文件，而ul则是RSS列表显示所用的容器。

news.js的逻辑实现：

//相当于HTML的onload,加载完毕时触发的方法 
$(document).ready(function(){ 
//用Ajax的方式，发起对远程数据的请求，注意跨域问题，一旦跨域请使用代理或其它方式解决 
$.ajax({ 
url: '../rss.xml',//数据URL 
dataType: 'xml',//数据类型设置 
type: 'GET',//Get还是Post 
timeout: 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节点 
liNode.appendTo("ul");//最终将li节点添加到ul节点，形成列表显示 
}); 
} 
}); 
})

同样的，您需要将它部署到一个Server上，才能正常运行。

总结对比

Sencha Touch：重量级框架，类似于Flex SDK;组件封装较多;在各平台交互表现统一(内部封装);入门门槛较高

jQuery Mobile：轻量级框架，实质是jQuery插件;组件较少;交互表现依赖于平台自身，会有差异;入门门槛较低