Improvement details of jquery1.5

ArticleDirectory

• Jquery. _ deferred and jquery. Deferred
• Changes in jquery. Ready
• Jquery. parsexml Function
• Data Section
• Dom operations
• Ajax Section
• Other details

Jquery 1.5 beta1 is coming out. From the perspective of learning follow-up, this time has been relatively late (I don't knoW When Alpha is coming out of 1.5, so it's just beta ).

The biggest update in this 1.5 version is the complete rewrite of Ajax, providing stronger scalability. However, due to the energy and space, the analysis of the new Ajax is still put back. This article will briefly introduce the improvements in details.

Jquery. _ deferred and jquery. Deferred

First of all, we have to talk about these two new things, because they exist as infrastructure and do not understand these two things. There are some problems that cannot be explained at all.

First, jquery. Deferred is an enhanced version of jquery. _ deferred. To solve this problem, we can start with jquery. _ deferred to explain more than half of the problems.

What is deferred? Literally, my first response is "delayed loading", and the first letter should be the definition of "type, so this is probably a type of "transparent to provide the delayed loading function. However, although it does mean a little "latency", it is not used to implement delayed loading.

In short, jquery. _ deferred is a function queue, which has the following functions:

• Save several functions.
• Execute all the stored functions at a specific time.
• After execution, the new function will be executed immediately.

Does it look like anything? Yes, jquery's ready function is like this logic. In reality, the ready function in jquery 1.5 is indeed grafted to this.

Jquery. _ deferred provides the following interfaces:

• Done: function (fn1, FN2,...) form, used to add the function to the queue.
• Fire: function (context, argS) format, use context to specify this object, argS to specify parameters, call all functions in the queue. After the fire is called, _ deferred enters the isresolved State. In the future, the call to done will not save the function, but directly call the function.
• Resolve: equivalent to calling fire (this, arguments), a simplified method.
• Isresolved: used to determine whether _ deferred is in the isresolved status. For details, refer to the above description of the fire function.
• Cancel: cancels the entire queue, so that functions in the queue will not be called no matter whether the queue is in the fire or not.

It indicates jquery. _ deferred. Let's take a look at jquery. deferred. This is actually composed of two _ deferred. The first is called deferred, which is used to keep the function in the "normal" State; the second is faildeferred, stores functions in the "error" status. Meanwhile, jquery. Deferred provides some new interfaces:

• Then: function (done, fail), add done to deferred, and add Fail to faileddeferred.
• Fail: equivalent to the done function of faildeferred.
• Firereject: equivalent to the fire function of faildeferred.
• Reject: equivalent to the resolve function of faildeferred.
• Isrejected: equivalent to the isresolved function of faildeferred.

Meanwhile, jquery. Deferred cancels the cancel function.

So what is the use of this? There are two statuses: "normal" and "error", which are asynchronous at the same time, so you can easily think of them ...... Yes. For Ajax, it will be detailed in the next analysis.

Changes in jquery. Ready

With jquery. _ deferred, the jquery. Ready function becomes dependent on the function queue. The specific changes include:

The original readylist variable is no longer an array, but a jquery. _ deferred object.

Originally in domcontentloaded, the logic of calling all functions in readlist is also used in jquery. _ deferred.Code:

 
While (fn = ready [I ++]) {fn. Call (document, jquery );}
 

Changed:

 
Readylist. Fire (document, [jquery]);
 

Jquery. parsexml Function

The static function jquery. parsexml is added to provide browser-compatible conversion from string to XML documents.

There are many logic web pages for this function, and jquery is not particularly specific. There are roughly two types of functions:

• For standard browsers, use the domparser object:

  VaR parser = new domparser (); var xml = parser. parsefromstring (text, 'text/html ');

• For IE, use Microsoft. xmldom object:

  VaR parser = new activexobject ('Microsoft. xmldom '); parser. async = 'false'; parser. loadxml (text); var xml = parser.doc umentelement;

Data Section

Added the jquery. hasdata function to determine whether an element has data appended to jquery.

