前端开发框架对比

近些年随着 jQuery、Ext 以及 CSS3 的发展，以 Bootstrap 为代表的后端合作开发架构如遍地开花般挤进视线，虽说名噪一时。无论是图形界面应用程序端却是终端端都涌现许多杰出的架构，云讷了合作开发片断，也方便快捷了我们的合作开发。那些架构各有所长，责任编辑对那些架构展开先期的介绍与较为，希望能够为我们优先选择架构提供一点协助，也为先期详尽研究那些架构的Jaunpur。

　JavaScript & CSS

现阶段后端架构主要采用 JavaScript+CSS 商业模式，我们先来了解一下这二者。

　　预准备之 JavaScript

现阶段非主流的 JavaScript 架构名列中，jQuery 和 Ext 可称得上翘楚，获得了使用者的广泛赞誉。国内的许多架构许多也是仿效 jQuery 对 JavaScript 展开了包装袋，不过那些架构的泰斗 YUI 却是秉持用他们的 JavaScript C#。

jQuery 是现阶段用的最多的后端 JavaScript C#，据两千五百，现阶段 jQuery 的市场占有率已经超过 46%，它称得上较为轻量的C#，对 DOM 的操作方式也较为方便快捷妥当，全力支持的效用和命令行也许多。与此同时，如前所述 jQuery 有许多扩展项目，包括 jQuery UI(jQuery 全力支持的许多命令行和效用架构)、jQuery Mobile(终端端 jQuery 架构)、QUnit(JavaScript 的试验架构)、Sizzle(CSS 的优先选择发动机)。那些补足使 jQuery 架构更为完备，更令人激动的是，那些扩充与现阶段的架构基本都是相容的，能交叠采用，使后端合作开发更为丰富。

Ext 是 Sencha 公司尊崇的 JavaScript C#，较之 jQuery，Ext JS 更新锐，数十亿标得的文档，使 Ext 出外网采用的时候会疑虑许多。但，再者，在 Ext JS 巨大的文档另一面是 Ext JS 强悍的机能。Ext JS 的命令行和机能能说强悍和绚丽到了让人隐脉的程度。图象、工具栏、特技，Ext JS 的命令行库比较丰富，与此同时它的可视化也非常强悍，独立靠 Ext JS 几乎就能替代控制层完成于顾客的可视化。强悍的功能，丰富的命令行库，绚丽的效用也使 Ext JS 成为内部网合作开发法宝。

架构泰斗 YUI 也有他们的 JavaScript C#，DOM 操作方式和效用处理也还较为方便快捷，机能和命令行也很齐备，但较之 jQuery 和 Ext JS 显得较为中庸许多。随着 Yahoo!的没落，YUI 的呼声也逐渐被新起的架构淹没，想来也让人惋惜。

除了上述的三个 JavaScript C#，还有 Dojo、Prototype、Mootools 等众多C#，由于责任编辑讨论的架构多采用上述架构，所以其他架构暂不讨论。

　　预准备之 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 的广泛采用，扩充插件和组件也比较丰富，涉及显示组件、相容性、图象库等各个方面。

　　jQuery UI

jQuery UI（http://jqueryui.com/）是 jQuery 项目组中对图形界面端扩充，包括了丰富的命令行和特技，与 jQuery 无缝相容。与此同时，jQuery UI 中预置了多种风格供使用者优先选择，避免了千篇一律。如果您对预置的风格不满意，还能通过 jQuery UI 的可视化界面，自助对 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 无缝连接，使用者能直接通过拖拽实现对界面的设计，以及代码的生成。

　　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 的辅助产品也全部收费，否则只能是试用版。这里的辅助产品，其实包括了上面提到的所有产品。

　　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 丝毫不显弱势。

　　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 等现有架构全力支持方面也表现得很理想。

　　Dojo Mobile

