前端开发框架对比（工具能够从框架中找）（好的框架，事半功倍）

前端开发框架对比（工具能够从框架中找）（好的框架，事半功倍）

1、总结

一句话总结：（工具能够从框架中找），好的框架，事半功倍

一、炫酷内网开发框架？

强大的功能，丰富的控件库，华丽的效果也使得 Ext JS 成为内网开发利器。

二、Bootstrap地位？

桌面端老大

三、无缝调用 Google 地图等 Google 应用框架？

Sencha GXT

四、国内外前端框架水平对比？

应该说 Kissy 是目前国内开发的最好的前端框架，在实际使用中也通过了检验，但跟国外成熟框架相比仍是有必定差距。

五、游戏开发？

Sencha Ext JS，在 Sencha 看来，用 Animator 作游戏都是轻松拿下。

 

由此咱们能够看到，对于桌面端，目前 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 的技术开发移动应用。不过这种混合式开发模式兴起时间并不长，还在不断发展中。

 

框架名称	主要 平台	基础技术	布局	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	-	-	少	少

 

 

2、前端开发框架对比

本文选取了 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 中甚至放弃了对 IE六、IE7 的支持。不过在国内，根据 CNZZ 的统计，目前 IE 的占有率仍然达到 46.98%，同时大量国内浏览器也是采用 IE 内核。这让咱们在使用 Bootstrap 的时候老是有所顾忌。在 Bootstrap2 上面，能够经过 BSIE 项目增长对 IE6 的支持，可是也不能支持所有效果。

在框架扩展方面，随着 Bootstrap 的普遍使用，扩展插件和组件也很是丰富，涉及显示组件、兼容性、图表库等各个方面。

图 1. Bootstrap 的布局与效果示例

 

jQuery UI

jQuery UI（http://jqueryui.com/）是 jQuery 项目组中对桌面端的扩展，包括了丰富的控件和特效，与 jQuery 无缝兼容。同时，jQuery UI 中预置了多种风格供用户选择，避免了千篇一概。若是您对预置的风格不满意，还能够经过 jQuery UI 的可视化界面，自助对 jQuery UI 的显示效果进行配置，很是方便，够高端大气上档次。

图 2. jQuery UI 的效果示例

 

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 的效果示例

 

 

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 的效果示例

 

 

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 的效果示例

 

 

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 的效果示例

 

 

Dojo Mobile

Dojo Mobile(http://dojotoolkit.org/features/mobile)是 Dojo 推出的移动端框架，表现也很不俗。在布局，控件，特效方面都下了很多功夫。并支持与所用平台匹配的风格设置，若是您不喜欢还能够引用不一样 CSS 文件来实现不一样效果。

除了能够在移动端的浏览器上使用，Dojo Mobile 也支持与 PhoneGap 无缝链接，能够经过 Dojo Mobile 开发移动 App 应用。同时也具备不错的响应性（在宽屏和窄屏上的显示效果不一样）。

图 7. Dojo Mobile 在 IPhone 上的效果示例

 

Mootools

Mootools(http://mootools.net)能够说是目前最轻量级的前端框架，内核 js 压缩完以后只有 8k，完整版压缩以后也不到 100k，远比其余框架要小不少。Mootools 有本身的面向对象设计的内核 Mootools Core。伴随着最小的文件大小，框架的功能比其余框架也要弱很多，只有在控件和特效上有少许支持。

图 8. Mootools 效果示例

 

 

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 的效果示例

 

Foundation

Foundation（http://foundation.zurb.com/）是 ZURB 旗下的主要面向移动端的开发框架，可是也保持对桌面端的兼容，目前已经更新到 Foundation4 版本。框架主要采用 jQuery 和 Zepto（语法酷似 jQuery，但比 jQuery 更轻量级）做为 JavaScript 基础，CSS 则基于 Sass、Compass，有着很好的扩展性，并有着丰富的布局，版式和多种多样的控件与特效，很是方便开发者使用。控件的响应式效果也帮助用户识别不一样浏览器效果。

ZURB 做为一个完整的项目组，包括不少原型、设计、构建、分析等一系列工具，为用户提供完整的服务。固然，有不少服务是要收费的。

Foundation 主要以移动端风格为主，如图 10 所示。

图 10. Foundation 的风格示例

 

 

 

Kissy

Kissy（http://docs.kissyui.com）是阿里集团自主开发的前端框架，目前在淘宝网、一淘网等阿里系网站上获得很多应用。Kissy 框架模仿 jQuery 编写了本身的内核 Kissy Core，用于对 DOM 的解析，Ajax 处理等。同时，有着丰富的控件，并实现了一些动画效果和特效。一样，在 Kissy 的控件中也能够看到 Bootstrap 等国外框架的影子。此外，Kissy abc 项目工具能够帮助用户实现自动化构建，并有不少扩展组件方便用户使用。

应该说 Kissy 是目前国内开发的最好的前端框架，在实际使用中也通过了检验，但跟国外成熟框架相比仍是有必定差距。

图 11. Kissy 的效果示例

 

Kissy Mobile

Kissy Mobile（http://mobile.kissyui.com）是 Kissy 推出的移动版框架，意在开发出能够在移动浏览器和移动应用上均可以使用的框架，不过目前项目内容还比较少，控件和特效也比较少，也不具备响应式的效果。

图 12. Kissy Mobile 效果示例

 

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 的技术开发移动应用。不过这种混合式开发模式兴起时间并不长，还在不断发展中。

 

 

结束语

上面只是当前涌现出的前端开发框架中的一部分，相信还有更多优秀的框架还在研发中心，到此咱们对“百花齐放”这一词有了更直观的感受，也说明在沉寂了多年以后，前端开发的工做愈来愈得到你们的重视，也注定会愈来愈繁荣。文中的建议只表明笔者我的的初浅意见，你们最终的选择还要结合实际的开发需求。