Improved details of jQuery1.5

jQuery 1.5 beta1 out, from the study follow-up, this time has been relatively late (I did not know when 1.5 out of alpha, beta so a).

The 1.5 version of the biggest update is a complete rewrite of AJAX provides increased scalability. But the subject of energy and space analysis of the new AJAX or into the next time herein, this briefly explain the details of the improvements.

jQuery._Deferred和jQuery.Deferred

First of all have to say that these two new things, because they are as infrastructure exists, these two things are not made myself clear, some problems simply can not explain.

First, jQuery.Deferred is jQuery._Deferred enhanced version, so for that matter, start from jQuery._Deferred, be able to explain more than half of the problem.

What is Deferred? Literally, my first reaction was "lazy loading", capitalized should be "type" is defined, so this is probably a "transparent offer lazy loading function" type bar. In practice, however, While it is true with a little bit "delay" mean, this thing is not used to implement lazy loading.

In simple terms, jQuery._Deferred queue is a function of his role are the following:

Save a number of functions.
At a particular time to perform all the functions it holds out.
After the execution, new incoming function will be executed immediately.

And what things are not feeling like? Pair of, jQuery ready function of this logic is that, in practice jQuery 1.5 ready function is indeed grafted to go above this.

jQuery._Deferred provide the following interfaces:

done: function (fn1, fn2, ...) in the form of, for adding a function to the queue.
fire: function (context, args) form, this object is specified using the context, args argument specified, all functions in the call queue. After the fire is called, _Deferred will enter isResolved state, the future will no longer call to done to save function, but calling the function directly.
resolve: equivalent to calling the fire (this, arguments), a simplified method.
isResolved: _Deferred used to determine whether isResolved state, with particular reference to the foregoing explanation fire function.
cancel: cancel the whole queue, so that regardless of the future is not a fire, a function of the queue will no longer be called.

Say so jQuery._Deferred, look at jQuery.Deferred. This thing is actually composed of two _Deferred, deferreds first called, for storing the "normal" function of the state; the second is called failDeferred, for storing the function of "error" state. Meanwhile jQuery.Deferred provides some new interface:

then: function (done, fail) form, to add deferreds done, to add failedDeferred fail.
fail: failDeferred's done the equivalent function.
fireReject: the equivalent of failDeferred the fire function.
reject: the equivalent of failDeferred the resolve function.
isRejected: the equivalent of isResolved function failDeferred.

Meanwhile jQuery.Deferred cancel cancel function.

Well, this is what with it? There are "normal" and "Error" two states, but it is asynchronous, it is easy to think of ...... right, to the use of AJAX, following an analysis in detail again.

The change jQuery.ready

Because jQuery._Deferred this thing, jQuery.ready function becomes dependent on the function of the queue, the specific changes are:

The original is no longer readyList variable is an array, but instead jQuery._Deferred object.

Originally when DOMContentLoaded, call readList all logic functions, now also used jQuery._Deferred, the original code:

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

became:

readyList.fire( document , [ jQuery ] );

jQuery.parseXML function

Added static function jQuery.parseXML, for providing a converted XML document from a string function browser compatible.

There are a lot of logic online this function, jQuery is no special place, roughly divided into two kinds:

For a standard browser, use DOMParser objects:

var parser = new DOMParser();
var xml = parser.parseFromString(text, 'text/html');

For IE, use Microsoft.XMLDOM objects:

var parser = new ActiveXObject('Microsoft.XMLDOM');
parser.async = 'false';
parser.loadXML(text);
var xml = parser.documentElement;

data section

Added jQuery.hasData function for determining whether there is an element jQuery up additional data.

Modify the realization jQuery.expando, on the basis of the original simply take the current time, which adds a random number:

expando = "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" );

This ensures that at the same time, the introduction of multiple copies of jQuery, expando between these copies will not conflict with each other, resulting in data on the elements become deranged. In general, it will not introduce multiple copies of jQuery, but using SealJS such as when configured properly, it is also very prone to such problems.

