Ajax前端开发框架对比

本文选取了 Bootstrap、jQuery UI、jQuery Mobile、Sencha ExtJS、Sencha
Touch、Sencha GXT、Dojo、Dojo
Mobile、Mootools、Foundation、YUI、Kissy、QWrap 等 16
单国内外前端开发框架进行初步的横向比较,可以视作大家挑选前端开发框架的开参考。

凑近几年就 jQuery、Ext 以及 CSS3 的开拓进取,以 Bootstrap
为代表的前端开发框架而雨后春笋一般挤入视野,可谓应接不暇。不论是桌面浏览器端还是倒端都涌现起多美妙的框架,极大丰富了开销素材,也利于了大家的出。这些框架各有特点,本文对这些框架进行初步的介绍与比,希望能为大家选择框架提供一些相助,也为继续详细研究这些框架的抛砖引玉。

JavaScript & CSS

时前端框架主要用 JavaScript+CSS 模式,我们先来询问一下当下二者。

事先准备的 JavaScript

眼前主流的 JavaScript 框架排名中,jQuery 和 Ext
可到底佼佼者,获得了用户之广大好评。国内的一对框架很多为是人云亦云 jQuery 对
JavaScript 进行了包,不过这些框架的鼻祖 YUI 还是坚持用自己之
JavaScript 类库。

jQuery 是时下为此之太多的前端 JavaScript 类库,据初步统计,目前 jQuery
的占有率已经过 46%,它算比较轻量级的类库,对 DOM
的操作也正如便于好,支持之效应和控件也非常多。同时,基于 jQuery
有众多扩展项目,包括 jQuery UI(jQuery 支持的有的控件和效益框架)、jQuery
Mobile(移动端的 jQuery 框架)、QUnit(JavaScript 的测试框架)、Sizzle(CSS
的取舍引擎)。这些上使得 jQuery
框架进一步完整,更令人兴奋的凡,这些扩展及当前之框架基本还是相当的,可以陆续使用,使得前端开发更加丰富。

Ext 是 Sencha 公司强调的 JavaScript 类库,相比 jQuery,Ext JS
更重量级,动辄数兆的文本,使得 Ext
在外网使用的时会担心多。但是,另一方面,在 Ext JS 庞大的文件背后是
Ext JS 强大的意义。Ext JS
的控件和法力可以说强大和华丽及了深受人口发指的水准。图表、菜单、特效,Ext JS
的控件库非常丰富,同时其的并行也异常强劲,独立靠 Ext JS
几乎就是可替控制层完成于客户之相互。强大的职能,丰富的控件库,华丽的职能呢让
Ext JS 成为内网开发利器。

框架鼻祖 YUI 也来协调的 JavaScript 类库,DOM
操作和效果处理吧尚比较便利,功能跟控件也甚齐全,但是对比 jQuery 和 Ext
JS 显得比温柔一些。随着 Yahoo!的衰老,YUI
的呼声也逐年被新打的框架淹没,想来也吃人心疼。

除去上述的老三独 JavaScript 类库,还有 Dojo、Prototype、Mootools
等诸多类库,由于本文讨论的框架多用上述框架,所以任何框架暂无讨论。

先准备的 CSS

随着 CSS3
的生产,浏览器对体的支撑逾上了一个层次,效果进一步突出。各框架为困扰出出基于
CSS3 的体制,让框架进一步长。

对此 CSS3,更是推出了有的预编译的扩展框架,主要是 LESS、Sass 和
Compass(Compass 是依据 Sass
的扩张)。可以一本万利地拓展变量定义,格式引用,函数定义等操作,并措了汪洋底功能。让你的
CSS 开发效率提升一个水准。根据 Chris Coyier 的比较,Sass+Compass
几乎完胜
LESS。有趣味的读者可以自动参考http://css-tricks.com/sass-vs-less/。由于
Sass 是用 Ruby 开发之,所以也得相应的 Ruby 环境将文件编译成 CSS 文件。

 

回页首

国内外前端开发框架对比

先是我们先对当下国内外主流前端开发框架做一个主导的了解,之后更指向她们开展一个直观的对立统一。

