前端开发框架相比较

本文选择了 Bootstrap、jQuery UI、jQuery Mobile、Sencha ExtJS、Sencha
Touch、Sencha GXT、Dojo、Dojo
Mobile、Mootools、Foundation、YUI、Kissy、QWrap 等 15个国内外前端开发框架进行起首的横向比较,能够看作大家挑选前端开发框架的上马参考。

近几年随着 jQuery、Ext 以及 CSS3 的提高,以 Bootstrap
为代表的前端开发框架如一日千里般挤入视野,可谓应接不暇。不论是桌面浏览器端还是移动端都涌现出很多美艳的框架,一点都不小丰硕了费用素材,也有利于了大家的费用。那个框架各有特点,本文对这几个框架实行开端的介绍与比较,希望能够为我们选拔框架提供一些相助,也为三番八回详细研讨那些框架的投石问路。

JavaScript & CSS

近年来前端框架主要选拔 JavaScript+CSS 方式,大家先来询问一下那两者。

预准备之 JavaScript

近年来主流的 JavaScript 框架排行中,jQuery 和 Ext
可算是佼佼者,获得了用户的周边好评。国内的局地框架很多也是模拟 jQuery 对
JavaScript 实行了包装,不过这么些框架的鼻祖 YUI 仍然持之以恒用自身的
JavaScript 类库。

jQuery 是日前用的最多的前端 JavaScript 类库,据初叶总括,如今 jQuery
的占有率已经超先生过 59%,它毕竟相比较轻量级的类库,对 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
的生产,浏览器对体制的支撑特别上了3个层次,效果越来越独立。各框架也骚扰开发出基于
CSS3 的体裁,让框架进一步丰富。

对此 CSS3,更是推出了一些预编写翻译的壮大框架,首借使 LESS、Sass 和
Compass(Compass 是依据 Sass
的扩充)。能够便宜地拓展变量定义,格式引用,函数定义等操作,并放置了多量的成效。让您的
CSS 开发功能升高一个水平。依照 克莉丝 Coyier 的可比,Sass+Compass
大约完胜
LESS。有趣味的读者能够自动参考http://css-tricks.com/sass-vs-less/。由于
Sass 是用 Ruby 开发的,所以也急需相应的 Ruby 环境将文件编写翻译成 CSS 文件。

 

回页首

国内外前端开发框架比较

先是我们先对近年来国内外主流前端开发框架做3个主导的打听,之后再对她们开始展览一个直观的对待。

Bootstrap

Bootstrap(http://www.bootcss.com)是现阶段桌面端最为流行的付出框架,一经
推特 推出,势不可挡。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 中居然放任了对 IE⑥ 、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, BlackBerry
等主流平台。具体协理情况能够参见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/Ajax,)之类的工具,就能够创设移动应用。Sencha
Touch、jQuery Mobile、Foundation
那一个前端框架负责界面和意义的编辑,PhoneGap、科尔多瓦 框架则允许通过
JavaScript
和其它接口对手提式有线电话机设备的调用,开创了新的移动端支出情势,真正落到实处了运动端的跨平台开发。

Sencha GXT

Sencha GXT(http://www.sencha.com/products/gxt/)是 Sencha 对 谷歌(Google)的 Web Toolkit 框架的增加。能够支撑通过 Java 文件的解析,生成 HTML5
页面文件,可以与 Java
环境无缝集成。有着丰裕的控件和特效,并且能够无缝调用 谷歌 地图等
谷歌(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 在 苹果手提式有线电话机 上的作用示例

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
作为1个完整的档次组,包蕴不少原型、设计、营造、分析等一名目繁多工具,为用户提供全体的劳务。当然,有广大劳务是要收费的。

Foundation 首要以运动端风格为主,如图 10 所示。

图 10. Foundation 的品格示例

Ajax 15

Ajax 16
Ajax 17

Kissy

Kissy(http://docs.kissyui.com)是Ali公司独立开发的前端框架,如今在Taobao网、一淘网等阿里系网站上赢得广大应用。Kissy
框架模仿 jQuery 编写了和谐的内核 Kissy Core,用于对 DOM 的解析,Ajax
处理等。同时,有着足够的控件,并贯彻了一部分卡通效果和特效。同样,在 Kissy
的控件中也能够看来 Bootstrap 等国外框架的阴影。其它,Kissy abc
项目工具得以帮忙用户完成自动化创设,并有好多恢弘组件方便用户选择。

应当说 Kissy
是方今国内开发的最棒的前端框架,在实质上选用中也由此了查实,但跟国外成熟框架相比照旧有早晚距离。

图 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
也不得不算是3个 JavaScript 框架,对 JavaScript
做了广大恢弘,但是作为前端开发框架依旧呈现比较薄弱。基于此,百度公司继续生产了四个基于
Tangram 的项目,Magic 和 Baidu Template。Magic 项目基于 Tangram
对控件和特效都做了增添,扩充了 10 个新的控件。Baidu Template
则越来越多是对准移动端支付的增添,近期对于大部分主流移动装备和操作系统都有帮衬。

问询完这一个框架,大家从阳台、基础技术、布局、CSS、控件、特效和作风设置等多少个地方来对它们进行3个为主相比较:

表 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
的技术开发移动应用。不过那种混合式开发方式兴起时间并十分短,还在持续开拓进取中。

 

回页首

结束语

上边只是近来涌现出的前端开发框架中的一有的,相信还有越多美丽的框架还在研究开发核心,到此大家对“百花齐放”这一词有了更直观的感到,也印证在静谧了连年自此,前端开发的劳作尤其获得我们的信赖,也尘埃落定会愈发强盛。文中的建议只表示作者个人的初浅意见,大家最后的采纳还要结合实际的付出需求。

相关文章