Improved detail analysis of the latest JQuery 1.5 version _jquery

Source: Internet
Author: User
The biggest update for this 1.5 version is the full rewrite of Ajax, which provides greater scalability. But in terms of energy and space, the analysis of the new Ajax is put to the next, this article first briefly introduce the details of the improvement.

Jquery._deferred and Jquery.deferred
First of all, we have to say that these two new things, because they are as an infrastructure exist, do not put these two items to understand, some problems simply can not explain.

First of all, jquery.deferred is the jquery._deferred of the enhanced version, so for this problem, from the jquery._deferred start, it can explain the half problem.

What is deferred? Literally, my first reaction was "deferred loading," which is supposed to be the definition of "type", so this is probably a type of "transparently providing deferred loading". In fact, though, it does take a little bit of "latency" to mean that this thing is not used to implement deferred loading.

In simple terms, jquery._deferred is a function queue, and his role has the following points:

Save a few functions.
Perform all of the saved functions at a particular time.
After execution, the newly entered function executes immediately.
Does it feel like something? Yes, the ready function of jquery is such logic that the ready function in jquery 1.5 is actually grafted onto this.

Jquery._deferred provides the following interface:

Done:function (FN1, fn2, ...) That is used to add functions to the queue.
In the form of fire:function (context, args), use the context to specify the this object, args specify parameters, and call all functions in the queue. After the fire is called, the _deferred will enter the isresolved state, and future calls to the done will not save the function, but call the function directly.
Resolve: The equivalent of calling fire (this, arguments), a simplified method.
Isresolved: Used to determine whether the _deferred is in the isresolved state, referring specifically to the previous fire function explanation.
Cancel: Cancels out the entire queue so that no matter whether the future is fire or not, the functions in the queue are not invoked again.
Said Jquery._deferred, and then look at jquery.deferred. This thing is actually composed of 2 _deferred, the first is called deferred, used to keep the functions in the "normal" state, and the second is called faildeferred, which is used to keep the functions in the "error" state. At the same time, Jquery.deferred provides some new interfaces:

In the form of then:function (done, fail), add the done to the deferred and add fail to the faileddeferred.
Fail: equivalent to Faildeferred's done function.
Firereject: The fire function equivalent to faildeferred.
Reject: The Resolve function equivalent to faildeferred.
isrejected: The isresolved function equivalent to faildeferred.
Also jquery.deferred cancels the Cancel function.

So what's this for? There are "normal" and "error" 2 states, but also asynchronous, it is easy to think of ... Yes, for Ajax, in the next analysis in detail.

changes in Jquery.ready
Because with jquery._deferred this thing, the Jquery.ready function becomes dependent on the function queue, the specific changes are:

The original readylist variable is no longer an array and becomes a Jquery._deferred object.

The logic of all functions in ReadList was originally invoked in the domcontentloaded, and is now used in jquery._deferred, the original code:
Copy Code code as follows:

while (fn = ready[i++]) {
Fn.call (document, JQuery);
}

has become:
Copy Code code as follows:

Readylist.fire (document, [JQuery]);

jquery.parsexml function
Static function Jquery.parsexml is added to provide browser-compatible functionality to convert from strings to XML documents.

The function has a lot of logic online, and jquery has no special place, roughly divided into the following 2 kinds:

For standard browsers, use the Domparser object:
Copy Code code as follows:

var parser = new Domparser ();
var xml = parser.parsefromstring (text, ' text/html '); for IE, use the Microsoft.XMLDOM object:

var parser = new ActiveXObject (' Microsoft.XMLDOM ');
Parser.async = ' false ';
Parser.loadxml (text);
var xml = parser.documentelement;

Data section
Added the Jquery.hasdata function to determine if an element has data that is attached to jquery.

Modified the implementation of the Jquery.expando, in the original simple to take the current time on the basis of the addition of a random number:

expando = "jquery" + (JQuery.fn.jquery + math.random ()). Replace (/\d/g, ""); This guarantees the introduction of multiple JQuery replicas at the same time, the expando between these replicas will not be mutually Conflict, causing data on the element to become garbled. In general, multiple jquery replicas will not be introduced, but when using sealjs and so on, it is also very easy to have such problems when improperly configured.

