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

Posted 十一月9th, 2010 by郭少瑞

?jQuer y Mobile

?Sencha Touc h

?郭少瑞

HTML5虽然离全面普及还有很长的时间，但在一些开发领域，HTML5已经崭露头角。比如在移动开发中，HTML5更能体现其跨平台的特性（Flash虽然积极努力，但仍然被iOS等系统拒之门外），说到这里，不得不提一下HTML5在移动开发领域的两个优秀框架：Sencha Touch 和j Query Mobile。本文将站在一个Flas h开发者的角度，以一个简单的RSS阅读器实例（这个实例已经在这篇文章《走进Android[1]:如何开发基于Adobe AIR的Android应用》中实现过），初步为大家介绍一下使用这两个框架构建移动应用的差异。

前置知识

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

Sencha Touch简介：

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

jQ uery Mo bile简介：

为了让移动设备也能用上j Query，j Query开发团队发布了j Query移动设备版开发项目j Query Mobile Proj ect

（https://www.360docs.net/doc/6d6562850.html,）。j Query Mobile不仅会给主流移动平台带来j Query核心库，而且会发布一个完整统一的j Query移动UI框架。

工具

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

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

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

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

在线预览（请使用Saf ari或谷歌浏览器观看）：

Sencha Touch版：https://www.360docs.net/doc/6d6562850.html,/examples/sencha/ j Query Mobile版：https://www.360docs.net/doc/6d6562850.html,/examples/j qmobile/ RSS阅读器开发过程之Sencha Touch篇

首先进入Sencha Touch官网，下载开发包，开发包中包含必须的JS类库和CSS，示例等等。

然后新建一个HTML页面，代码如下：

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

1.首先创建一个https://www.360docs.net/doc/6d6562850.html,ponent，并指定它的HTML模板定义，用来作为RSS显示的列表视图

2.创建一个基本组件，只显示一行字符串，作为第二个视图

3.创建一个基于Tab显示的面板，面板的Tab自动从视图的Title中抽取，类似于Flex中的View Stack

4.用A j ax的方式，发起对远程数据的请求，用循环的方式获取数据，并Push到数组中，更新显示列表

具体代码如下：

注意因为要调取远程数据，在本地是看不到效果的，您需要将它部署到一个Server上，才能正常运行。RSS阅读器开发过程之jQuery Mobile篇

同样请进入j Query Mobile的官网，下载最新的开发包（依赖的JS类库和CSS，图片）。

创建HTML页面，代码如下：

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

new s.j s的逻辑实现：

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

总结对比

Sencha Touch：重量级框架，类似于Flex SDK；组件封装较多；在各平台交互表现统一(内部封装)；入门门槛较高j Query Mobile：轻量级框架，实质是j Query插件；组件较少；交互表现依赖于平台自身，会有差异；入门门槛较低riadevID: