前言：
看 jQuery 源碼的一個痛點就是調用一個函數時，里面會調用 N 個其他函數，然后這 N 個函數里面又會調用 M 個其他其他函數。。
本篇文章主要是對detach()/empty()/remove()/unwrap()]() 中兩個函數 getAll和cleanData() 進行解析。
一、getAll(context, tag)
作用：
用來獲取 context 上的 tag 標簽，或者是將 context 和 context 里的 tag 標簽的元素合并
源碼：
//一般是傳的node,'script' //應該是用來獲取context上的tag標簽，或者是將context和context里的tag標簽的元素合并 //源碼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標簽的節點 ret = context.getElementsByTagName( tag || "*" ) console.log(tag,ret,'ret4897') } //DocumentFragment沒有getElementsByTagName方法，但有querySelectorAll方法 else if ( typeof context.querySelectorAll !== "undefined" ) { ret = context.querySelectorAll( tag || "*" ); } else { ret = []; } console.log(nodeName( context, tag ),'nodeName4909') //nodeName() 判斷兩個參數的nodename是否相等 if ( tag === undefined || tag && nodeName( context, tag ) ) { return jQuery.merge( [ context ], ret ); } return ret; }注意：DocumentFragment 沒有getElementsByTagName方法，但有querySelectorAll方法！
二、$.merge()
作用：
合并兩個數組內容到第一個數組
源碼：
// 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可能是類數組，所以需要更新下length屬性 first.length = i; return first; },需要注意的是最后的 first.length = i
三、cleanData()
作用：
清除元素節點上的事件和數據
源碼：
//清除elems上的數據和事件 //源碼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++ ) { //允許的節點類型 if ( acceptData( elem ) ) { //當有事件綁定到elem后，jQuery會給elem一個屬性dataPriv.expando //該屬性上面就綁定了事件和數據 if ( ( data = elem[ dataPriv.expando ] ) ) { //如果data上有事件的話 if ( data.events ) { //逐個列舉data上的事件，比如click for ( type in data.events ) { // 如果special中有data.events上的事件 if ( special[ type ] ) { //調用jQuery.event.remove方法，移除elem上的event類型 jQuery.event.remove( elem, type ); // This is a shortcut to avoid jQuery.event.remove's overhead } //應該是自定義的事件 else { //本質即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應該是用戶綁定的事件 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] 是否是元素節點/文檔節點/對象
② 再判斷 elem 的 dataPriv.expando 屬性是否有 events 屬性
③ 當 events 里有 jQuery.event.special 指定的 事件類型時，
使用jQuery.event.remove(elem,type)移除事件和數據
④ 反之，則使用jQuery.removeEvent(elem,type,data.handle)移除事件和數據
⑤ 將 elem[dataPriv.expando]置為 undefined
⑥ 將 elem[dataUser.expando]置為 undefined
四、acceptData()
作用：
判斷是否是指定的節點類型，返回 true/false
源碼：
//判斷是否是指定的節點類型 //只接受元素節點1，文檔節點9，任意對象 //返回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 上的自定義監聽事件
源碼：
//移除elem上的自定義監聽事件 //源碼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 ); } }本質即調用原生JS的removeEventListener()方法
總結
以上所述是小編給大家介紹的jQuery中的getAll()和cleanData(),希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