Bootstrap

Bootstrap(http://www.bootcss.com)是时下桌面端最为盛行的出框架,一经
Twitter 推出,势不可挡。Bootstrap 主要对桌面端市场,Bootstrap3
提出活动优先,不过当下桌面端依然还是 Bootstrap 的第一目标市场。Bootstrap
主要基于 jQuery 进行 JavaScript 处理,支持 LESS 来举行 CSS
的壮大。如果想只要在 Bootstrap 框架中利用 Sass,则需经
Bootstrap-Sass(https://github.com/thomas-mcdonald/bootstrap-sass)项目增多兼容。Bootstrap
框架在布局、版式、控件、特效方面还死给人乐意,都预置了长的机能,极大便利了用户支付。在风格设置点,还待用户以下载时手动设置,可配备粒度非常细致,相应也于繁琐,不顶直观,需要针对
Bootstrap 非常熟悉配置起才得心应手。

在浏览器兼容性方面,目前 Firefox, Chrome, Opera, Safari,
IE8+等主流浏览器 Bootstrap 都提供支持。但是在 IE 支持地方略发短板,对
IE6 和 IE7 支持都无是专程优秀。在 Bootstrap3 中竟扬弃了对 IE6、IE7
的支持。不过以境内,根据 CNZZ 的统计,目前 IE 的占有率还达到
46.98%,同时大量境内浏览器也是采取 IE 内核。这让咱们在使用 Bootstrap
的时节总是有所顾忌。在 Bootstrap2 上面,可以经 BSIE 项目多对 IE6
的支撑,但是也未可知支撑一切效。

在框架扩展方面,随着 Bootstrap
的泛利用,扩展插件与零部件为非常丰富,涉及显示器件、兼容性、图表库等各个方面。

图 1. Bootstrap 底布局与力量示例

Ajax 1

jQuery UI

jQuery UI(http://jqueryui.com/)是 jQuery
项目组中对桌面端的壮大,包括了丰富的控件和特效,与 jQuery
无缝兼容。同时,jQuery UI
中预置了多风格供用户挑选,避免了同。如果您对预置的风骨不称心,还好透过
jQuery UI 的可视化界面,自助对 jQuery UI
的展示效果进行配备,非常便宜,够高端大气上档次。

希冀 2. jQuery UI 的效力示例

Ajax 2

jQuery Mobile

jQuery Mobile (http://jquerymobile.com)是
jQuery 项目针对活动端的恢弘,目前支撑 iOS, Android, Windows Phone, Black
Berry
等主流平台。具体支持情况好瞻仰http://jquerymobile.com/gbs/。另外
jQuery Mobile 在布局,控件和特效方面都颇慷慨。在风格方面,与 jQuery UI
类似,除了预置的作风效果外,还支持用户可视化配置的功用。

可圈可点的凡,jQuery Mobile 还与 Codiqa
无缝连接,用户可一直通过拖拽实现对界面的统筹,以及代码的生成。

图 3. jQuery Mobile 的功力示例

Ajax 3

Ajax 4

Sencha Ext JS

Sencha Ext JS(http://www.sencha.com/products/extjs)是 Sencha 基于
Ext JS
开发的前端框架,内容极其丰富,控件、特效等支撑特别非常丰富,表格、图画、报告、布局、甚至数连接,无所不包。只有你想不交,没有其办未至。基于
Sass 和 Compass,使得用户对格式的改动和特效做更加有益。此外,Sencha
有增长的成品线,Sencha Desktop Packager
可以于您的采取具有桌面应用的功效, Sencha Animator 基于 CSS3
更加方便用户指向特效的做,不光支持桌面端,移动端更是不在话下。在 Sencha
看来,用 Animator 做打都是轻松破。Sencha Space 是因
HTML5,提供制作过平台利用之利器。同时 Sencha Ext JS
对主流浏览器的支持啊酷优良。

Sencha Ext JS 有着耀眼的英雄,但是光芒背后总有点阴影。除了之前提到的
Ext JS 太过重量级之外,商业化是 Sencha 的旁一样将利剑。帮助 Sencha
披荆斩棘的时,也管非常把的码农砍在马下。Sencha
规定,凡是商业化的施用,都待付费。另外,Sencha
的拉扯产品呢整整收款,否则只能是试用版。这里的助产品,其实不外乎了端提到的备产品。

图 4. Sencha Ext JS 之效应示例

Ajax 5

Ajax 6

Sencha Touch

Sencha Touch(http://www.sencha.com/products/touch)是 Sencha
面向移动端的付出框架,基于 HTML5
技术,保证了对多数动平台的支持。Sencha Touch
包括丰富的布局,控件和特效。并且 Sencha Touch
对响应式支持的死好,在不同装备及,甚至以横屏和竖屏时还见面展示不同之功力。这种功能是
Sencha Touch 控件自适应的。Sencha Touch
也落实了针对性绝大多数挪装备的支撑。Sencha Architect
是本着走端的可视化编辑工具,有着不朽之成效,但也有着难得的身价。

与此同时 Sencha Touch 也支撑混合式 App 创建,也就算是依据 Web 技术,配合
PhoneGap (http://phonegap.com/)或者
Cordova(http://cordova.apache.org/)之类的工具,就可以构建移动应用。Sencha
Touch、jQuery Mobile、Foundation
这些前端框架负责界面及法力的编排,PhoneGap、Cordova 框架则允许通过
JavaScript
和其它接口对手机设备的调用,开创了初的运动端支付模式,真正贯彻了运动端的跨平台开发。

Sencha GXT

Sencha GXT(http://www.sencha.com/products/gxt/)是 Sencha 对 Google
的 Web Toolkit 框架的壮大。可以支撑通过 Java 文件的分析,生成 HTML5
页面文件,可以同 Java
环境无缝集成。有着丰富的控件和特效,并且可无缝调用 Google 地图等
Google 应用。虽然开发时不是特别直观,但是意义还是非常丰富的。与 Sencha
Ext JS 丝毫不显弱势。

图 5. Sencha GXT 之功能示例

Ajax 7

Ajax 8

Dojo

时唯一会同 Sencha Ext JS 一较高下的框架就惟有
Dojo(http://dojotoolkit.org)了。抱在 IBM,
VMWare 等很多生腿,Dojo 的同一皱眉一乐都格外惹人注目。Dojo
项目的产品线和力量为专程长。首先,Dojo 有友好之 DOM 解析器 Nano,是
DOM 解析和拍卖的基本。此外,Dojo 的 Web
框架来非常丰富的布局、版式、控件以及特效,对大多语言和图片的扩充支持都深好,并支持对地图的操作。大家可翻她的示范(http://demos.dojotoolkit.org/demos/),与
Ext JS 的功效开展比。此外,Dojo 还有好的图形化设计和开发工具
Maqetta,可以经过拖拽实现设计。Dojo
的风骨设置不是当下载的时刻指定的,而是经过引用不同的 CSS 格式来促成。

Dojo 虽然于 jQuery 重量级无丢掉,但是比 Ext JS
还是轻量级一些,至少在文件大小上。另外,Dojo 还有自己的 CDN
机制,只要经部署,就足以针对 Dojo 文件进行 CDN。由于起 IBM,Oracle
等大佬的支持,Dojo 在同 Spring 等现有框架支持方面呢见得不可开交优秀。

图 6. Dojo 的效能示例

Ajax 9

Ajax 10

Dojo Mobile

Dojo Mobile(http://dojotoolkit.org/features/mobile)是 Dojo
推出的倒端框架,表现也充分尊重。在布局,控件,特效方面还生了成千上万功力。并支持及所用平台匹配的品格设置,如果您不希罕尚可引用不同
CSS 文件来促成不同功效。

除却可以运动端的浏览器上以,Dojo Mobile 也支撑与 PhoneGap
无缝连接,可以由此 Dojo Mobile 开发移动 App
应用。同时为享有无可争辩的响应性(在宽屏和窄屏上的显示力量不同)。

希冀 7. Dojo Mobile 在 IPhone 上的功力示例

Ajax 11

Mootools

Mootools(http://mootools.net)可以说凡是当前极其轻量级的前端框架,内核
js 压缩了事后只有 8k,完整版本减后呢不交
100k,远较其它框架而稍博。Mootools 有温馨的面向对象设计之内核 Mootools
Core。伴随着极度小之文件大小,框架的效用比较任何框架为要是弱不丢,只有以控件和特效及发出少量支撑。

图 8. Mootools 效果示例

Ajax 12

Ajax 13

Prototype JS

Prototype
JS(http://prototypejs.org)也是一个简短之框架,有着丰富的对准
DOM 操作的效力,对 Ajax 和 JSON 支持得都生好,在动上及 jQuery
相比吗相差不多。作为 Rails 默认的 JavaScript
框架,相信对周边开发人员也死有借鉴意义的。

当扩充方面,Scriptaculous(http://script.aculo.us/)对 Prototype JS
进行了增长的恢宏,主要是在动画特效、Ajax 控制、DOM
操作、单元测试方面等。

YUI

YUI(http://yuilibrary.com)作为开源前端框架的始祖,在框架达成的功力非常之死。有着自己的分析
DOM 的基本框架,并且于特效、动画、图表等地方还发长的扩充,并可经过
YQL 直接看 Yahoo!的数码。在用户时时以的成效方面都有所不错的变现。

同 jQuery 灵活的语法相比,YUI
显得更为中规中矩,在代码组织、结构及模式方面都更强调,更反映出工程师的谨慎。同时
YUI 也保有丰富的出品线,拥有测试框架 YUITest、文档生成框架
YUIDoc、自动构建框架 YUI Build,满足项目开支各方面的求。随着
Yahoo!的没落,YUI
也深感逐渐步入暮年,但作为相当严谨完整的前端框架鼻祖,足以秒杀其他。

希冀 9. YUI 的成效示例

Ajax 14

Foundation

Foundation(http://foundation.zurb.com/)是 ZURB
旗下之显要面向移动端的付出框架,但是也保障对桌面端的匹配,目前就更新到
Foundation4 版本。框架主要用 jQuery 和 Zepto(语法酷似 jQuery,但于
jQuery 更轻量级)作为 JavaScript 基础,CSS 则基于
Sass、Compass,有着充分好之扩展性,并有所丰富的布局,版式和形形色色的控件与特效,非常便利开发者使用。控件的响应式效果啊帮助用户识别不同浏览器效果。

ZURB
作为一个一体化的类组,包括过多原型、设计、构建、分析等同样多样工具,为用户提供整体的劳务。当然,有为数不少劳务是如收费的。

Foundation 主要因动端风格为主,如图 10 所显示。

图 10. Foundation 的风骨示例

Ajax 15

Ajax 16
Ajax 17

Kissy

Kissy(http://docs.kissyui.com)是阿里集团独立开发的前端框架,目前以淘宝网、一淘网等阿里系网站上取得多使。Kissy
框架模仿 jQuery 编写了温馨之内核 Kissy Core,用于对 DOM 的剖析,Ajax
处理等。同时,有着丰富的控件,并促成了部分动画效果以及特效。同样,在 Kissy
的控件被呢得看出 Bootstrap 等国外框架的阴影。此外,Kissy abc
项目工具得以帮忙用户实现自动化构建,并起无数恢弘组件方便用户用。

应该说 Kissy
是现阶段境内开的极度好的前端Ajax框架,在事实上利用被呢经过了检验,但与国外成熟框架相比要来自然差异。

图 11. Kissy 的功力示例

Ajax 18

Kissy Mobile

Kissy
Mobile(http://mobile.kissyui.com)是
Kissy
推出的移位版框架,意在支付有可以在移动浏览器与运动应用上都足以利用的框架,不过当下种内容还于少,控件和特效为正如少,也不富有响应式的机能。

图 12. Kissy Mobile 效果示例

Ajax 19

Qwrap

Qwrap(http://www.qwrap.com/)是百度有啊团队产的 JavaScript
框架,现在受收入 360,被广泛应用与 360 产品面临。Qwrap 综合
jQuery、Prototype、YUI 特点,对 JavaScript 进行了包装。但是,如果要是将
Qwrap 算成一个前端开发框架或略牵强,因为除此之外 JavaScript
类库之外,Qwrap 基本乏善可陈,还处在发展等。

Tangram

Tangram(http://tangram.baidu.com)是百度推出的其余一个
JavaScript 框架,被广泛应用于百渡过息息相关外来下的活,与 Qwrap 类似,Tangram
也只能算一个 JavaScript 框架,对 JavaScript
做了很多扩展,但是当前端开发框架或显示比软。基于这,百度公司延续出了片只因
Tangram 的类型,Magic 和 Baidu Template。Magic 项目基于 Tangram
对控件和特效都做了扩大,增加了 10 单新的控件。Baidu Template
则又多是本着移动端支付的壮大,目前于大多数主流移动装备以及操作系统还有支撑。

摸底了这些框架,我们打阳台、基础技术、布局、CSS、控件、特效及作风设置等几乎单方面来对她进行一个主干比较:

表 1.国内外主流前端开发框架对比
框架名称 主要
平台
基础技术 布局 CSS
版式
控件 特效 风格设置
桌面端 jQuery, LESS 丰富 丰富 丰富 丰富 手动配置
桌面端 jQuery 丰富 丰富 预置/可视化配置
移动端 jQuery 丰富 丰富 丰富 预置/可视化配置
桌面端 Ext JS, Sass 丰富 极丰富 极丰富 预置
移动端 HTML5 丰富 丰富 丰富
桌面端 Java, HTML5 丰富 丰富 丰富
桌面端 Dojo Nano 丰富 丰富 极丰富 极丰富 CSS 代码
Mobile 移动端 Dojo Nano 丰富 丰富 丰富 内置与移动端匹配
桌面端 Mootools Core 少量 少量
桌面端 Prototype 少量 丰富
桌面端 YUI 丰富 丰富 丰富  
移动端 jQuery/Zepto, Sass 丰富 丰富 丰富 丰富  
桌面端 Kissy Core 丰富
移动端 Kissy
桌面端 QWrap  
桌面端 Tangram  

透过我们好观看,对于桌面端,目前 Bootstrap 和 jQuery UI
已经足以满足大多数之开需要,也以业界得到了常见的利用,有着丰富的零件和扩展,以及相对简单的语法和操作。应本着咱们的主干需要已经足够了。如果你对前者界面的职能来较大的求,希望可以利用像结构树这样比较复杂的控件,建议您考虑
Dojo,抱了即多年底股也非是白抱的,效果或很正确的。对于,局域网的采取,还得考虑
Sencha Ext JS
框架,效果更加激动,但是本着网的要求也更胜似。如果这些还是无克满足你内心之狂野,那只能建议你使用
Flex 或者 SilverLight
了。相反,如果您对网络快好快,希望物色一个迷您并且职能对的框架,那
Mootools 会是公对的选取。如果你特别怀旧,也可行使
YUI,虽然曲线不足够骚,但是内容很丰富。如果您是一个 Ruby on Rails
的开发人员,建议乃可预先看一下 Prototype
框架,毕竟是默认的框架。如果你对点说及的框架都未令人满意,那建议乃体验一下国内的框架一段时间,然后又回过头来看刚刚说及之框架,相信你得会生出雷同种植豁然开朗的发。

于移动端的以,jQuery Mobile, Foundation 依然是轻量级选择,Dojo
Mobile 和 Sencha Touch 会为而提供更强的作用。同时,您还可与
PhoneGap 和 Cordova 框架结合使用,利用 Web
的技术开发移动采用。不过这种混合式开发模式起时并无长,还于不停上扬遭遇。

 

回页首

结束语

地方只是目前涌现起的前端开发框架中之等同组成部分,相信还有复多美的框架还在研发核心,到是我们针对“百花齐放”这无异乐章有了重直观的感觉到,也说明在万籁俱寂了多年从此,前端开发的做事更获得大家之厚,也注定会尤其发达。文中的提议只有表示作者个人的初浅意见,大家最终的选还要结合实际的支出需要。

相关文章