三大移动Web开发框架

转自:http://mobile.51cto.com/web-321296.htm ,作者:W.Jason Gilmore 。

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开发,那么这种方法就很吸引人。

Sencha Touch

较之与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极有可能完全值得你为此投入时间。不管你最后选择了什么样的解决方案,我都很想听听你使用后的感受!欢迎留言。

三大移动Web开发框架

时间: 2024-08-09 00:10:02

三大移动Web开发框架的相关文章

基于MVC4+EasyUI的Web开发框架形成之旅--MVC控制器的设计

自从上篇<基于MVC4+EasyUI的Web开发框架形成之旅--总体介绍>总体性的概括,得到很多同行的关注和支持,不过上一篇主要是介绍一个总体的界面效果和思路,本系列的文章将逐步介绍其中的细节,本文主要介绍整个Web开发框架中的MVC控制器的设计.在设计之初,我就希望尽可能的减少代码,提高编程模型的统一性.因此希望能够以基类继承的方式,和我Winform开发框架一样,尽可能通过基类,而不是子类的重复代码来实现各种通用的操作. 1.登录控制的控制器基类设计 我们知道,一般我们创建一个MVC的控制

基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用

在前面介绍了两篇关于我的基于MVC4+EasyUI技术的Web开发框架的随笔,本篇继续介绍其中界面部分的一些使用知识,包括控件的赋值.取值.清空,以及相关的使用. 我们知道,一般Web界面包括的界面控件有:单行文本框.多行文本框.密码文本框.下拉列表Combobox.日期输入控件.数值输入控件.单项选择.复选框.表格控件DataGrid.树形控件.布局控件.弹出式对话框.提示信息.列表控件等,这些界面控件的操作都有哪些不同,下面我们来逐一进行介绍. <input class="easyui

基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用

很久之前,当我还在用Asp.NET开发一些行业管理系统的时候,就曾经使用这个组件作为文件的上传操作,在随笔<Web开发中的文件上传组件uploadify的使用>中可以看到,Asp.NET中如何使用这个组件进行文件上传的,当时上传文件的处理主要也是使用ashx一般处理程序来进行处理的.本文主要介绍我的Web开发框架中,在MVC4的环境中如何集成这个非常棒的文件上传组件的. 1.上传组件uploadify的说明及脚本引用 Uploadify 是 JQuery 一个著名的上传插件,利用 Flash

基于MVC4+EasyUI的Web开发框架形成之旅--框架总体界面介绍

在前面介绍了一些关于最新基于MVC4+EasyUI的Web开发框架文章,虽然Web开发框架的相关技术文章会随着技术的探讨一直写下去,不过这个系列的文章,到这里做一个总结,展示一下整体基于MVC4+EasyUI的界面效果,让大家对这款Web开发框架有一个形象的了解,界面设计以及相关思路可以借鉴提高,也可以对相关的内容进行相互探讨,共同提高. 技术特点:整个Web开发框架,界面部分采用较新的技术,包括MVC4,最新版本的EasyUI,以及zTree树形控件.Uploadify文件上传组件等模块,另外

基于MVC4+EasyUI的Web开发框架形成之旅--基类控制器CRUD的操作

在上一篇随笔中,我对Web开发框架的总体界面进行了介绍,其中并提到了我的<Web开发框架>的控制器的设计关系,Web开发框架沿用了我的<Winform开发框架>的很多架构设计思路和特点,对Controller进行了封装.使得控制器能够获得很好的继承关系,并能以更少的代码,更高效的开发效率,实现Web项目的开发工作,整个控制器的设计思路如下所示. 从上图的设计里面可以看到,我把主要能通过抽象封装的CRUD方法都放到了BusinessController<B, T>类里面,

基于MVC4+EasyUI的Web开发框架形成之旅--权限控制

我在上一篇随笔<基于MVC4+EasyUI的Web开发框架形成之旅--框架总体界面介绍>中大概介绍了基于MVC的Web开发框架的权限控制总体思路.其中的权限控制就是分为"用户登录身份验证"."控制器方法权限控制"."界面元素权限控制"三种控制方式,可以为Web开发框架本身提供了很好用户访问控制和权限控制,使得用户界面呈现菜单.Web界面的按钮和内容.Action的提交控制,均能在总体权限功能分配和控制之下. 本篇文章主要细化这三个方面

基于MVC+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts

在我们做各种应用的时候,我们可能都会使用到图表统计,以前接触过一些不同的图表控件,在无意中发现了图表控件Highcharts,其强大的功能和丰富的互动效果,令人难以忘怀.本篇主要介绍在Web开发中使用图表控件Highcharts,以及对其进行统一汉化等操作,让我们的程序功能更加丰富,内容更加美观. 1.Highcharts基础介绍 Highcharts是一个非常流行,界面美观的纯Javascript图表库.它主要包括两个部分:Highcharts和Highstock.Highcharts可以为您

基于MVC+EasyUI的Web开发框架经验总结(6)--在页面中应用下拉列表的处理

在很多Web界面中,我们都可以看到很多下拉列表的元素,有些是固定的,有些是动态的:有些是字典内容,有些是其他表里面的名称字段:有时候引用的是外键ID,有时候引用的是名称文本内容:正确快速使用下拉列表的处理,可以提高我们程序界面的美观性和友好型,本文主要介绍在我的Web开发框架以及相关的扩展Web应用中用到的一些代表性下拉列表的处理场景,希望给大家做个参考学习. 1.固定下拉列表的处理 代表性的固定列表有人员性别的处理,一般为男.女两种,而且为了方便,一般用文本直接使用,如下效果所示. 而它们的页

基于MVC+EasyUI的Web开发框架经验总结(8)--实现Office文档的预览

在很多文章里面,曾经有一些介绍Office文档预览查看操作的,有些通过转为PDF进行查看,有些通过把它转换为Flash进行查看,但是过程都是曲线救国,真正能够简洁方便的实现Office文档的预览的还是比较少,这里的Office文档包括了Word.Excel.PPT文档.本文介绍两种方式,一种方式是通过在线预览的方式,利用微软的平台进行Office文档的在线查看:一种是把Office文档生成HTML文件后进行查看.然后对比他们的优缺点,并进行总结. 1.利用微软的平台进行Office文档的在线查看