Dojo与jQuery综合比较分析

最近Dojo和jQuery双双发布了最新的1.8版本，有着相同版本号的两个Javascript库也有许多核心的相同之处：相同的资源加载机制AMD、相同的选择器 引擎Sizzle等。作为业界知名的Javascript库，Dojo和jQuery在各自领域有着为数众多的拥护者。不过正所谓一把钥匙开一把锁，对一个项目来说肯定有个最适合它的工具库，用对了工具才能事半功倍。所以对项目经理或是技术总监来说，工程开始前的技术选型是关键一步，本文将对Dojo和 jQuery最新版本进行一个综合比较，重点在于区分两者的适用场景，而不涉及讨论孰优孰劣。

Licence

Dojo和jQuery都属于活跃的开源项目，并且都使用自由度很高的开源协议，可以免费使用，没有费用和许可问题。Dojo 许可协议为BSD&AFL，jQuery许可协议为MIT&GPL。

框架组成

Dojo属于重量级开发框架，由框架核心（dojo）、基本控件库（dijit）、扩展包（dojox）组成的，三部分都是由dojo官方提供。

jQuery属于轻量级框架，本身仅包含框架核心，另外有一个与jQuery名下的独立开源项目jQuery UI，它提供了最常用的8个控件。

另外jQuery的第三方开发者基于jQuery的框架核心开发了许多扩展控件和功能。不过这些第三方插件质量参差不齐，许可方式不同，需要慎重选择和使用。当选择了多家提供的插件时，还需要注意这些插件共存的兼容性问题。

总体来说，jQuery以及jQueryUI源于官方开发，比第三方插件更值得信赖，jQueryUI秉承了jQuery小块灵的特点，适合Web快速开发。不过鉴于jQueryUI提供控件数量上的限制，进行对UI交互依赖较重的应用时略显力不从心。

核心包大小

下图是Dojo与jQuery框架核心的大小比较，压缩后的dojo核心是135K，jQuery是93K。

编程风格

Dojo使用面向对象编程方式，为大型应用开发提供了保证；jQuery使用函数式编程方式，开发小型应用时更加灵活快捷。

Javascript 自身使用原型链模拟继承，但仅仅依靠原型链模拟的类继承不能提供全面的面向对象能力。Dojo在Javascript的基础进行了面向对象能力的加强和规 范化，提供了原生Javascript不具备的面向对象编程能力，比如父类方法重载（注意，不是重写）、多继承、构造函数调用链等等，并提供一系列面向对象编程规范的函数和属性declare、inherit、declaredClass、extend等作为dojo自身的编程基础。在dojo中，所有的 UI控件都被定义为类，许多Dojo的核心功能库也被定义为类，这都是出于更好的代码重用性的考虑。

Javascript从本质上来说属于函数式编程语言，jQuery没有改变Javascript的编程方式，使其学习成本大大降低。

常用功能支持情况

下图中数据来源自wiki，包含了一些流行的Javascript框架对于Web项目开发中经常会出现的功能需求的支持情况。本文仅涉及dojo与jQuery，其他框架的支持情况请看原文链接（http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks)

	Dojo	jQuery
版本	1.7.2	1.7.2
代码组成	JavaScript + HTML	JavaScript
浏览器功能检测	Yes	Yes
DOM API包装	XMLHttpRequest	JSONP技术	接收服务器推送数据	其他数据格式支持	Yes: XML,HTML,CSV,ATOM	拖拽功能	页面视觉特效	事件绑定	动作撤销/行为历史管理	Yes	With plugins
输入验证	表格（Grid）控件	树控件	编辑器控件	自动补全输入	HTML生成器	自定义控件主题	Modal Dialog & Resizable Panel	布局控件	With plugin
Canvas	Yes
手持设备支持	Accessibility	ARIA支持	可视化编程工具	离线存储	No	No
跨浏览器的矢量绘图	图表控件	Internet Explorer	6+	6+
Mozilla Firefox	3+	2+
Safari	4	3+
Opera	10.50 only	9+
Chrome	3	1+

由上图可见，dojo作为重量级的Javascript框架，提供了对绝大多数Web开发功能需求的支持。而jQuery除了对Web绘图功能支持不够以外，其余功能基本都可以通过引入第三方插件来提供支持。不过还是会涉及到前文提到的代码协议问题和插件间的兼容性问题。

代码风格

从代码风格上来看，除去jQuery标志性的“$”符号外，其实dojo与jQuery在一些常用API上的命名和参数列表基本相似。

核心代码性能

Web应用中的性能非常关键，dojo与jQuery在核心功能上的性能指标在Javascript框架中都属优秀，那么他们之间的比较结果如何呢？本文将比较两者在DOM操作、选择器以及事件绑定这三个最常用功能上的性能指标。场景如下：

1． 添加500个DOM节点；

2． 改变添加节点的style属性；

3． 在500个节点中选择一部分节点改变其innerHTML；

4． 为每个节点绑定鼠标事件；

这四步对应的dojo代码如下：

[javascript] view plain copy

1. functiondojoStep1(){
2. varhtml="";
3. for(vari=0;i<500;i++){
4. html+="<div><spanclass=testdata=0>"+i+"</span></div>";
5. }
6. dojo.byId("container").innerHTML=html;
8. functiondojoStep2(){
9. dojo.query(".test","container").style("color","red");
10. functiondojoStep3(){
11. dojo.query("#containerdiv:nth-child(odd)").addContent("<span>oddrow:</span>");
12. dojo.query("#containerdiv:nth-child(even)").addContent("<span>evenrow:</span>");
13. }
15. functiondojoStep4(){
16. dojo.query("#containerspan").on("mouseenter,mouseleave",function(e){
17. if(e.type=="mouseenter"){
18. dojo.style(e.target,"color","blue");
19. });
20. }

四个步骤对应的jQuery代码如下：

copy