DOM Operations Section
The original Hasclass, AddClass, and removeclass functions all need to separate the class attribute of the element into an array, in version 1.4.4, by \ n or \ t, and in 1.5, a \ r is added to correspond to the line breaks (\ r) under the Windows platform. \ n).

The JQuery.fn.attr function, 1.4.4, refused to get properties from Textnode and Commentnode, adding a attributenode (Notetype = 2) in version 1.5.

In version 1.4.4, jquery cleans up all DOM events maintained by jquery while the page is unload, in order to avoid the memory leak problem with IE. But in 1.5 this piece of code is missing, I don't know what to consider.

For IE under the use of CloneNode replication node, will be the event also copied over the problem, 1.4.4 is to take a copy of the innerHTML way to give solution, In 1.5, the MooTools team provides a way to fix the problem using the Clonefixattribute function.

Clonefixattribute functions in the jquery 1.5 beta1 source file 5388-5438 lines, the principle of dealing with IE bugs is very simple, of course, the front of some seemingly simple things, are difficult to find:

IE, there is a function called clearattributes, will be cleared to all the attributes on the node, by the way and events related to the onclick and other attributes are also removed. Calling this function on a replicated node will clean up the property.
There is also a function called mergeattributes in IE that copies the attributes of one node to another, but he does not copy the attributes associated with the event to the past. So the original node called Mergeattributes, the property back to the replicated node, which is equivalent to the removal of event-related properties.
In addition, the Clonefixattribute function also deals with many ie6-8 compatibility issues in CloneNode and is well worth studying in detail.

Ajax Part
Ajax has been completely rewritten, leaving only a few side corners to retain the 1.4 4 version of the style, here only a part of the simple description.

The implementation of $.get and $.post in the original version is very similar, specifically, only one method configuration item is different, so it was merged in version 1.5:
Copy Code code as follows:

$.each ([' Get ', ' post '], function (I, method) {
$[method] = function () {...};
});

The Ajaxsetup function now adds a line to return this, which can be called by chain.

The Serializearray function now unifies the replacement of newline characters in value into the Windows style (\ r \ n).

In Ajax callback functions, objects that are arguments are no longer native XMLHttpRequest, but jquery's own encapsulated object called JXHR, which provides a common interface for XMLHttpRequest.

Originally for the "Successful request" browser status code, in addition to 200-299 and 304, there is a 1223, from IE, a bug, will be 204 of the status code into 1223. Now because of the JXHR object, the equivalent of the middle of a layer, so from the Jxhr object to get StatusCode does not appear 1223 of the case, has been changed back to 204.

A statuscode item in the configuration item of the Jquery.ajax function, whose structure is map, specifies the callback function when a particular status code is returned, in roughly the following form:
Copy Code code as follows:

Jquery.ajax ({
URL: ' xxx ',
StatusCode: {
200:function () {processing request succeeded},
404:function () {processing page not found},
503:function () {Processing Service Unavailable}
}
});

After adding this callback, the Jquery.ajax function already has a very many callback functions, and the triggering process is as follows:

Triggers a success or error callback based on the returned status code.
Triggers the corresponding statuscode callback according to the status code.
Triggers a complete callback.
Triggers a global ajaxcomplete callback.
If no Ajax is executing at this time, the global Ajaxstop callback is triggered.
Other Details
Entry function JQuery.fn.init now has one more parameter, and the value is always rootjquery, to speed up the lookup of rootjquery variables in the init function (reduce the one-layer scope):

JQuery 1.5 Beta1 Source 23 line
JQuery = function (selector, context) {
The JQuery object is actually just the Init constructor ' enhanced '
Return to New JQuery.fn.init (selector, context, rootjquery);
The}jquery object supports inheritance, and the specific modification is to change some of the code that calls jquery directly to the call to This.constructor:

Line 202: Return This.constructor (the context), find (selector);
Line 253: var ret = This.constructor ();
334 line: return This.prevobject | | This.constructor (NULL); The Jquery.subclass function is also provided to create a type that inherits from jquery, and since it is not commonly used for jquery, it is never used in situations where you need to inherit jquery, so it's not convenient to say how much this function is going to work.

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.