前端开发UI框架选择---帮你解决忧愁

Bertha 。 2022-08-07 12:36 231阅读 0赞

近几年随着 jQuery、Ext 以及 CSS3 的发展，以 Bootstrap 为代表的前端开发框架如雨后春笋般挤入视野，可谓应接不暇。不论是桌面浏览器端还是移动端都涌现出很多优秀的框架，极大丰富了开发素材，也方便了大家的开发。这些框架各有特点，本文对这些框架进行初步的介绍与比较，希望能够为大家选择框架提供一点帮助，也为后续详细研究这些框架的抛砖引玉。

## JavaScript & CSS ##

目前[*前端框架*][Link 1]主要采用 JavaScript+CSS 模式，我们先来了解一下这两者。

### 预准备之 JavaScript ###

目前主流的 [ *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/][http_css-tricks.com_sass-vs-less]。由于 Sass 是用 Ruby 开发的，所以也需要相应的 Ruby 环境将文件编译成 CSS 文件。

## 国内外前端开发框架对比 ##

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

### Bootstrap ###

Bootstrap（[http://www.bootcss.com][http_www.bootcss.com]）是目前桌面端最为流行的开发框架，一经 Twitter 推出，势不可挡。Bootstrap 主要针对桌面端市场，Bootstrap3 提出移动优先，不过目前桌面端依然还是 Bootstrap 的主要目标市场。Bootstrap 主要基于 jQuery 进行 JavaScript 处理，支持 LESS 来做 CSS 的扩展。如果想要在 Bootstrap 框架中使用 Sass，则需要通过 Bootstrap-Sass（[https://github.com/thomas-mcdonald/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. Bootstrap 的布局与效果示例][1. Bootstrap]

### jQuery UI ###

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

##### 图 2. jQuery UI 的效果示例 #####

![图 2. jQuery UI 的效果示例][2. jQuery UI]

### jQuery Mobile ###

jQuery Mobile ([http://jquerymobile.com][http_jquerymobile.com])是 jQuery 项目对移动端的扩展，目前支持 iOS, Android, Windows Phone, Black Berry 等主流平台。具体支持情况可以参见[http://jquerymobile.com/gbs/][http_jquerymobile.com_gbs]。另外 jQuery Mobile 在布局，控件和特效方面都很慷慨。在风格方面，与 jQuery UI 类似，除了预置的风格效果之外，还支持用户可视化配置的效果。

可圈可点的是，jQuery Mobile 还与 Codiqa 无缝连接，用户可以直接通过拖拽实现对界面的设计，以及代码的生成。

##### 图 3. jQuery Mobile 的效果示例 #####

![图 3. jQuery Mobile 的效果示例][3. jQuery Mobile]

##### ![image015.jpg][] #####

### Sencha Ext JS ###

Sencha Ext JS（[http://www.sencha.com/products/extjs][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 的效果示例 #####

![图 4. Sencha Ext JS 的效果示例][4. Sencha Ext JS]

##### ![image021.jpg][] #####

### Dojo ###

目前唯一能与 Sencha Ext JS 一较高下的框架就只有 Dojo([http://dojotoolkit.org][http_dojotoolkit.org])了。抱着 IBM, VMWare 等众多大腿，Dojo 的一颦一笑都额外惹人注目。Dojo 项目的产品线和功能也特别丰富。首先，Dojo 有自己的 DOM 解析器 Nano，是 DOM 解析和处理的内核。此外，Dojo 的 Web 框架有非常丰富的布局、版式、控件以及特效，对多语言以及图表的扩展支持都非常好，并支持对地图的操作。大家可以查看它的演示([http://demos.dojotoolkit.org/demos/][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 的效果示例 #####

![图 6. Dojo 的效果示例][6. Dojo]

##### ![image035.jpg][] #####

### Dojo Mobile ###

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

除了可以在移动端的浏览器上使用，Dojo Mobile 也支持与 PhoneGap 无缝连接，可以通过 Dojo Mobile 开发移动 App 应用。同时也具有不错的响应性（在宽屏和窄屏上的显示效果不同）。

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

![图 7. Dojo Mobile 在 IPhone 上的效果示例][7. Dojo Mobile _ IPhone]

### YUI ###

YUI（[http://yuilibrary.com][http_yuilibrary.com]）作为开源前端框架的鼻祖，在框架上的功力非常之深。有着自己的解析 DOM 的核心框架，并且在特效、动画、图表等方面都有丰富的扩展，并可以通过 YQL 直接访问 Yahoo！的数据。在用户经常使用的功能方面都有着不错的表现。

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

##### 图 9. YUI 的效果示例 #####

![图 9. YUI 的效果示例][9. YUI]

### Kissy ###

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

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

##### 图 11. Kissy 的效果示例 #####

![图 11. Kissy 的效果示例][11. Kissy]

### Kissy Mobile ###

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

##### 图 12. Kissy Mobile 效果示例 #####

![图 12. Kissy Mobile 效果示例][12. Kissy Mobile]

### Qwrap ###

Qwrap（[http://www.qwrap.com/][http_www.qwrap.com]）是百度有啊团队推出的 JavaScript 框架，现在被收入 360，被广泛应用与 360 产品中。Qwrap 综合 jQuery、Prototype、YUI 特点，对 JavaScript 进行了封装。但是，如果要把 Qwrap 算成一个前端开发框架还是有些牵强，因为除了 JavaScript 类库之外，Qwrap 基本乏善可陈，还处于发展阶段。

### Tangram ###

Tangram（[http://tangram.baidu.com][http_tangram.baidu.com]）是百度推出的另一个 JavaScript 框架，被广泛应用于百度系旗下的产品，与 Qwrap 类似，Tangram 也只能算是一个 JavaScript 框架，对 JavaScript 做了不少扩展，但是作为前端开发框架还是显得比较单薄。基于此，百度公司继续推出了两个基于 Tangram 的项目，Magic 和 Baidu Template。Magic 项目基于 Tangram 对控件和特效都做了扩展，增加了 10 个新的控件。Baidu Template 则更多是针对移动端开发的扩展，目前对于大多数主流移动设备和操作系统都有支持。

### React ###

React是facebook开源的一个颠覆性的前台开发框架,官方站：http://facebook.github.io/react/index.html

React是一个全新思路的前端UI框架，它完全接管了UI开发中最为复杂的局部更新部分，擅长在在复杂场景下保证高性能；同时，它引入了基于组件的开发思想，从另一个角度来重新审视UI的构成。通过这种方法，不仅能够提高开发效率，而且可以让代码更容易理解，维护和测试。Facebook以这样一种方式将沉淀多年的前端开发经验和技术的积累完全开源出来，值得所有前端开发者去借鉴和学习。

文章分别引自：http://www.ibm.com/developerworks/cn/web/1404\_wangfx\_jsframeworks/

http://www.infoq.com/cn/articles/subversion-front-end-ui-development-framework-react

[Link 1]: http://blog.csdn.net/shanzhizi
[_JavaScript_]: http://blog.csdn.net/shanzhizi/article/category/1150427
[http_css-tricks.com_sass-vs-less]: http://css-tricks.com/sass-vs-less/
[http_www.bootcss.com]: http://www.bootcss.com/
[https_github.com_thomas-mcdonald_bootstrap-sass]: https://github.com/thomas-mcdonald/bootstrap-sass
[1. Bootstrap]: /images/20220805/a5184dfeb3c54ddb8253675d337231e2.png
[http_jqueryui.com]: http://jqueryui.com/
[2. jQuery UI]: /images/20220805/1f42a0bafcd14934bad315e814026d6c.png
[http_jquerymobile.com]: http://jquerymobile.com/
[http_jquerymobile.com_gbs]: http://jquerymobile.com/gbs/
[3. jQuery Mobile]: /images/20220805/2126bb6afa1c4350aabec37a97b6f2fb.png
[image015.jpg]: /images/20220805/18c874f8992d4c69bb0e939e83715aed.png
[http_www.sencha.com_products_extjs]: http://www.sencha.com/products/extjs
[4. Sencha Ext JS]: /images/20220805/5fe19f494b1449a4aabd631ac5e88b2a.png
[image021.jpg]: /images/20220805/9d28f69a16ed4db28912f0ad78df98ba.png
[http_dojotoolkit.org]: http://dojotoolkit.org/
[http_demos.dojotoolkit.org_demos]: http://demos.dojotoolkit.org/demos/
[6. Dojo]: /images/20220805/7fe0dbfbb2e74243839dada8eb1046fe.png
[image035.jpg]: /images/20220805/497a526db12340ada34011da374f2616.png
[http_dojotoolkit.org_features_mobile]: http://dojotoolkit.org/features/mobile
[7. Dojo Mobile _ IPhone]: /images/20220805/cf26493e1c9e4455a41fc8cd551fe925.png
[http_yuilibrary.com]: http://yuilibrary.com/
[9. YUI]: /images/20220805/00ac846d76234985b24fce71f9d25296.png
[http_docs.kissyui.com]: http://docs.kissyui.com/
[11. Kissy]: /images/20220805/0cdfd4718a08418c8037789e94c976bd.png
[http_mobile.kissyui.com]: http://mobile.kissyui.com/
[12. Kissy Mobile]: /images/20220805/e9102b791e6a4e63a2327a2eb38ec5d9.png
[http_www.qwrap.com]: http://www.qwrap.com/
[http_tangram.baidu.com]: http://tangram.baidu.com/