jquery API」>jQuery 1.5 beta1出來了,從學習跟進上來說,這次已經比較晚了(我竟然不知道1.5什麼時候出的alpha,就這麼beta了)。
這個1.5版本最大的更新是AJAX的完全重寫,提供了更強的可擴展性。 但是受制於精力和篇幅,對新的AJAX的分析還是放到下回,本篇先簡單介紹一下細節方面的改進。有些問題根本沒辦法解釋。
入手,就能說明一大半的問題。 ,所以這大概是一個「透明提供延遲載入功能」的類型吧。 #簡單來說,##儲存若干個函數。 在特定的時刻把保存著的函數全部執行掉。
#感覺是不是跟啥東西很像? #jQuery._Deferred
提供下面的介面:
:function(fn1, fn2, …)
的形式,用於把函數加入佇列。 #指定
指定參數,呼叫佇列中所有函數。未來對
done:相當於呼叫
fire(this, arguments)isResolved
:用來判斷_Deferred是否在
函數的解釋。
,隊列中的函數都不會再被呼叫。 說明白了
jQuery._Deferred
,再來看看jQuery.Deferred。這個東西其實就是2個_Deferred組成的,第一個稱為deferred
,用來保管「正常」狀態下的函數;第二個稱為failDeferred
,用於保管「出錯」狀態下的函數。同時jQuery.Deferred提供了一些新的介面:
:function(done, fail)
的形式,把done
加進
加進failedDeferred
。
的done
函數。
:相當於failDeferred
的fire
函數。 reject
:相當於
函數。 isRejected
:相當於failDeferred
的isResolved
函數。
取消了cancel
函數。 那麼這個是啥用的呢?有「正常」和「出錯」2個狀態,同時又是異步的,很容易就能想到……對,給AJAX用的,在下一篇分析中再詳細說明。
jQuery.ready的變化
這個東西,jQuery.ready
函數變成依賴函數佇列,具體的變化有:原來的
readyList
變數已經不再是數組,而變成了
原本在DOMContentLoaded
時,呼叫readList
中所有函數的邏輯,現在也使用了jQuery._Deferred
中,原來的程式碼:
while ( (fn = ready[ i++ ]) ) { fn.call( document, jQuery ); }
readyList.fire( document , [ jQuery ] );
jQuery.parseXML函數新增了靜態函數
jQuery.parseXML
,用於提供瀏覽器相容的從字串
轉為XML文件的功能。
對於標準瀏覽器,使用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,使用
物件:
var parser = new ActiveXObject('Microsoft.XMLDOM'); parser.async = 'false'; parser.loadXML(text); var xml = parser.documentElement;
添加了jQuery.hasData
函数,用于判断一个元素是否有jQuery附加上去的数据。
修改了jQuery.expando
的实现,在原来单纯地取当前时间的基础上,添加了一个随机数:
expando = "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( //D/g, "" );
这样保证在同一时间,引入多个jQuery副本,这几个副本之间的expando不会相互冲突,导致元素上的data变得错乱。一般来说,是不会引入多个jQuery副本的,但是使用SealJS等的时候,配置不当的话,也是很容易出现此类问题的。
原本的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已经完全重写了,只留下一点边边角角保留着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的一些改進細節的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!