jQuery 1.5最新版本的改进细节分析
人气:0
这个1.5版本最大的更新是AJAX的完全重写，提供了更强的可扩展性。但是受制于精力和篇幅，对新的AJAX的分析还是放到下回，本篇先简单介绍一下细节方面的改进。
jQuery._Deferred和jQuery.Deferred
首先不得不说这两个新生事物，因为他们是作为基础设施存在，不把这两个东西讲明白了，有些问题根本没办法解释。
首先，jQuery.Deferred是jQuery._Deferred的增强版，因此对于这个问题，从jQuery._Deferred入手，就能说明一大半的问题。
什么是Deferred？从字面上看，我的第一反应是“延迟加载”，首字母大写的应该是“类型”的定义，所以这大概是一个“透明提供延迟加载功能”的类型吧。然而实际上，虽然确实带有那么一点点“延迟”的意思，这个东西却不是用来实现延迟加载的。
简单来说，jQuery._Deferred是一个函数队列，他的作用有以下几点：
保存若干个函数。
在特定的时刻把保存着的函数全部执行掉。
执行过后，新进来的函数会立刻执行。
感觉是不是和啥东西很像？对，jQuery的ready函数就是这样的逻辑，实际中jQuery 1.5中的ready函数也确实被嫁接到这上面去了。
jQuery._Deferred提供下面的接口：
done：function(fn1, fn2, ...)的形式，用于把函数添加到队列中。
fire：function(context, args)的形式，使用context指定this对象，args指定参数，调用队列中所有函数。fire被调用后，_Deferred会进入isResolved状态，未来对done的调用不会再保存函数，而是直接调用函数。
resolve：相当于调用fire(this, arguments)，一个简化的方法。
isResolved：用来判断_Deferred是否在isResolved状态，具体参考前面的fire函数的解释。
cancel：取消掉整个队列，这样不管未来是不是fire，队列中的函数都不会再被调用。
说明白了jQuery._Deferred，再来看看jQuery.Deferred。这个东西其实就是2个_Deferred组成的，第一个称为deferred，用于保管“正常”状态下的函数；第二个称为failDeferred，用于保管“出错”状态下的函数。同时jQuery.Deferred提供了一些新的接口：
then：function(done, fail)的形式，把done添加进deferred，把fail添加进failedDeferred。
fail：相当于failDeferred的done函数。
fireReject：相当于failDeferred的fire函数。
reject：相当于failDeferred的resolve函数。
isRejected：相当于failDeferred的isResolved函数。
同时jQuery.Deferred取消了cancel函数。
那么这个是啥用的呢？有“正常”和“出错”2个状态，同时又是异步的，很容易就能想到……对，给AJAX用的，在下一篇分析中再详细说明。
jQuery.ready的变化
因为有了jQuery._Deferred这个东西，jQuery.ready函数变成依赖于函数队列，具体的变化有：
原来的readyList变量已经不再是一个数组，而变成了jQuery._Deferred对象。
原本在DOMContentLoaded时，调用readList中所有函数的逻辑，现在也使用了jQuery._Deferred中，原来的代码：
while ( (fn = ready[ i++ ]) ) {
fn.call( document, jQuery );
}
变成了：
readyList.fire( document , [ jQuery ] );
jQuery.parseXML函数
新增了静态函数jQuery.parseXML，用于提供浏览器兼容的从字符串转为XML文档的功能。
该函数的逻辑网上有很多，jQuery也没有特别的地方，大致分为以下2种：
对于标准浏览器，使用DOMParser对象：
var parser = new DOMParser();
var xml = parser.parseFromString(text, 'text/html');对于IE，使用Microsoft.XMLDOM对象：
var parser = new ActiveXObject('Microsoft.XMLDOM');
parser.async = 'false';
parser.loadXML(text);
var xml = parser.documentElement;
data部分
添加了jQuery.hasData函数，用于判断一个元素是否有jQuery附加上去的数据。
修改了jQuery.expando的实现，在原来单纯地取当前时间的基础上，添加了一个随机数：
expando = "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" );这样保证在同一时间，引入多个jQuery副本，这几个副本之间的expando不会相互冲突，导致元素上的data变得错乱。一般来说，是不会引入多个jQuery副本的，但是使用SealJS等的时候，配置不当的话，也是很容易出现此类问题的。
DOM操作部分
原本的hasClass、addClass、removeClass函数都需要将元素的class属性分隔为数组，在1.4.4版本中，通过\n或\t进行分隔，在1.5中增加了一个\r，用于对应Windows平台下的换行符（\r\n）。
jQuery.fn.attr函数，1.4.4版本中拒绝从TextNode和CommentNode上获取属性，在1.5版本中添加了一个AttributeNode（noteType == 2）。
在1.4.4版本中，jQuery会在页面unload的时候清理掉由jQuery维护的所有DOM事件，这是为了避免IE的内存泄露问题。但是在1.5中这一段代码不见了，不知是出于什么考虑。
对于IE下使用cloneNode复制节点，会将事件也一起复制过来的问题，1.4.4中是采取复制innerHTML的方式给予解决，而在1.5中则采纳了mootools团队提供的方法，使用cloneFixAttribute函数修正该问题。
cloneFixAttribute函数们于jQuery 1.5 beta1源码文件的5388-5438行，处理IE的BUG的原理很简单，当然前端里一些看似简单的东西，都是很难发现的：
IE中有个叫clearAttributes的函数，会清除到节点上的所有属性，顺便把和事件相关的onclick之类的属性也去掉了。在复制出来的节点上调用这个函数，就会把属性清得干干净净。
IE中还有一个叫mergeAttributes的函数，把一个节点的属性复制到另一个节点上，但他不会把和事件相关的属性复制过去。所以再把原始节点调用mergeAttributes，把属性重新放回复制出来的节点上，这就相当于起到了去除事件相关属性的作用。
另外cloneFixAttribute函数还处理了非常多IE6-8在cloneNode上的兼容性问题，非常值得详细研究。
AJAX部分
AJAX已经完全重写了，只留下一点边边角角保留着1.4.4版本的风采，这里只抽取一部分进行简单的说明。
原来版本中$.get和$.post的实现非常相似，具体来说仅有一个method配置项不同，因此在1.5版本中被合并起来了：
$.each(['get', 'post'], function(i, method) {
$[method] = function() { ... };
});
ajaxSetup函数现在加了一行return this;，可以链式调用了。
serializeArray函数现在统一将value中的换行符替换成Windows的风格（\r\n）。
AJAX的回调函数中，作为参数的对象不再是原生的XMLHTTPRequest，而是jQuery自己封装的称为jXHR的对象，这个对象提供了XMLHTTPRequest的常用接口。
原本对于“请求成功”的浏览器状态码，除200-299以及304外，还有一个1223，来自于IE的一个BUG，会将204的状态码变成1223。现在因为有了jXHR对象，相当于中间多了一层，因此从jXHR对象获取statusCode不会出现1223的情况，已经被变回204了。
jQuery.ajax函数的配置项中多了一个statusCode项，其结构为map，用于指定返回特定状态码时的回调函数，大致形式如下：
jQuery.ajax({
url: 'xxx',
statusCode: {
200: function() { 处理请求成功 },
404: function() { 处理页面未找到 },
503: function() { 处理Service Unavailable }
}
});
再添加了这个回调后，jQuery.ajax函数已经有非常多的回调函数，其触发过程如下：
根据返回的状态码，触发success或者error回调。
根据状态码，触发对应的statusCode回调。
触发complete回调。
触发全局ajaxComplete回调。
如果此时没有正在执行的AJAX，触发全局ajaxStop回调。
其他细节
入口函数jQuery.fn.init现在多了一个参数，值始终为rootjQuery，用于加速init函数中对rootjQuery变量的查找速度（减少了一层作用域）：
//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对象支持继承了，具体的修改是将几处直接调用jQuery的代码改为了对this.constructor的调用：
202行：return this.constructor( context ).find( selector );
253行：var ret = this.constructor();
334行：return this.prevObject || this.constructor(null);同时还提供了jQuery.subclass函数用于创建一个继承自jQuery的类型，由于不是很常用jQuery，更是从来没有用到过需要继承jQuery的情况，因此也不方便说这个功能的作用有多大。
jQuery._Deferred和jQuery.Deferred
首先不得不说这两个新生事物，因为他们是作为基础设施存在，不把这两个东西讲明白了，有些问题根本没办法解释。
首先，jQuery.Deferred是jQuery._Deferred的增强版，因此对于这个问题，从jQuery._Deferred入手，就能说明一大半的问题。
什么是Deferred？从字面上看，我的第一反应是“延迟加载”，首字母大写的应该是“类型”的定义，所以这大概是一个“透明提供延迟加载功能”的类型吧。然而实际上，虽然确实带有那么一点点“延迟”的意思，这个东西却不是用来实现延迟加载的。
简单来说，jQuery._Deferred是一个函数队列，他的作用有以下几点：
保存若干个函数。
在特定的时刻把保存着的函数全部执行掉。
执行过后，新进来的函数会立刻执行。
感觉是不是和啥东西很像？对，jQuery的ready函数就是这样的逻辑，实际中jQuery 1.5中的ready函数也确实被嫁接到这上面去了。
jQuery._Deferred提供下面的接口：
done：function(fn1, fn2, ...)的形式，用于把函数添加到队列中。
fire：function(context, args)的形式，使用context指定this对象，args指定参数，调用队列中所有函数。fire被调用后，_Deferred会进入isResolved状态，未来对done的调用不会再保存函数，而是直接调用函数。
resolve：相当于调用fire(this, arguments)，一个简化的方法。
isResolved：用来判断_Deferred是否在isResolved状态，具体参考前面的fire函数的解释。
cancel：取消掉整个队列，这样不管未来是不是fire，队列中的函数都不会再被调用。
说明白了jQuery._Deferred，再来看看jQuery.Deferred。这个东西其实就是2个_Deferred组成的，第一个称为deferred，用于保管“正常”状态下的函数；第二个称为failDeferred，用于保管“出错”状态下的函数。同时jQuery.Deferred提供了一些新的接口：
then：function(done, fail)的形式，把done添加进deferred，把fail添加进failedDeferred。
fail：相当于failDeferred的done函数。
fireReject：相当于failDeferred的fire函数。
reject：相当于failDeferred的resolve函数。
isRejected：相当于failDeferred的isResolved函数。
同时jQuery.Deferred取消了cancel函数。
那么这个是啥用的呢？有“正常”和“出错”2个状态，同时又是异步的，很容易就能想到……对，给AJAX用的，在下一篇分析中再详细说明。
jQuery.ready的变化
因为有了jQuery._Deferred这个东西，jQuery.ready函数变成依赖于函数队列，具体的变化有：
原来的readyList变量已经不再是一个数组，而变成了jQuery._Deferred对象。
原本在DOMContentLoaded时，调用readList中所有函数的逻辑，现在也使用了jQuery._Deferred中，原来的代码：
复制代码 代码如下:
while ( (fn = ready[ i++ ]) ) {
fn.call( document, jQuery );
}
变成了：
复制代码 代码如下:
readyList.fire( document , [ jQuery ] );
jQuery.parseXML函数
新增了静态函数jQuery.parseXML，用于提供浏览器兼容的从字符串转为XML文档的功能。
该函数的逻辑网上有很多，jQuery也没有特别的地方，大致分为以下2种：
对于标准浏览器，使用DOMParser对象：
复制代码 代码如下:
var parser = new DOMParser();
var xml = parser.parseFromString(text, 'text/html');对于IE，使用Microsoft.XMLDOM对象：
var parser = new ActiveXObject('Microsoft.XMLDOM');
parser.async = 'false';
parser.loadXML(text);
var xml = parser.documentElement;
data部分
添加了jQuery.hasData函数，用于判断一个元素是否有jQuery附加上去的数据。
修改了jQuery.expando的实现，在原来单纯地取当前时间的基础上，添加了一个随机数：
expando = "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" );这样保证在同一时间，引入多个jQuery副本，这几个副本之间的expando不会相互冲突，导致元素上的data变得错乱。一般来说，是不会引入多个jQuery副本的，但是使用SealJS等的时候，配置不当的话，也是很容易出现此类问题的。
DOM操作部分
原本的hasClass、addClass、removeClass函数都需要将元素的class属性分隔为数组，在1.4.4版本中，通过\n或\t进行分隔，在1.5中增加了一个\r，用于对应Windows平台下的换行符（\r\n）。
jQuery.fn.attr函数，1.4.4版本中拒绝从TextNode和CommentNode上获取属性，在1.5版本中添加了一个AttributeNode（noteType == 2）。
在1.4.4版本中，jQuery会在页面unload的时候清理掉由jQuery维护的所有DOM事件，这是为了避免IE的内存泄露问题。但是在1.5中这一段代码不见了，不知是出于什么考虑。
对于IE下使用cloneNode复制节点，会将事件也一起复制过来的问题，1.4.4中是采取复制innerHTML的方式给予解决，而在1.5中则采纳了mootools团队提供的方法，使用cloneFixAttribute函数修正该问题。
cloneFixAttribute函数们于jQuery 1.5 beta1源码文件的5388-5438行，处理IE的BUG的原理很简单，当然前端里一些看似简单的东西，都是很难发现的：
IE中有个叫clearAttributes的函数，会清除到节点上的所有属性，顺便把和事件相关的onclick之类的属性也去掉了。在复制出来的节点上调用这个函数，就会把属性清得干干净净。
IE中还有一个叫mergeAttributes的函数，把一个节点的属性复制到另一个节点上，但他不会把和事件相关的属性复制过去。所以再把原始节点调用mergeAttributes，把属性重新放回复制出来的节点上，这就相当于起到了去除事件相关属性的作用。
另外cloneFixAttribute函数还处理了非常多IE6-8在cloneNode上的兼容性问题，非常值得详细研究。
AJAX部分
AJAX已经完全重写了，只留下一点边边角角保留着1.4.4版本的风采，这里只抽取一部分进行简单的说明。
原来版本中$.get和$.post的实现非常相似，具体来说仅有一个method配置项不同，因此在1.5版本中被合并起来了：
复制代码 代码如下:
$.each(['get', 'post'], function(i, method) {
$[method] = function() { ... };
});
ajaxSetup函数现在加了一行return this;，可以链式调用了。
serializeArray函数现在统一将value中的换行符替换成Windows的风格（\r\n）。
AJAX的回调函数中，作为参数的对象不再是原生的XMLHTTPRequest，而是jQuery自己封装的称为jXHR的对象，这个对象提供了XMLHTTPRequest的常用接口。
原本对于“请求成功”的浏览器状态码，除200-299以及304外，还有一个1223，来自于IE的一个BUG，会将204的状态码变成1223。现在因为有了jXHR对象，相当于中间多了一层，因此从jXHR对象获取statusCode不会出现1223的情况，已经被变回204了。
jQuery.ajax函数的配置项中多了一个statusCode项，其结构为map，用于指定返回特定状态码时的回调函数，大致形式如下：
复制代码 代码如下:
jQuery.ajax({
url: 'xxx',
statusCode: {
200: function() { 处理请求成功 },
404: function() { 处理页面未找到 },
503: function() { 处理Service Unavailable }
}
});
再添加了这个回调后，jQuery.ajax函数已经有非常多的回调函数，其触发过程如下：
根据返回的状态码，触发success或者error回调。
根据状态码，触发对应的statusCode回调。
触发complete回调。
触发全局ajaxComplete回调。
如果此时没有正在执行的AJAX，触发全局ajaxStop回调。
其他细节
入口函数jQuery.fn.init现在多了一个参数，值始终为rootjQuery，用于加速init函数中对rootjQuery变量的查找速度（减少了一层作用域）：
//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对象支持继承了，具体的修改是将几处直接调用jQuery的代码改为了对this.constructor的调用：
202行：return this.constructor( context ).find( selector );
253行：var ret = this.constructor();
334行：return this.prevObject || this.constructor(null);同时还提供了jQuery.subclass函数用于创建一个继承自jQuery的类型，由于不是很常用jQuery，更是从来没有用到过需要继承jQuery的情况，因此也不方便说这个功能的作用有多大。
加载全部内容