詳解jQuery中的getAll()和cleanData()
前言：
看 jQuery 源碼的一個(gè)痛點(diǎn)就是調(diào)用一個(gè)函數(shù)時(shí)，里面會(huì)調(diào)用 N 個(gè)其他函數(shù)，然后這 N 個(gè)函數(shù)里面又會(huì)調(diào)用 M 個(gè)其他其他函數(shù)。。
本篇文章主要是對(duì)detach()/empty()/remove()/unwrap()]() 中兩個(gè)函數(shù) getAll和cleanData() 進(jìn)行解析。
一、getAll(context, tag)
作用：
用來獲取 context 上的 tag 標(biāo)簽，或者是將 context 和 context 里的 tag 標(biāo)簽的元素合并
源碼：
//一般是傳的node,'script'
//應(yīng)該是用來獲取context上的tag標(biāo)簽，或者是將context和context里的tag標(biāo)簽的元素合并
//源碼4893行
function getAll( context, tag ) {
// Support: IE <=9 - 11 only
// Use typeof to avoid zero-argument method invocation on host objects (#15151)
var ret;
console.log(context,typeof context.getElementsByTagName,typeof context.querySelectorAll,'context4894')
//如果context存在getElementsByTagName的方法的話
if ( typeof context.getElementsByTagName !== "undefined" ) {
//tag:script
//從context中獲取script標(biāo)簽的節(jié)點(diǎn)
ret = context.getElementsByTagName( tag || "*" )
console.log(tag,ret,'ret4897')
}
//DocumentFragment沒有g(shù)etElementsByTagName方法，但有querySelectorAll方法
else if ( typeof context.querySelectorAll !== "undefined" ) {
ret = context.querySelectorAll( tag || "*" );
} else {
ret = [];
}
console.log(nodeName( context, tag ),'nodeName4909')
//nodeName() 判斷兩個(gè)參數(shù)的nodename是否相等
if ( tag === undefined || tag && nodeName( context, tag ) ) {
return jQuery.merge( [ context ], ret );
}
return ret;
}
注意：DocumentFragment 沒有g(shù)etElementsByTagName方法，但有querySelectorAll方法！
二、$.merge()
作用：
合并兩個(gè)數(shù)組內(nèi)容到第一個(gè)數(shù)組
源碼：
// Support: Android <=4.0 only, PhantomJS 1 only
// push.apply(_, arraylike) throws on ancient WebKit
//源碼461行
//將second合并到first后面
merge: function( first, second ) {
var len = +second.length,
j = 0,
i = first.length;
//依次將second的item添加到first后面
for ( ; j < len; j++ ) {
first[ i++ ] = second[ j ];
}
//first可能是類數(shù)組，所以需要更新下length屬性
first.length = i;
return first;
},
需要注意的是最后的 first.length = i
三、cleanData()
作用：
清除元素節(jié)點(diǎn)上的事件和數(shù)據(jù)
源碼：
//清除elems上的數(shù)據(jù)和事件
//源碼6146行
cleanData: function( elems ) {
var data, elem, type,
//beforeunload/blur/click/focus/focusin/focusout/
//load/mouseenter/mouseleave/pointerenter/pointerleave
special = jQuery.event.special,
i = 0;
for ( ; ( elem = elems[ i ] ) !== undefined; i++ ) {
//允許的節(jié)點(diǎn)類型
if ( acceptData( elem ) ) {
//當(dāng)有事件綁定到elem后，jQuery會(huì)給elem一個(gè)屬性dataPriv.expando
//該屬性上面就綁定了事件和數(shù)據(jù)
if ( ( data = elem[ dataPriv.expando ] ) ) {
//如果data上有事件的話
if ( data.events ) {
//逐個(gè)列舉data上的事件，比如click
for ( type in data.events ) {
// 如果special中有data.events上的事件
if ( special[ type ] ) {
//調(diào)用jQuery.event.remove方法，移除elem上的event類型
jQuery.event.remove( elem, type );
// This is a shortcut to avoid jQuery.event.remove's overhead
}
//應(yīng)該是自定義的事件
else {
//本質(zhì)即elem.removeEventListener(type,handle)
jQuery.removeEvent( elem, type, data.handle );
}
}
}
// Support: Chrome <=35 - 45+
// Assign undefined instead of using delete, see Data#remove
//最后將元素的dataPriv.expando屬性置為undefined
elem[ dataPriv.expando ] = undefined;
}
//dataUser應(yīng)該是用戶綁定的事件
if ( elem[ dataUser.expando ] ) {
// 將元素的dataUser.expando屬性置為undefined
// Support: Chrome <=35 - 45+
// Assign undefined instead of using delete, see Data#remove
elem[ dataUser.expando ] = undefined;
}
}
}
}
解析：
① 依次判斷 elems[i] 是否是元素節(jié)點(diǎn)/文檔節(jié)點(diǎn)/對(duì)象
② 再判斷 elem 的 dataPriv.expando 屬性是否有 events 屬性
③ 當(dāng) events 里有 jQuery.event.special 指定的 事件類型時(shí)，
使用jQuery.event.remove(elem,type)移除事件和數(shù)據(jù)
④ 反之，則使用jQuery.removeEvent(elem,type,data.handle)移除事件和數(shù)據(jù)
⑤ 將 elem[dataPriv.expando]置為 undefined
⑥ 將 elem[dataUser.expando]置為 undefined
四、acceptData()
作用：
判斷是否是指定的節(jié)點(diǎn)類型，返回 true/false
源碼：
//判斷是否是指定的節(jié)點(diǎn)類型
//只接受元素節(jié)點(diǎn)1，文檔節(jié)點(diǎn)9，任意對(duì)象
//返回true/false
//源碼4178行
var acceptData = function( owner ) {
// Accepts only:
// - Node
// - Node.ELEMENT_NODE
// - Node.DOCUMENT_NODE
// - Object
// - Any
return owner.nodeType === 1 || owner.nodeType === 9 || !( +owner.nodeType );
}
注意：
Object 類型的 nodeType 是 undefined
五、$.removeEvent()
作用：
移除 elem 上的自定義監(jiān)聽事件
源碼：
//移除elem上的自定義監(jiān)聽事件
//源碼5599行
//jQuery.removeEvent(elem,type,data.handle)
jQuery.removeEvent = function( elem, type, handle ) {
// This "if" is needed for plain objects
if ( elem.removeEventListener ) {
elem.removeEventListener( type, handle );
}
}
本質(zhì)即調(diào)用原生JS的removeEventListener()方法
總結(jié)
以上所述是小編給大家介紹的jQuery中的getAll()和cleanData(),希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
這篇文章主要為大家詳細(xì)解析了jQuery中$.ajax()方法參數(shù),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
jQuery彈出層始終垂直居中相對(duì)于屏幕或當(dāng)前窗口
碰到?jīng)]有固定高或者固定寬或者固定高和寬的時(shí)候，我們就需要用JS去處理，去動(dòng)態(tài)獲取當(dāng)前窗口高或者寬；今天弄了2種情況，一個(gè)是相對(duì)于屏幕窗體，一個(gè)是相對(duì)于當(dāng)前的窗口，看代碼2013-04-04
今天在弄?jiǎng)討B(tài)菜單的時(shí)候發(fā)現(xiàn)id里面包含特殊字符"/"，糾結(jié)了N久，就是不能根據(jù)這個(gè)ID獲取到節(jié)點(diǎn)2011-06-06
jQuery插件HighCharts繪制2D柱狀圖、折線圖的組合雙軸圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制2D柱狀圖、折線圖的組合雙軸圖效果,結(jié)合實(shí)例形式分析了jQuery使用HighCharts插件同時(shí)繪制柱狀圖、折線圖的組合雙軸圖實(shí)現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
為什么會(huì)出現(xiàn)在IE無效化呢，從上面的解決方案可以知道是XML文件的編碼問題，在轉(zhuǎn)化會(huì)前臺(tái)可讀時(shí)并未符合IE的XML 對(duì)象，故需要翻譯成IE兼容的對(duì)象。2009-10-10
探討JQUERY JSON的反序列化類 using問題的解決方法
本篇文章是對(duì)JQUERY JSON的反序列化類 using問題的解決方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
jQuery DataTables插件自定義Ajax分頁實(shí)例解析
這篇文章主要為大家詳細(xì)介紹了jQuery DataTables插件自定義Ajax分頁的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
jQuery添加/改變/移除CSS類及判斷是否已經(jīng)存在CSS
正如標(biāo)題所言會(huì)用到removeClass移除CSS類、addClass添加CSS類、toggleClass添加或者移除CSS類，hasClass判斷是否已經(jīng)存在CSS2014-08-08
詳解jQuery的表單驗(yàn)證插件--Validation
jQuery Validate 插件為表單提供了強(qiáng)大的驗(yàn)證功能，讓客戶端表單驗(yàn)證變得更簡(jiǎn)單，同時(shí)提供了大量的定制選項(xiàng)，滿足應(yīng)用程序各種需求。本文主要對(duì)表單驗(yàn)證插件-Validation進(jìn)行案例分析，詳細(xì)介紹，具有很好的參考價(jià)值，需要的朋友一起來看下吧2016-12-12
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)放大鏡案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10