Dojo Mobile(http://dojotoolkit.org/features/mobile)是 Dojo 推出的终端端架构，表现也很不俗。在布局，命令行，特技方面都下了不少功夫。并全力支持与所用平台匹配的风格设置，如果您不喜欢还能引用不同 CSS 文档来实现不同效用。

除了能在终端端应用程序上采用，Dojo Mobile 也全力支持与 PhoneGap 无缝连接，能通过 Dojo Mobile 合作开发终端 App 应用。与此同时也具有不错的响应性（在宽屏和窄屏上的显示效用不同）。

　　Mootools

Mootools(http://mootools.net)能说是现阶段最轻量的后端架构，内核 js 压缩完之后只有 8k，完备版压缩之后也不到 100k，远比其他架构要小许多。Mootools 有他们的面向对象设计的内核 Mootools Core。伴随着最小的文档大小，架构的机能比其他架构也要弱不少，只有在命令行和特效上有少量全力支持。

　　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 也感觉逐渐步入暮年，但作为相当严谨完备的后端架构泰斗，足以秒杀其他。

　　Foundation

　　Foundation （http://foundation.zurb.com/）是 ZURB 旗下的主要面向终端端合作开发架构，但也保持对图形界面端相容，现阶段已经更新到 Foundation4 版本。架构主要采用 jQuery 和 Zepto（语法酷似 jQuery，但比 jQuery 更轻量）作为 JavaScript 基础，CSS 则如前所述 Sass、Compass，有着很好的扩充性，并有着丰富的布局，版式和多种多样的命令行与特技，非常方便快捷合作开发者采用。命令行的响应式效用也协助使用者识别不同应用程序效用。

ZURB 作为一个完备的项目组，包括许多原型、设计、构建、分析等一系列工具，为使用者提供完备的服务。当然，有许多服务是要收费的。

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

　　Kissy

Kissy（http://docs.kissyui.com）是阿里集团自主合作开发的后端架构，现阶段在淘宝网、一淘网等阿里系网站上得到不少应用。Kissy 架构模仿 jQuery 编写了他们的内核 Kissy Core，用于对 DOM 的解析，Ajax 处理等。与此同时，有着丰富的命令行，并实现了许多动画效用和特技。同样，在 Kissy 的命令行中也能看到 Bootstrap 等国外架构的影子。此外，Kissy abc 项目工具能协助使用者实现自动化构建，并有许多扩充组件方便快捷使用者采用。

应该说 Kissy 是现阶段国内合作开发的最好的后端架构，在实际采用中也经过了检验，但跟国外成熟架构较之却是有一定差距。

　　Kissy Mobile

Kissy Mobile（http://mobile.kissyui.com）是 Kissy 推出的终端版架构，意在合作开发出能在移动应用程序和终端应用上都能采用的架构，不过现阶段项目内容还较为少，命令行和特技也较为少，也不具有响应式的效用。

　　Qwrap

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

　　Tangram

Tangram（http://tangram.baidu.com）是百度推出的另一个JavaScript 架构，被广泛应用于百度系旗下的产品，与 Qwrap 类似，Tangram 也只能称得上一个 JavaScript 架构，对JavaScript 做了不少扩充，但作为后端合作开发架构却是显得较为单薄。如前所述此，百度公司继续推出了两个如前所述 Tangram 的项目，Magic 和 Baidu Template。Magic 项目如前所述 Tangram 对命令行和特技都做了扩充，增加了 10 个新的命令行。Baidu Template 则更多是针对终端端合作开发的扩充，现阶段对于大多数非主流终端设备和操作方式系统都有全力支持。

了解完那些架构，我们从平台、基础技术、布局、CSS、命令行、特技和风格设置等几个方面来对它们展开一个基本较为：

由此我们能看到，对于图形界面端，现阶段 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的技术合作开发终端应用。不过这种混合式合作开发商业模式兴起时间并不长，还在不断发展中。

　结束语

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

via：http://www.ibm.com/developerworks/cn/web/1404_wangfx_jsframeworks/