jQuery的一些改進細節的介紹

jquery API」>jQuery 1.5 beta1出來了，從學習跟進上來說，這次已經比較晚了（我竟然不知道1.5什麼時候出的alpha，就這麼beta了）。

這個1.5版本最大的更新是AJAX的完全重寫，提供了更強的可擴展性。 但是受制於精力和篇幅，對新的AJAX的分析還是放到下回，本篇先簡單介紹一下細節方面的改進。有些問題根本沒辦法解釋。

入手，就能說明一大半的問題。 ，所以這大概是一個「透明提供延遲載入功能」的類型吧。 #簡單來說，

jQuery._Deferred

是一個函數佇列，他的作用有以下幾點：

##儲存若干個函數。 在特定的時刻把保存著的函數全部執行掉。 #感覺是不是跟啥東西很像？ #jQuery._Deferred提供下面的介面：

#done

：function(fn1, fn2, …)的形式，用於把函數加入佇列。 #指定

this

對象，
• args

  指定參數，呼叫佇列中所有函數。未來對

  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物件：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var parser = new DOMParser();   var xml = parser.parseFromString(text, 'text/html');</pre><div class="contentsignin">登入後複製</div></div>對於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的函数，会清除到节点上的所有属性，顺便把和事件相关的<a href="http://www.php.cn/wiki/1449.html" target="_blank">onclick</a>之类的属性也去掉了。在复制出来的节点上调用这个函数，就会把属性清得干干净净。

• 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函数已经有非常多的回调函数，其触发过程如下：

1. 根据返回的状态码，触发success或者error回调。

2. 根据状态码，触发对应的statusCode回调。

3. 触发complete回调。

4. 触发全局ajaxComplete回调。

5. 如果此时没有正在执行的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的一些改進細節的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！