Comprehensive comparison between dojo and jquery

Recently, both dojo and jquery have released the latest version 1.8. The two JavaScript libraries with the same version have many core similarities: the same resource loading mechanism AMD and the same selector engine sizzle. As an industry-renowned JavaScript library, dojo and jquery have a large number of advocates in their respective fields. However, when a key is opened, a project must have a tool library that is best suited to it. Only by using the right tool can we get twice the result with half the effort. Therefore, for the project manager or technical director, the Technical Selection before the project starts is a key step. This article will make a comprehensive comparison between the latest versions of dojo and jquery, focusing on distinguishing the applicable scenarios of the two, this article does not discuss the advantages and disadvantages of optimization.

Licence

Both dojo and jquery are active open-source projects that use open-source protocols with high degrees of freedom. They can be used for free with no cost or license issues. The dojo license is BSD & AFL, And the jquery license is MIT & GPL.

Framework Composition

Dojo is a heavyweight development framework consisting of the framework core (Dojo), basic control library (dijit), and extension package (dojox). The three parts are officially provided by dojo.

Jquery is a lightweight framework that only contains the core of the Framework. In addition, it has an independent open-source project, jquery UI, which provides the eight most commonly used controls.

In addition, third-party jquery developers have developed many extension controls and functions based on the core of the jquery framework. However, the quality of these third-party plug-ins is uneven, and the licensing methods are different, so you need to carefully select and use them. When multiple plug-ins are selected, pay attention to the compatibility of these plug-ins.

In general, jquery and jqueryui originated from official development and are more trustworthy than third-party plug-ins. jqueryui is based on the characteristics of jquery mini-spirit and is suitable for rapid web development. However, due to the restrictions on the number of controls provided by jqueryui, the application that relies heavily on UI interaction is insufficient.

Core Package Size

It is the size comparison between the core of the dojo and jquery framework. The core of the compressed dojo is 135 K, and that of jquery is 93 K.

Programming style

Dojo uses object-oriented programming to ensure large-scale application development. jquery uses functional programming to make small applications more flexible and fast.

Javascript uses prototype chain to simulate inheritance, but class inheritance only relies on prototype chain simulation cannot provide comprehensive object-oriented capabilities. On the basis of JavaScript, Dojo strengthens and standardizes object-oriented capabilities, and provides Object-Oriented Programming capabilities that are not available in native JavaScript, such as the overload of parent methods (note, not rewrite) multi-inheritance, constructor call chain, etc. It also provides a series of object-oriented programming standard functions and attributes such as declare, inherit, declaredclass, extend and so on as the basis of Dojo's own programming. In dojo, all UI controls are defined as classes, and many core function libraries of dojo are also defined as classes, all for better code reusability.

Javascript is essentially a functional programming language. jquery does not change the programming method of JavaScript, which greatly reduces the learning cost.

Support for common functions

The data in is sourced from Wiki and contains some popular JavaScript frameworks that support the functional requirements that often occur in web project development. This article only involves dojo and jquery. For more information about the support of other frameworks, see the original article link (http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks)

	Dojo	Jquery
Version	1.7.2	1.7.2
Code Composition	Javascript + html	Javascript
Browser function Detection	Yes	Yes
Dom api Packaging	Yes	Yes
XMLHttpRequest	Yes	Yes
Jsonp Technology	Yes	Yes
Receive server push data	Yes	Yes
Other data formats supported	Yes: XML, HTML, CSV, Atom	Yes: XML, html
Drag	Yes	Yes
Page Visual Effects	Yes	Yes
Event binding	Yes	Yes
Action revocation/Action History Management	Yes	With plugins
Input verification	Yes	With plugins
Table (GRID) Control	Yes	With plugins
Tree Control	Yes	With plugins
Editor controls	Yes	With plugins
Automatic completion Input	Yes	With plugins
HTML Builder	Yes	Yes
Custom Control topic	Yes	Yes
Modal Dialog & resizable panel	Yes	With plugins
Layout Control	Yes	With plugin
Canvas	Yes
Handheld device support	Yes	With plugin
Accessibility	Yes	Yes
Aria support	Yes	Yes
Visual Programming tools	Yes	Yes
Offline storage	No	No
Cross-browser Vector Plotting	Yes
Chart controls	Yes	With plugin
Internet Explorer	6 +	6 +
Mozilla Firefox	3 +	2 +
Safari	4	3 +
Opera	10.50 only	9 +
Chrome	3	1 +

It can be seen that as a heavyweight JavaScript framework, Dojo provides support for the vast majority of web development functional requirements. In addition to insufficient support for Web plotting, jquery can provide support for other functions by introducing third-party plug-ins. However, it still involves the code protocol and plug-in compatibility issues mentioned above.

Code style

In terms of code style, apart from jquery's iconic "$" symbol, dojo and jquery have similar names and parameter lists in some common APIs.

Core code performance

The performance of Web applications is critical. The performance indicators of dojo and jquery in core functions are excellent in the Javascript framework. What are the comparison results between them? This article compares the two performance indicators on the three most common functions of Dom operations, selector, and event binding. The scenario is as follows:

1. Add 500 DOM nodes;

2. Change the style attribute of the added node;

3. select some of the 500 nodes to change their innerhtml;

4. Bind mouse events to each node;

The dojo code corresponding to these four steps is as follows:

function dojoStep1() {      var html = "";      for (var i = 0; i < 500; i++) {          html += "<div><span class=test data=0>" + i + "</span></div>";      }      dojo.byId("container").innerHTML = html;  }    function dojoStep2 () {      dojo.query(".test", "container").style("color","red" );  }    function dojoStep3() {      dojo.query("#container div:nth-child(odd)").addContent("<span>odd row:</span>");      dojo.query("#container div:nth-child(even)").addContent("<span>even row:</span>");  }    function dojoStep4() {      dojo.query("#container span").on("mouseenter,mouseleave", function(e){          if(e.type == "mouseenter"){              dojo.style(e.target, "color", "blue"); }    });}

The jquery code corresponding to the four steps is as follows:

function jQueryStep1() {      var html = "";      for (var i = 0; i < 500; i++) {          html += "<div><span class=test data=0>" + i + "</span></div>";      }      $("#jContainer")[0].innerHTML = html;  }    function jQueryStep2() {      $("#jContainer .test").css({ color: "blue" });  }    function jQueryStep3() {      $("#jContainer div:even").append("<span>even row:</span>");      $("#jContainer div:odd").append("<span>odd row:</span>");  }    function jQueryStep4() {      $("#jContainer span").hover(function () {          $(this).css("color", "red");      }, function () {          $(this).css("color", "black");      });  }

The test results of Firefox/Chrome/IE8 are as follows:

According to the comparison results of dojo1.7.2 and jquery1.7.2 core functions, dojo and jquery have almost the same selector performance, and dojo is slightly better. The selector in dojo and jquery is the sizzle project under the dojo Foundation. JS, so this result is reasonable. From Dom operations, the performance of dojo is also better than that of jquery. In terms of event binding, the performance of dojo is significantly higher than that of jquery.

Summary

Among the many front-end frameworks, dojo is a heavyweight development framework. It has outstanding features in Object-Oriented support, code architecture, multi-pole module loading mechanism, and control integrity, suitable for enterprise-level or complex large-scale Web application development. jquery is a lightweight development framework with simple architecture and mechanism, easy to develop, and widely used. It is suitable for relatively simple Web 2.0 development. Dojo and jquery are designed for complex application development and simple application development respectively, which also brings different technical features of the two. From the perspective of the tool itself, the two features are distinct. In actual projects, you need to determine and select Tools Based on specific needs.