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，其他框架的支持情况

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

代码风格

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

#p#

核心代码性能

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

1．  添加500个DOM节点；2．  改变添加节点的style属性；3．  在500个节点中选择一部分节点改变其innerHTML；4．  为每个节点绑定鼠标事件；

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

 
 
 
 
    
  
  
  
  
  1. function dojoStep1() {   
    2. 
  
  
  
  
  2.     var html = "";   
    3. 
  
  
  
  
  3.     for (var i = 0; i < 500; i++) {   
    4. 
  
  
  
  
  4.         html += "
    " + i + "
    ";   
    5. 
  
  
  
  
  5.     }   
    6. 
  
  
  
  
  6.     dojo.byId("container").innerHTML = html;   
    7. 
  
  
  
  
  7. }   
    8. 
  
  
  
  
  8.    
    9. 
  
  
  
  
  9. function dojoStep2 () {   
    10. 
  
  
  
  
  10.     dojo.query(".test", "container").style("color","red" );   
    11. 
  
  
  
  
  11. }   
    12. 
  
  
  
  
  12.    
    13. 
  
  
  
  
  13. function dojoStep3() {   
    14. 
  
  
  
  
  14.     dojo.query("#container div:nth-child(odd)").addContent("odd row:");   
    15. 
  
  
  
  
  15.     dojo.query("#container div:nth-child(even)").addContent("even row:");   
    16. 
  
  
  
  
  16. }   
    17. 
  
  
  
  
  17.    
    18. 
  
  
  
  
  18. function dojoStep4() {   
    19. 
  
  
  
  
  19.     dojo.query("#container span").on("mouseenter,mouseleave", function(e){   
    20. 
  
  
  
  
  20.         if(e.type == "mouseenter"){   
    21. 
  
  
  
  
  21.             dojo.style(e.target, "color", "blue");       
    22. 
  
  
  
  
  22.     } 
    23. 
  
  
  
  
  23.     }); 
    24. 
  
  
  
  
  24. }
    25.

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

 
 
 
 
    
  
  
  
  
  1. function jQueryStep1() {   
    2. 
  
  
  
  
  2.     var html = "";   
    3. 
  
  
  
  
  3.     for (var i = 0; i < 500; i++) {   
    4. 
  
  
  
  
  4.         html += "
    " + i + "
    ";   
    5. 
  
  
  
  
  5.     }   
    6. 
  
  
  
  
  6.     $("#jContainer")[0].innerHTML = html;   
    7. 
  
  
  
  
  7. }   
    8. 
  
  
  
  
  8.    
    9. 
  
  
  
  
  9. function jQueryStep2() {   
    10. 
  
  
  
  
  10.     $("#jContainer .test").css({ color: "blue" });   
    11. 
  
  
  
  
  11. }     
    12. 
  
  
  
  
  12. function jQueryStep3() {   
    13. 
  
  
  
  
  13.     $("#jContainer div:even").append("even row:");   
    14. 
  
  
  
  
  14.     $("#jContainer div:odd").append("odd row:");   
    15. 
  
  
  
  
  15. }   
    16. 
  
  
  
  
  16.    
    17. 
  
  
  
  
  17. function jQueryStep4() {   
    18. 
  
  
  
  
  18.     $("#jContainer span").hover(function () {   
    19. 
  
  
  
  
  19.         $(this).css("color", "red");   
    20. 
  
  
  
  
  20.     }, function () {   
    21. 
  
  
  
  
  21.         $(this).css("color", "black");   
    22. 
  
  
  
  
  22.     });   
    23. 
  
  
  
  
  23. }
    24.

Firefox/Chrome/IE8的测试结果如下所示：

根据Dojo1.7.2与jQuery1.7.2几个核心函数的比较结果可见，dojo与jQuery的选择器性能相差无几，dojo略胜一筹。由于 dojo和jQuery中的选择器就是dojo基金会下的项目Sizzle.js,所以这个结果也比较合理；从DOM操作来看，dojo的性能也优于jQuery；在事件绑定方面，dojo的性能明显高于jQuery。

总结

Dojo在众多前台框架中，属于重量级开发框架，在面向对象支持，代码架构，多极模块加载机制，控件完整性等方面有着较为突出的特点，适用于企业级或是复杂的大型Web应用开发；jQuery属于轻量级开发框架，架构和机制相对简单，易于开发，应用广泛，适用于相对简单的Web 2.0开发。 Dojo和jQuery分别为复杂应用开发和简单应用开发设计，由此也带来二者一些技术特点的不同。从工具本身角度看，二者特点鲜明，在实际项目中，需要根据具体需求来衡量，进行工具的选择。

网站标题：Dojo与jQuery综合比较分析
路径分享：http://www.shufengxianlan.com/qtweb/news4/4054.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

商城网站知识

分类信息网

手机网站建设　　 　品牌网站建设　　 　雅安主机托管　　 　移动网站建设　　 　成都做手机网站　　 　内江做网站　　 　四川雕琢时光　　 　香港云服务器租用　　 　鸿程源茂　　 　四川成都展柜定制厂家　　 　商城网站建设公司　　 　软文营销　　 　乐山服务器托管　　 　关键词优化排名　　 　校园网站建设方案　　 　大橙子建站　　 　网站制作公司　　 　康明斯发电机　　 　铁科精智测控　　 　温江服务器托管