前端开发框架相比较

正文拔取了 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 开发作用进步一个程度。依据 克里斯 Coyier 的可比,Sass+Compass
大概完胜
LESS。有趣味的读者可以活动参考http://css-tricks.com/sass-vs-less/。由于
Sass 是用 Ruby 开发的,所以也急需相应的 Ruby 环境将文件编译成 CSS 文件。

 

回页首

国内外前端开发框架比较

先是大家先对眼前国内外主流前端开发框架做一个主干的摸底,之后再对她们开展一个直观的比较。

Bootstrap

Bootstrap(http://www.bootcss.com)是眼前桌面端最为流行的付出框架,一经
推文(Tweet) 推出,势不可挡。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 的布局与成效示例

图片 1

jQuery UI

jQuery UI(http://jqueryui.com/)是 jQuery
项目组中对桌面端的伸张,包罗了增进的控件和特效,与 jQuery
无缝包容。同时,jQuery UI
中预置了多种风格供用户挑选,幸免了一致。即使你对预置的风骨不称心,还足以经过
jQuery UI 的可视化界面,自助对 jQuery UI
的来得效果进行布置,相当有利于,够高端大气上档次。

图 2. jQuery UI 的法力示例

图片 2

jQuery Mobile

jQuery Mobile (http://jquerymobile.com)是
jQuery 项目对运动端的扩大,近日支撑 iOS, Android, Windows Phone, 布莱克Berry
等主流平台。具体帮衬景况可以参见http://jquerymobile.com/gbs/。另外jQuery Mobile 在布局,控件和特效方面都很慷慨。在作风方面,与 jQuery UI
类似,除了预置的风格效果之外,还援救用户可视化配置的效果。

可圈可点的是,jQuery Mobile 还与 Codiqa
无缝连接,用户能够平素通过拖拽完结对界面的设计,以及代码的浮动。

图 3. jQuery Mobile 的功能示例

图片 3

图片 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 的功效示例

图片 5

图片 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 对 谷歌的 Web Toolkit 框架的增加。能够援救通过 Java 文件的解析,生成 HTML5
页面文件,可以与 Java
环境无缝集成。有着丰盛的控件和特效,并且可以无缝调用 谷歌 地图等
谷歌(Google) 应用。即便开发时不是越发直观,可是意义仍旧格外丰盛的。与 Sencha
Ext JS 丝毫不显弱势。

图 5. Sencha GXT 的效率示例

图片 7

图片 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 的功用示例

图片 9

图片 10

Dojo Mobile

Dojo Mobile(http://dojotoolkit.org/features/mobile)是 Dojo
推出的活动端框架,表现也很尊重。在布局,控件,特效方面都下了累累功力。并接济与所用平台匹配的风骨设置,如若您不爱好还足以引用差距CSS 文件来兑现不相同成效。

除了可以在活动端的浏览器上应用,Dojo Mobile 也扶助与 PhoneGap
无缝连接,可以通过 Dojo Mobile 开发活动 App
应用。同时也兼具无可争执的响应性(在宽屏和窄屏上的来得效果不一样)。

图 7. Dojo Mobile 在 三星手机 上的作用示例

图片 11

Mootools

Mootools(http://mootools.net)可以说是现阶段最轻量级的前端框架,内核
js 压缩完未来唯有 8k,完整版压缩之后也不到
100k,远比其余框架要小很多。Mootools 有和好的面向对象设计的内核 Mootools
Core。伴随着小小的的文件大小,框架的职能比任何框架也要弱不少,唯有在控件和特效上有少量帮衬。

图 8. Mootools 效果示例

图片 12

图片 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 的功用示例

图片 14

Foundation

Foundation(http://foundation.zurb.com/)是 ZURB
旗下的严重性面向移动端的开发框架,不过也保持对桌面端的匹配,近日曾经更新到
Foundation4 版本。框架紧要行使 jQuery 和 Zepto(语法酷似 jQuery,但比
jQuery 更轻量级)作为 JavaScript 基础,CSS 则基于
Sass、Compass,有着很好的扩大性,并拥有丰盛的布局,版式和各式各类的控件与特效,卓殊有利于开发者使用。控件的响应式效果也协助用户识别不一样浏览器效果。

ZURB
作为一个完好的品类组,包蕴不少原型、设计、构建、分析等一体系工具,为用户提供全体的服务。当然,有那多少个劳务是要收费的。

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

图 10. Foundation 的风格示例

图片 15

图片 16
图片 17

Kissy

Kissy(http://docs.kissyui.com)是阿里公司自主开发的前端框架,近期在Taobao网、一淘网等阿里系网站上获取不少用到。Kissy
框架模仿 jQuery 编写了祥和的内核 Kissy Core,用于对 DOM 的辨析,Ajax
处理等。同时,有着丰硕的控件,并促成了有些卡通效果和特效。同样,在 Kissy
的控件中也能够见见 Bootstrap 等国外框架的阴影。其余,Kissy abc
项目工具得以支持用户落成自动化构建,并有无数恢弘组件方便用户选用。

应当说 Kissy
是眼下境内开发的最好的前端框架,在其实应用中也由此了印证,但跟国外成熟框架相比依然有一定出入。

图 11. Kissy 的功能示例

图片 18

Kissy Mobile

Kissy
Mobile(http://mobile.kissyui.com)是
Kissy
推出的移位版框架,目的在于支付出可以在运动浏览器和运动应用上都得以应用的框架,可是当下项目内容还相比较少,控件和特效也正如少,也不富有响应式的功效。

图 12. Kissy Mobile 效果示例

图片 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
的技术开发移动应用。然而那种混合式开发格局兴起时间并不长,还在持续向上中。

 

回页首

结束语

地点只是近来涌现出的前端开发框架中的一有的,相信还有更加多美观的框架还在研发主旨,到此大家对“百花齐放”这一词有了更直观的感到,也作证在安静了连年之后,前端开发的做事越来越拿到大家的赏识,也尘埃落定会越发兴旺发达。文中的提议只表示作者个人的初浅意见,我们最终的精选还要结合实际的费用须求。

相关文章