Dojo front-end development framework and jquery Front-End development framework, comparative analysis and summary

Both Dojo and jquery have recently released the latest version 1.8, and two JavaScript libraries with the same version number have many of the same core similarities: the same resource-loading mechanism amd, the same selector engine sizzle, and so On. As the Industry's leading JavaScript library, Dojo and jquery have a large number of advocates in their respective FIELDS. But the so-called key starts locks, for a project must have a most suitable for its tool library, with the right tools to do More. So for the project manager or the technical director, the technology selection before the start of the project is a key step, this article will be a comprehensive comparison of the latest version of Dojo and jquery, the focus is to distinguish between the application of the two scenarios, and not to discuss the pros and cons.

Licence

Both Dojo and jquery are active open source projects, and all use high-freedom open source agreements that are free to use, with no fees and licensing issues. The Dojo License agreement is MIT&GPL for the bsd&afl,jquery license Agreement.

Frame composition

Dojo is a heavyweight development framework, consisting of the framework core (dojo), the basic Control Library (dijit), the expansion pack (dojox), and the three parts are provided by Dojo Officials.

jquery is a lightweight framework that itself contains only the framework core and a separate open source project jquery UI with jquery, which provides the 8 most commonly used Controls.

In addition, Jquery's Third-party developers have developed many extended controls and features based on the framework core of Jquery. however, these third-party plug-ins have uneven quality, different licensing methods, and need to be carefully selected and Used. When multiple plug-ins are selected, there is also a need to be aware of the compatibility issues that exist with these plugins.

In general, jquery and jQueryUI originate from official development and are more trustworthy than Third-party plugins, jQueryUI with the features of the jquery small-scale, suitable for rapid web Development. however, Given that jQueryUI provides a limit on the number of controls, it is somewhat inadequate for applications that rely on heavier UI Interactions.

Core Package Size

Is the size comparison between Dojo and the jquery framework core, the compressed Dojo core is 135k,jquery 93K.

Programming style

Dojo uses object-oriented programming to provide a guarantee for large application development, and jquery uses functional programming to develop small applications with greater flexibility and speed.

Javascript itself simulates inheritance using a prototype chain, but class inheritance that relies solely on the prototype chain simulation does not provide a comprehensive object-oriented Capability. Dojo's object-oriented capabilities are enhanced and normalized on the basis of javascript, providing object-oriented programming capabilities that native JavaScript does not have, such as parent method overloading (note, not rewrite), multiple inheritance, constructor call chaining, and so On. and provide a series of object-oriented programming specifications of functions and properties declare, inherit, declaredclass, extend, and so on as Dojo's own programming Basis. In dojo, all UI controls are defined as classes, and many of Dojo's core library of functions are also defined as classes, all for better code reuse Considerations.

JavaScript is essentially a functional programming language, and jquery does not change the way JavaScript is programmed to make its learning cost much LESS.

Common feature support scenarios

The data from the wiki contains some popular JavaScript frameworks that support the functionality requirements that often arise in Web project Development. This article only covers dojo and jquery, and the support for other frameworks can be seen in the original 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 Wrapper

Yes

Yes

XMLHttpRequest

Yes

Yes

JSONP Technology

Yes

Yes

Receive Server Push data

Yes

Yes

Additional Data format support

yes:xml, HTML, CSV, ATOM

yes:xml, HTML

Drag and drop function

Yes

Yes

Page visual effects

Yes

Yes

Event Bindings

Yes

Yes

Action Undo/behavioral History Management

Yes

With plugins

Input validation

Yes

With plugins

Table (grid) Control

Yes

With plugins

Tree control

Yes

With plugins

Editor controls

Yes

With plugins

Auto-complete input

Yes

With plugins

HTML generator

Yes

Yes

Custom control Topics

Yes

Yes

Modal Dialog & Resizable Panel

Yes

With plugins

Layout controls

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 Drawing

Yes

Chart control

Yes

With plugin

Internet Explorer

6+

6+

Mozilla Firefox

3 +

2 +

Safari

4

3 +

Opera

10.50 Only

+

Chrome

3

1 +

by visible, dojo, as a heavyweight JavaScript framework, provides support for the vast majority of web development functionality Requirements. In addition to the lack of support for the Web Drawing functionality, jquery provides support by introducing Third-party Plug-ins. however, it will still involve the code protocol issues mentioned earlier and the compatibility issues between Plugins.

Code style

In terms of code style, except for the symbolic "$" of jquery, Dojo and jquery are basically similar in naming and parameter lists on some common Apis.

Core Code Performance

Performance in Web applications is critical, and the performance metrics of Dojo and jquery in core functionality are excellent in the JavaScript framework, so what are the comparisons between them? This article compares the performance metrics for the three most common features of Dom operations, selectors, and event bindings. The scenario is as Follows:

1. Add 500 Dom nodes;

2. Change the style property of the added node;

3. Select a subset of nodes in 500 nodes to change their innerhtml;

4. Mouse events are bound for each node;

The dojo code for these four steps is as Follows:

function DojoStep1 () {

var html = "";

for (var i = 0; I <; 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 for each of the four steps is as Follows:

function JQueryStep1 () {

var html = "";

for (var i = 0; I <; 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 for FIREFOX/CHROME/IE8 are as Follows:

According to the comparison of several core functions of Dojo1.7.2 and jQuery1.7.2, Dojo is similar to Jquery's selector performance, Dojo Notch Above. Because the selectors in dojo and jquery are the project Sizzle.js under the dojo foundation, the results are reasonable, and the performance of Dojo is better than jquery in terms of Dom operations, and dojo has significantly higher performance than jquery for event Binding.

Summarize

In many foreground frameworks, dojo belongs to the heavyweight development framework, which has prominent features in object-oriented support, code architecture, multi-pole Module loading mechanism, control integrity, and is suitable for enterprise or complex large Web application Development. jquery is a lightweight development framework with relatively simple architecture and mechanisms Easy to develop and widely used 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. From the perspective of the tool itself, the two characteristics are distinct, in the actual project, need to be measured according to the specific needs, the choice of Tools.

Source: http://m.blog.csdn.net/article/details?id=7682978

Dojo front-end development framework and jquery Front-End development framework, comparative analysis and summary