JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述

随着web2.0的彪悍发展，以及浏览器端所承载的工作越来越大（在不是很影响性能的情况下，开发者都习惯把能用浏览器做的事儿都让浏览器做，以减轻服务器的压力和带宽费用等）。
首先,看看选择AJAX框架的基础：

你的项目需求（即你需要哪些特性，例如是否要求做出精美的界面、特效或其它功能）
是否支持A等级的浏览器（IE, Firefox等）?
文档的质量：是否完善（包含教程，API，代码示例等）
框架的可扩展性如何？为框架写插件容易吗？
你是否喜欢它的API的风格？
能大多程度上统一你的JavaScript代码的风格？
框架大小（太大的框架导致用户下载时间的延长）
框架是否强迫你改变写HTML的方式（Dojo就是这样）？
代码执行速度：性能如何？
代码是否为模块化？代码可重用性如何？

所以Javascript已经成为了web开发最最基本的要求之一了。 而在现实的敏捷开发中，我们通常会选择一个JS框架来取代繁琐的Native Javascript的编写。你会发现这样会节省很多的时间，写的代码也很清晰便捷。（当然在学生时代的是有也质疑过，用框架会对原生态的 Javascript理解不深入，其实这是多虑了的。在对框架的深入的同时，对原生的js也会理解的更透彻一些。成为一个精明的开发者，两者是相依相偎的。而最好的状态就是想Qzone前端一样，完全按照自己的需求开发出一套JS,CSS框架。–当然这是因为Qzone太大了）

目前流行的JS框架很多Dojo 、Scriptaculous 、Prototype 、yui-ext 、Jquery 、Mochikit、mootools 、moo.fx 等等。当然还有很多我都不熟悉的框架，就没有列举。 很多人会在坛子里问，到底哪个框架好呢？哪个框架更牛x呢？ 哪个框架OO 更舒服呢？ webryan 个人觉得，这是一个新手很容易犯的错误逻辑。 世界上任何东西，任何工具，都没有最好的这一个说法，只有适合和不适合。 我们要根据我们项目的真实需要来选择具有相关特性的框架。

一、JQuery

推荐级别：五星级

使用场景：任意

下载地址：www.jquery.com 或google搜 jquery下载

推荐原因：目前来说我使用最多的框架(当然我其他的框架也都真是项目开发过若干)，也是我个人最推荐的一个。在和业内的一些技术聊的时候，发现 xiaonei.com的CTO 、腾讯、或是其他一些新兴的web2.0大牛们都首推这个框架。 那具体好在哪呢？ 1.小. （这个上量后，很严重的问题） 2.简单. (学习成本低但成效高，手册有足够清晰的例子让你从0到项目完成) 3.内部结构好开源，侧重逻辑 4.对DOM选择强大（其实，JS大多时候是在处理DOM）5.UI扩展好(这里要提到的就是 Jquery tools和 Jquery UI，大家可以去搜搜看这两个Jquery的扩展UI，你会发现ui原来如此简单，也是因为ui的可扩展性，所以他相对于其他框架毫不逊色)。



二、Extjs

下载地址：http://extjs.com/

使用场景：内部系统。后台系统。管理系统等。

推荐级别：四星

推荐理由：Extjs有着非常牛逼的UI设计。强大的UI，而且性能不错，这是其最大的优点。
速度快，管是UI还是其它模块。
100%面向对象和组件化的思想，一致的语法，全局的命名空间。
文档的完整，规范，方便。
核心的开发团队，Jack Slocum等。
活跃的社区，迅速增加的用户量。
模块化实现，可扩展性强。
所有的组件（widgets）都可直接使用，而无需进行设置（当然，用户可以选择重新配置）。所以当你做像后台管理，企业内部流程，或其他管理系统的时候，这个东西无疑是你的最佳选择。为什么呢？ 因为它几行代码就可以生成非常漂亮的全界面UI，功能强大，样式可选。 做过一个CMS的后台和一个企业内部的系统都是用这个做的，节省了很多人力和时间，而且广受好评。 而它的缺点是，在一个页面加载很多tab的时候，js可能会要同时下载若干个文件。简单说就是js会比较大。 但对于后台管理和企业内部系统来说，这个会成为瓶颈。稍复杂。
为重量级的框架（包含大量UI），体积大。如果导入ext-all.js，压缩后也有近500k。

