预筹备之 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 中乃至废弃了对 IE6、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/）是baidu有啊团队推出的 JavaScript 框架，现在被支出 360，被普遍应用与 360 产物中。Qwrap 综合 jQuery、Prototype、YUI 特色，对 JavaScript 停止了封装。然则，假如要把 Qwrap 算成一个前端开辟框架照样有些牵强，由于除 JavaScript 类库以外，Qwrap 根本乏善可陈，还处于成长阶段。
Tangram
Tangram（http://tangram.baidu.com）是baidu推出的另一个 JavaScript 框架，被普遍应用于baidu系旗下的产物，与 Qwrap 相似，Tangram 也只能算是一个 JavaScript 框架，对 JavaScript 做了很多扩大，然则作为前端开辟框架照样显得比拟薄弱。基于此，baidu公司继承推出了两个基于 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 的技巧开辟挪动应用。不外这类混合式开辟形式鼓起光阴并不长，还在赓续成长中。
回页首
结束语
下面只是以后涌现出的前端开辟框架中的一部分，信任另有更多优良的框架还在研发中间，到此咱们对“百花齐放”这一词有了更直观的感到，也阐明在沉静了多年以后，前端开辟的事情愈来愈得到人人的看重，也注定会愈来愈繁华。文中的倡议只代表笔者个人的初浅看法，人人终极的抉择还要联合现实的开辟必要。
参考资料
进修
- Sass 与 LESS 比拟，从说话能力、变量处置、函数扩大等多角度详细地比拟了 Sass 和 LESS，为用户给出了抉择倡议。
- PhoneGap，PhoneGap 是今朝普遍应用的挪动端开辟框架，共同 PhoneGap 的 SDK 开辟者能够经由过程 Web 技巧开辟出跨平台的挪动应用。
- Cordova，Cordova 是 Apache 公司推出的挪动开辟框架，也是让开辟者能够应用 Web 技巧开辟跨平台挪动应用。
- developerWorks Web development 专区：经由过程专门对于 Web 技巧的文章和教程，扩大您在网站开辟方面的技巧。
- developerWorks Ajax 资本中间：这是无关 Ajax 编程模子信息的一站式中间，包含许多文档、教程、服装论坛t.vhao.net、blog、wiki 和消息。任何 Ajax 的新信息都能在这里找到。
- developerWorks Web 2.0 资本中间，这是无关 Web 2.0 相干信息的一站式中间，包含大批 Web 2.0 技巧文章、教程、下载和相干技巧资本。您还能够经由过程 Web 2.0 新手入门 栏目，敏捷懂得 Web 2.0 的相干观点。
- 检查 HTML5 专题，懂得更多和 HTML5 相干的常识和意向。
批评辩论
- 参加 developerWorks 中文社区。检查开辟职员推进的博客、服装论坛t.vhao.net、组和维基，并与其余 developerWorks 用户交换。
条批评
IBM Bluemix 资本中间
文章、教程、演示，赞助您构建、安排和治理云应用。
developerWorks 中文社区
立刻参加来自 IBM 的业余 IT 交际收集。
IBM 软件资本中间
免费下载、试用软件产物，构建应用并晋升技巧。
回页首
