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.