三、YUI

下载地址：http://developer.yahoo.com/yui/

推荐级别：4星

推荐理由：YUI这个框架我只研究过，但没用在项目中独立使用过。大多是进入项目后，前辈们使用了YUI，然后我们在后续开发中延续了之前的角色而已。很久以前版本的QQ硬盘、mop的某些模块使用过的，但现在就是很清楚哪些人还在用了。它和Extjs有点相似，UI方面有很多优势。

使用场景：拆分YUI的各个模块，对不同需求采用yui中的某部分来填充到自己的模块中。或者是类似于网盘应用这种东东。



四、Dojo

下载地址：http://dojotoolkit.org/

推荐级别：四星

推荐理由：Dojo是功能最为强大的javascript框架，刻意提醒一下：功能最强大。所以它几乎包含了所有你可能想要用到的东西。）。背后强大的支持：IBM、Sun、BEA等，这是非常重要的优势。
Dojo更适合企业应用和产品开发的需要，因为离线存储、DataGrid、2D、3D图形、Chart、Comet等组件对于企业应用来说都是很重要的（当然这些组件还要等一段时间才能稳定下来）。例如，BEA基于Mashup技术开发的产品中已经使用了Dojo。但是但是，我们是否需要这些功能？做 web2.0产品是有要这么大的东东呢？ 这个要按照你自己的需求来。 而且Dojo缺点很明显，太大，功能太多，学习曲线太陡。 但是它做企业应用的话，那简直是如鱼得水。这也是IBM等公司招聘的时候，把Dojo和学习Dojo放在第一位的原因。
优点：
功能的强大，Full Stack的框架，扩展了DHTML的能力，例如：
支持与浏览器Back/Forward按钮的集成。
Dojo Offline，一个跨平台的离线存储API。
Chart组件，可以方便地在浏览器端生成图表。
基于SVG/VML的矢量图形库。
Google Maps、Yahoo! Maps组件，方便开发Mashup应用。
Comet支持，通过通用的Buyeux协议。
强大的UI（Dijit）。
面向对象的设计，统一的命名空间，包管理机制（The Package System and Custom Builds）
可扩展性。
缺点：
复杂，学习曲线陡。
文档的极端不全，这是一个很大的问题。
API很多不稳定，各版本间改动较大，现在还不是一个成熟的框架。
侵入性太大，页面中大量使用dojo的属性，例如<button dojoType="dijit.form.Button" id="helloButton">，如果将来dojo升级或者换一个框架时，负担会很大。
性能问题，由于dojo加载采用了同步的机制，会暂时锁定浏览器，导致CPU使用率达到100%。另外，很多Widget的速度很慢。
五、Prototype

最成熟的。但个人认为可以被Jquery取代。两者相似度也比较高。这里就不多说。

六、Mootools

下载地址：http://mootools.net/

推荐级别：4星

推荐理由：OO设计思想。模块化强，耦合度比较低。有人说，它的UI效果比Jquery UI好一些，没用过它的ui就暂时不多说了。各位开发者可以参见他们的demo看效果或者选择器等东西是否适合自己。

总结
轻量级选择
轻量级的选择：主要是jquery，设计思想，jQuery是追求简洁和高效，所以jQuery适合于快速开发，另外，在Ajax的支持上，jQuery稍强一些；在Comet的支持上，jQuery有相关的插件，但是Comet的核心在于服务器的支持，浏览器端的接口很简单，开发相关的插件很简单。



面向RIA的框架

考虑纯JavaScripty库，目前主要是Dojo和ExtJS（还有YUI）。Dojo更适合企业应用和产品开发的需要，因为离线存储、 DataGrid、2D、3D图形、Chart、Comet等组件对于企业应用来说都是很重要的（当然这些组件还要等一段时间才能稳定下来）。例如，BEA基于Mashup技术开发的产品中已经使用了Dojo。

评论

2 楼 zhangyaochun 2012-09-18  

一看就不是互联网人写的，kissy|tangram|qwrap|等都没有出现，而且个人觉得评出一个几星意义不是很大，更大的意义是我们面对一个什么规模的项目，采用什么样子的框架思想去生成一个小库，简单干净。。个人意见

1 楼 tmartin 2012-09-18  

确实，类似文章不少，也有个人看法，但不足以上首页吧。

让你笑了 写道

这都是那年的文章了...还能上首页?