前端开发框架对比

近几年随着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。有兴趣的读者可以自行参考/sass-vs-less/。由于Sass 是用Ruby 开发的，所以也需要相应的Ruby 环境将文件编译成CSS 文件。

回页首国内外前端开发框架对比

首先我们先对目前国内外主流前端开发框架做一个基本的了解，之后再对他们进行一个直观的对比。

Bootstrap

Bootstrap（）是目前桌面端最为流行的开发框架，一经Twitter 推出，势不可挡。Bootstrap 主要针对桌面端市场，Bootstrap3 提出移动优先，不过目前桌面端依然还是Bootstrap 的主要目标市场。Bootstrap 主要基于jQuery进行JavaScript 处理，支持LESS 来做CSS 的扩展。如果想要在Bootstrap 框架中使用Sass，则需要通过

Bootstrap-Sass（https:///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 的布局与效果示例

jQuery UI

jQuery UI（/）是jQuery项目组中对桌面端的扩展，包括了丰富的控件和特效，与jQuery无缝兼容。同时，jQuery UI 中预置了多种风格供用户选择，避免了千篇一律。

如果您对预置的风格不满意，还可以通过jQuery UI 的可视化界面，自助对jQuery UI 的显示效果进行配置，非常方便，够高端大气上档次。

图 2. jQuery UI 的效果示例

jQuery Mobile

jQuery Mobile ()是jQuery项目对移动端的扩展，目前支持iOS, Android, Windows Phone, Black Berry 等主流平台。具体支持情况可以参见/gbs/。