Modified the implementation of jquery. expando and added a random number based on the original time:

 
Expando = "jquery" + (jquery. FN. jquery + math. Random (). Replace (/\ D/g ,"");
 

This ensures that multiple jquery replicas are introduced at the same time, and the expando between these replicas will not conflict with each other, resulting in data confusion on the element. Generally, multiple jquery replicas are not introduced. However, when using sealjs and so on, improper configuration is also prone to such problems.

Dom operations

The original hasclass, addclass, and removeclass functions all need to separate the class attributes of the elements into arrays. In version 1.4.4, they are separated by \ n or \ t, A \ r is added in 1.5 to correspond to the line break (\ r \ n) on the Windows platform ).

Jquery. FN. ATTR function. In version 1.4.4, attributes are not obtained from textnode and commentnode. In version 1.5, attributenode (notetype = 2) is added ).

In version 1.4.4, jquery clears all DOM events maintained by jquery during page unload to avoid Memory leakage of IE. But the code in section 1.5NoI don't know why.

When clonenode is used to copy nodes in IE, events are also copied together. In 1.4.4, innerhtml is copied to solve the problem, in 1.5, the method provided by the mootools team was adopted and the clonefixattribute function was used to correct the problem.

The clonefixattribute function is located in line 5388-5438 of the jquery 1.5 beta1 source code file. It is very simple to handle ie bugs. Of course, some seemingly simple things on the front end are hard to find:

1. In IE, a function named clearattributes clears all attributes on the node, and removes attributes such as onclick related to the event. Calling this function on the copied node clears the attributes.
2. In IE, another function called mergeattributes copies the attributes of a node to another node, but it does not copy the attributes related to the event. Therefore, the original node is called mergeattributes, and the attribute is put back on the copied node. This is equivalent to removing event-related attributes.

In addition, the clonefixattribute function also deals with the compatibility problem of many IE6-8 on clonenode, so it is worth studying in detail.

Ajax Section

Ajax has been completely rewritten, leaving only a few sides and corners to keep the style of version 1.4.4. Here, we will only extract some of them for a simple description.

In the original version, the implementation of $. Get and $. Post is very similar. Specifically, there is only one method configuration item, so it is merged in version 1.5:

$. Each (['get', 'post'], function (I, method) {$ [Method] = function (){...};});
 

The ajaxsetup function now adds a lineReturn this;Can be chained.

The serializearray function now replaces the linefeed in the value with the Windows style (\ r \ n ).

In Ajax callback functions, the object as a parameter is no longer a native XMLHttpRequest, but a jxhr object encapsulated by jquery. This object provides common interfaces of XMLHttpRequest.

Originally, in addition to 304-1223 and 204, the browser status code of "request succeeded" also has a 1223 error. It will change the status code of to due to a bug in IE. Now, with the jxhr object, it is equivalent to having an additional layer in the middle. Therefore, if you get statuscode from the jxhr object, there will be no 1223 error, and it has been changed back to 204.

A statuscode item is added to the configuration item of the jquery. Ajax function. Its structure is map, which is used to specify the callback function when a specific status code is returned, in the following form:

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

After this callback is added, jquery. Ajax functions already have a large number of callback functions. The trigger process is as follows:

1. Trigger the success or error callback based on the returned status code.
2. Triggers the corresponding statuscode callback based on the status code.
3. Trigger the complete callback.
4. Triggers the global ajaxcomplete callback.
5. If no Ajax is being executed at this time, the global ajaxstop callback is triggered.

Other details

The entry function jquery. FN. init now has one more parameter and the value is always rootjquery, which is used to accelerate the speed of searching for rootjquery variables in the init function (with a lower scope ):

 
// Jquery 1.5 beta1 source code 23 line jquery = function (selector, context) {// The jquery object is actually just the init constructor 'enabled' return New jquery. FN. init (selector, context, rootjquery );}
 

Jquery objects support inheritance. The specific modification is to directly call jquery code to call this. constructor:

 
Row 202: return this. constructor (context ). find (selector); 253 rows: var ret = This. constructor (); row 334: return this. prevobject | this. constructor (null );
 

Jquery is also provided. the subclass function is used to create a type inherited from jquery. Because it is not very common for jquery, it has never been used to inherit jquery. Therefore, it is not convenient to say how much this function works.

 

permanent link to: http://www.otakustay.com/jquery-1-5-enhanced-detail/