Comprehensive comparison between dojo and jquery

Source: Internet
Author: User

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.



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.