DOM operation portion

Original hasClass, addClass, removeClass functions need to be separated into class attribute element array, in version 1.4.4, separated by the \ n or \ T, adds a \ r at 1.5 for Windows platform under the corresponding linefeed (\ r \ n).

jQuery.fn.attr function, version 1.4.4 reject attribute acquired from TextNode and CommentNode, added a AttributeNode (noteType == 2) version 1.5.

In version 1.4.4, jQuery will clean out all DOM events maintained by the jQuery unload when the page, which is to avoid IE memory leak problem. But this piece of code in 1.5 gone , I do not know what to consider.

For the problem under IE use cloneNode copy node, the event will also be copied together, taking copied innerHTML 1.4.4 is the way to solve them, and in 1.5 mootools team adopted a method of using cloneFixAttribute function fix the problem .

They function on the principle of cloneFixAttribute 5388-5438 row jQuery 1.5 beta1 source files, IE's handling BUG is very simple, of course, the front end in some seemingly simple things that are hard to find:

IE man named clearAttributes function will clear all the attributes on nodes, the way the onclick attribute or the like related to the event also removed. Call this function on a node to copy out, it will clear the property was clean.
IE also has a function called mergeAttributes, and copy the properties of one node to another node, but he does not copy and past events related properties. So then the original node calls mergeAttributes, the property back into the node to copy out, which is equivalent to removing played a role in events related to the property.

In addition cloneFixAttribute function also dealt with a lot IE6-8 compatibility issues on cloneNode and very worthy of detailed study.

AJAX part

AJAX has been completely rewritten, leaving only a little rougher edges retains the 1.4.4 version of the style, drawn here only part of the explanation is simple.

The original version of the $ .get and $ .post achieve is very similar, specifically, only one method to configure different items, so it is merged in the 1.5 release:

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

ajaxSetup function now add a line return this;, you can call up the chain.

serializeArray function now unified in the value of replacing Windows style line breaks (\ r \ n).

AJAX callback function, parameter as an object is no longer native XMLHTTPRequest, but jQuery object called jXHR own package, the object provides a common interface XMLHTTPRequest.

For the original "request was successful" status code browser, in addition to 304, and 200-299, there is a 1223, from a BUG IE, the status code 204 will become 1223. Now because of jXHR objects, equivalent to more than the middle layer, and therefore the object acquired from jXHR 1223 statusCode situation does not occur, the 204 has been changed back.

CI jQuery.ajax function of a multi statusCode item having the structure map, specify a callback function returns a specific code, the following general form:

jQuery.ajax({
    url: 'xxx',
    statusCode: {
        200: function() { 处理请求成功 },
        404: function() { 处理页面未找到 },
        503: function() { 处理Service Unavailable }
    }
});

After add a callback, jQuery.ajax function already has a lot of callbacks, which triggers the process is as follows:

According to the status code returned, triggering success or error correction.
The status code, corresponding to the trigger statusCode callback.
Trigger complete callback.
Global ajaxComplete trigger callback.
AJAX If this time is not being executed, triggering a global ajaxStop callback.

Other details

JQuery.fn.init entry function is now one more parameter values are always rootjQuery, for accelerating the speed of the init function lookup rootjQuery variables (reduced level scope):

//jQuery 1.5 beta1 源码23行
jQuery = function( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context, rootjQuery );
}

jQuery object supports inherited, specific modifications that will direct calls to several jQuery code instead of a call to this.constructor:

202行：return this.constructor( context ).find( selector );
253行：var ret = this.constructor();
334行：return this.prevObject || this.constructor(null);

It also provides jQuery.subclass function to create a class that inherits from the type of jQuery, jQuery because it is not very common, but has never been used jQuery to inherit if necessary, and therefore not easy to say how much the role of this function.

This article Permanent link: http://www.otakustay.com/jquery-1-5-enhanced-detail/

Reproduced in: https: //www.cnblogs.com/GrayZhang/archive/2011/01/18/jquery-1-5-enhanced-detail.html