Ajax 框架_几种流行的 Ajax 框架 jQuery、Mootools、Dojo、Ext JS比较

AJAX是 Web 2.0 的基石（为了 RIA），现在流行的几种开源Ajax框架，如jQuery、Mootools、Dojo、Ext JS等，应该如何选择？Ajaxian在2007年进行了调查（数字为使用该工具的百分比）：

Prototype	jQuery	Ext	Script.aculo.us	Mootools	YUI	JSON	Dojo	Backbase
34.1%	29.3%	22.5%	22.3%	14.3%	13%	12.9%	11.8%	8.3%

其中，Prototype使用率最高，很大程度上是因为它是最早、最成熟的框架。

详见 http://ajaxian.com/archives/2007-ajax-tools-usage-survey-results 

选择Ajax框架应该考虑的几个问题：

1)        你的项目需求，是否要求精美的界面、特效或其它功能；

2)        支持的客户端浏览器，如 IE、Firefox 等；

3)        框架的文档质量，如教程、API、代码示例等；

4)        框架的可扩展性，如插件；

5)        API风格，是否喜欢它的API风格，喜欢才能便于使用；

6)        能多大程度上统一你的 JavaScript 代码风格；

7)        框架大小。框架大小会影响客户端的性能。如果过大，客户端下载的时间可能会较长；

8)        框架是否迫使你改变编写 HTML 的方式。如 Dojo 就会这样；

9)        性能如何，代码执行速度；

10)     是否模块化（如 Mootools 为高度模块化），是否可重用。

jQuery 

设计思想

设计简洁。几乎所有操作都是以选择DOM元素开始，再对其进行操作。

优点

1)        小巧，最新1.6.2版本，压缩后是89多KB，未压缩为230多KB。

2)        操作方便。与mootools的Element.Selectors.js相比，选择（Selector）DOM操作很方便；Chaining特性使得总是返回一个jQuery对象，可以连续操作DOM元素。

3)        事件处理方便，如click，而不是单一的addEvent。

4)        可扩展性好，很多人为jQuery开发插件 http://jquery.com/plugins/

5)        文档的完整。每个API都有完整的例子，这是其它框架现在不能比的。而且相关资料和书籍也很多。

缺点

1)        由于设计思想是追求高效和简洁，没有面向对象的扩展。设计思路和Mootools不一样。

2)        CSS Selector的速度稍微有些慢（但是现在速度已经大幅提高）

应用案例

 http://docs.jquery.com/Downloading_jQuery

Mootools

设计思想

面向对象的设计思想。

优点

1)        模块化，各模块代码非常独立，最大的优点是可选择使用哪些模块，用的时候只导入使用的模块即可；

2)        小巧。最新版本1.3.2，压缩后86多KB，未压缩的为142KB。

3)        语法的简洁，直观。

4)        特效。这一点比jQuery稍强，现在也正在开发Mootools UI。

5)        代码优美，易阅读，易修改。

6)        文档的完整（最新的1.2beta的文档比以前更详细）。

缺点

1)        修改了低层的一些类：如Array、String等，这也是设计思想的不同。

2)        在DOM和CSS Selector上不如jQuery强大。

Dojo

设计思想

面向对象的设计思想。

优点

1)        强大支持，IBM、Sun、BEA等，这是非常重要的优势。

2)        功能强大，Full Stack 框架，扩展了DHTML的能力，例如：支持与浏览器Back/Forward按钮的集成；Dojo Offline，一个跨平台的离线存储API。Chart组件，可以方便地在浏览器端生成图表。基于SVG/VML的矢量图形库。Google Maps、Yahoo! Maps 组件，方便开发Mashup应用；Comet 支持，通用的 Buyeux 协议；强大的UI（Dijit）。

3)        面向对象设计，统一的命名空间，包管理机制（ThePackage System and Custom Builds）

4)        可扩展性好。

缺点

1)        复杂。

2)        文档的极为不全。很多API不稳定，各版本间差异较大，还不是一个成熟的框架。入侵较大；页面中大量使用dojo的属性，例如<button dojoType="dijit.form.Button" id="helloButton">，如果将来dojo升级或者换一个框架时，负担会很大。性能上，由于dojo加载采用了同步的机制，会暂时锁定浏览器，导致CPU使用率达到100%。另外，很多Widget速度很慢。

Ext JS

设计思想

组件化，推进RIA（Rich Internet Application）的应用。

优点

1)        强大的UI，而且性能还不错，这是其最大的优点。

2)        速度快，不管是UI，还是其它模块。

3)        100%面向对象和组件化的思想，一致的语法，全局的命名空间。

4)        模块化实现，可扩展性强。

5)        所有的组件（widgets）都可直接使用，而无需进行设置（当然，用户可以选择重新配置）。

6)        文档的完整，规范，方便。

缺点

1)        文档的完整，规范，方便。稍复杂。

2)        文档的完整，规范，方便。重量级的框架（包含大量UI），体积大。如果导入ext-all.js，压缩后也有近500k。

注意：EXT的商业使用，如果只是把ext js包含在自己的项目中，而且这个项目不是卖给用户做二次开发的工具箱，或组件库，就可以遵守LGPL协议免费使用；否则要付费。

性能瓶颈。如数据表格阵列时性能堪忧。

加载数据量(KB)	共耗时(秒)	直接调用Action返回XML耗时(秒)
20	2	<1
200	10	2
700	20	8
1400	40	17

其实所有Ajax 框架对于大量网格都会出现诸如Ext性能问题。而Ext比较突出的原因，我想是因为它做得太漂亮，造成div层迭代过多。Web设计中放弃table转而使用div＋css的架构，原因就在于迭代table对于客户端的运行效率是个噩梦，如果使用过多的div虽然不至于产生table迭代当机的可能，但相当慢是必然的。

总结

轻量级的选择

主要是mootools和jquery，由于它们的设计思想不同，jQuery追求简洁、高效，Mootools除了这些外，其核心在于面向对象，所以jQuery适合于快速开发，Mootools适合于稍大、复杂的项目；另外，在Ajax的支持上，jQuery稍强一些；在Comet的支持上，jQuery有相关的插件，Mootools目前没有，但是Comet的核心在于服务器的支持，浏览器端的接口很简单，开发相关的插件很简单。

在面向对象的Javascript库中，mootools逐渐战胜了prototype（体积大，面向对象的设计不合理等），也包括script.acul.ous（基于prototype，实际上就是prototype上的UI库）。 

面向Rich Internet application（RIA）的选择

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

Ext JS美观和易用，足够强大。在对UI有比较大的需求时，是首选。

性能测试

下面连接用来测试主流Ajax框架对浏览器的响应速度：

http://mootools.net/slickspeed/
http://dev.sencha.com/playpen/slickspeed/#

参考

List of Ajax frameworks http://en.wikipedia.org/wiki/List_of_Ajax_frameworks#JavaScript

Comparison of JavaScript frameworks http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks