学步园

jQuery Mobile适合你吗?

差不多二十年来，处理跨浏览器的HTML和CSS不一致问题一直让许多开发人员颇为苦恼。而Ajax的出现更是加剧了这些问题，因为开发人员现在要处理新的问题：无数与JavaScript有关的浏览器不兼容问题和异常现象。后来出现了jQuery：由于可以对基本的JavaScript任务进行强大的抽象处理，jQuery大大减轻了编写复杂的跨浏览器代码方面的压力。难怪jQuery一下子火了起来。

眼下移动应用开发人员面临可能更艰巨的挑战，这不仅是由于要处理各种各样的移动浏览器不兼容问题，还由于需要设计合理布局，以便适合移动设备所固有的各种外观尺寸和有限资源。这时候，jQuery Mobile应运而生，它自诩是“一种针对触摸而优化的Web框架，面向智能手机和平板电脑”，可以充分发挥jQuery和jQuery UI(51CTO注：查看jQuery UI实例http://jqueryui.com/)的优势。

虽然jQuery Mobile目前仍是测试版(第二个测试版在去年8月3日宣布发布)，但已经支持数量多得惊人的移动平台，包括安卓、黑莓、iOS和Windows Mobile等其他平台。同样出色的是，它还支持众多的窗口组件：由于jQuery Mobile对渐进增强(progressive enhancement)很重视，开发人员可以利用这些窗口组件，轻松创建统一的、跨移动设备的界面。务必将演示程序(51CTO注：查看演示程序地址http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/)装入到众多不同的设备上(包括你的桌面浏览器)，领略一下界面是如何变化以适合目标设备的。

此外，务必从桌面浏览器里面来查看演示程序的源代码;连刚入门的jQuery用户也会注意到该程序的代码很注重全面隔离页面布局和JavaScript驱动的功能。你会看到，整个应用程序都在一个文档里面，每个“页面”及其组成部分使用与自定义属性有关的DIV来定义。比如说：

<div id="home" target="_blank"> 
   <h1>WJGilmore, LLC</h1> 
 </div> 
 <div>   
   <p>Check back regularly for the latest information about Jason's books!</p>       
 </div> 
 <div> 
   <h1>Copyright © 2011 W.J. Gilmore, LLC</h1> 
 </div> 
/div> 

jQuery Mobile的主要特性

虽然使用jQuery Mobile的理由有多个，但是下面三个理由显得尤为突出：

• jQuery开发人员使用jQuery Mobile时会觉得驾轻就熟，那是由于两者使用共享的代码库。
• 如果目标用户群并不局限于使用某一种设备，关注跨平台兼容性这个优点很理想。
• 社区和企业的广泛参与促使像Dreamweaver CS 5.5这些广受欢迎的开发产品和像非常出色的Photo Swipe这一批值得关注的插件内置了对jQuery Mobile的支持。

jQTouch适合你吗?

那边厢，jQuery Mobile力求提供在众多移动设备上兼容的功能;这边厢，jQTouch项目而是将大部分精力投入到了支持基于WebKit的浏览器(Chrome和Safari)的设备上。因而，jQTouch应该与旨在部署到iPhone和安卓设备上的Web应用程序结合使用。支持针对WebKit而优化的动画以及旨在与移动设备的式样融为一体的多个主题。

要熟悉jQTouch的功能，最容易的办法就是通过你的移动设备或WebKit浏览器，仔细研究演示网站(51CTO注：演示网站地址http://jqtouch.com/preview/demos/main/#home)。我尤其建议查看演示程序的源代码;你会看到，与jQuery
Mobile一样， jQTouch“页面”也使用一系列DIV元素和相关属性来组装，设计人员对这种方法应该会很熟悉。

jQTouch的主要特性

虽然使用jQTouch的理由有多个，但是下面两个理由显得尤为突出：

• 虽然jQTouch同样基于jQuery，但是其侧重点主要是为基于WebKit的浏览器提供经过优化的支持。因而，如果你打算一心锁定使用基于iOS或安卓的设备的用户，那么jQTouch可能比较合适。
• 与jQuery Mobile一样，jQTouch也采用了以HTML和CSS为中心的方法来开发页面，使用JavaScript专门致力于添加事件、动画及其他功能。如果你在与设计人员合作，或者开发人员不是特别精通JavaScript，在想方设法逐步熟悉移动Web开发，那么这种方法就很吸引人。

较之与jQuery Mobile和jQTouch，Sencha Touch学起来难度相对比较复杂，不过有弊也有利：虽然比较复杂，但是带来了强大的功能。作为Sencha公司的一款双许可证(商业版和GPL/FLOSS版)产品，Sencha
Touch采用了与上述的几种移动开发框架全然不同的方法，原因在于布局和界面窗口组件是使用出色的JavaScript库构建而成的，而该JavaScript库恰好拥有丰富的实用特性，比如离线支持、独特布局和轻松制作主题的功能。

此外，Sencha Touch采取了从极其全面的角度来应对应用程序开发所固有的挑战，原因在于它支持可以完全直接开发MVC驱动的应用程序。为了形象地说明开发Sencha Touch应用程序与开发jQuery Mobile / jQTouch应用程序之间的反差到底有多明显，不妨将jQuery Mobile/jQTouch演示程序里面的源代码与用于仅仅创建和启动视口的下列Sencha Touch代码作一比较：

Ext.regApplication({ 
  name: 'App', 
  defaultUrl: 'Index/index', 
  launch: function() 
  { 
    this.viewport = new App.views.Viewport(); 
  }, 
}); 

虽然这种方法对相对不熟悉JavaScript的新手来说可能难度很大，不过我还是建议花点时间尝试一下Sencha Touch，因为直观的语法、编写清晰的文档以及众多的配套实例对于你尽快上手会大有帮助。

Sencha Touch的主要特性

虽然使用Sencha Touch的理由有多个，但是下面三个理由显得尤为突出：

• 原生的MVC架构致力于为面向框架的开发人员消除紧张，他们可能在为如何合理地组织和管理JavaScript代码而苦恼。
• Sencha开发人员已付出了很大的努力，在Sencha网站(51CTO注：Sencha网站地址http://www.sencha.com/)上发布了众多的教程和演示应用程序。
• 对于之前熟悉窗口组件工具包(想一想Swing和GTK+)的开发人员来说，窗口组件的布局和组织方面采用JavaScript驱动的方法自然很熟悉。

较之与jQuery Mobile和jQTouch，Sencha Touch学起来难度相对比较复杂，不过有弊也有利：虽然比较复杂，但是带来了强大的功能。作为Sencha公司的一款双许可证(商业版和GPL/FLOSS版)产品，Sencha
Touch采用了与上述的几种移动开发框架全然不同的方法，原因在于布局和界面窗口组件是使用出色的JavaScript库构建而成的，而该JavaScript库恰好拥有丰富的实用特性，比如离线支持、独特布局和轻松制作主题的功能。

此外，Sencha Touch采取了从极其全面的角度来应对应用程序开发所固有的挑战，原因在于它支持可以完全直接开发MVC驱动的应用程序。为了形象地说明开发Sencha Touch应用程序与开发jQuery Mobile / jQTouch应用程序之间的反差到底有多明显，不妨将jQuery Mobile/jQTouch演示程序里面的源代码与用于仅仅创建和启动视口的下列Sencha Touch代码作一比较：

Ext.regApplication({ 
  name: 'App', 
  defaultUrl: 'Index/index', 
  launch: function() 
  { 
    this.viewport = new App.views.Viewport(); 
  }, 
}); 

虽然这种方法对相对不熟悉JavaScript的新手来说可能难度很大，不过我还是建议花点时间尝试一下Sencha Touch，因为直观的语法、编写清晰的文档以及众多的配套实例对于你尽快上手会大有帮助。

Sencha Touch的主要特性

虽然使用Sencha Touch的理由有多个，但是下面三个理由显得尤为突出：

• 原生的MVC架构致力于为面向框架的开发人员消除紧张，他们可能在为如何合理地组织和管理JavaScript代码而苦恼。
• Sencha开发人员已付出了很大的努力，在Sencha网站(51CTO注：Sencha网站地址http://www.sencha.com/)上发布了众多的教程和演示应用程序。
• 对于之前熟悉窗口组件工具包(想一想Swing和GTK+)的开发人员来说，窗口组件的布局和组织方面采用JavaScript驱动的方法自然很熟悉。

读者最后总是问我应该选择哪一种框架。回答总是一样：这得看情况。毫无疑问，Sencha Touch是这种开发框架当中功能最丰富的，不过有时候学起来比较困难。话虽如此，如果你的目的仅仅是为现有的应用程序提供对用户友好的移动界面，那么jQuery
Mobile或jQTouch可能会提供一条阻力最小的道路。如果你给移动应用程序设的目标比较高，那么Sencha Touch极有可能完全值得你为此投入时间。不管你最后选择了什么样的解决方案，我都很想听听你使用后的感受!欢迎留言。

Ext.regApplication({ 
  name: 'App', 
  defaultUrl: 'Index/index', 
  launch: function() 
  { 
    this.viewport = new App.views.Viewport(); 
  }, 
});