自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

如何理解與簡化jQuery的closest函數(shù)

作者：司徒正美
開發(fā) 前端
在實現(xiàn)delegate方法中，有一個很重要的輔助函數(shù)叫closest，雖然現(xiàn)在它歸類為遍歷節(jié)點這個模塊中。這個函數(shù)實現(xiàn)得非常復(fù)雜，洋洋灑灑近50行，完全不符合極限編程的規(guī)矩。

在實現(xiàn)delegate方法中，有一個很重要的輔助函數(shù)叫closest，雖然現(xiàn)在它歸類為遍歷節(jié)點這個模塊中。這個函數(shù)實現(xiàn)得非常復(fù)雜，洋洋灑灑近50行，完全不符合極限編程的規(guī)矩。

  1. closest: function( selectors, context ) {     
  2.     var ret = [], i, l, cur = this[0];    
  3.     // Array    
  4.     if ( jQuery.isArray( selectors ) ) {//這分支的過濾邏輯基本與下面的一致   
  5.         var match, selector,   
  6.             matches = {},    
  7.             level = 1;    
  8.         if ( cur && selectors.length ) {    
  9.             for ( i = 0, l = selectors.length; i < l; i++ ) {    
  10.                 selector = selectors[i];    
  11.                 if ( !matches[ selector ] ) {    
  12.                     matches[ selector ] = POS.test( selector ) ?    
  13.                         jQuery( selector, context || this.context ) :    
  14.                       selector;    
  15.                 }    
  16.             }    
  17.             while ( cur && cur.ownerDocument && cur !== context ) {   
  18.                 for ( selector in matches ) {    
  19.                     match = matches[ selector ];//這里頻繁創(chuàng)建新的jQuery對象與使用is這樣復(fù)雜的方法,我不覺得其高效到哪里去    
  20.                     if ( match.jquery ? match.index( cur ) > -1 : jQuery( cur ).is( match ) ) {    
  21.                         ret.push({ selector: selector, elem: cur, level: level });    
  22.                     }    
  23.                 }    
  24.                 cur = cur.parentNode;    
  25.                 level++;    
  26.             }    
  27.         }    
  28.         return ret;    
  29.     }   
  30.     // String     
  31.     var pos = POS.test( selectors ) || typeof selectors !== "string" ?    
  32.             jQuery( selectors, context || this.context ) :    
  33.             0;    
  34.     for ( i = 0, l = this.length; i < l; i++ ) {    
  35.         cur = this[i];    
  36.         while ( cur ) {    
  37.             if ( pos ? pos.index(cur) > -1 : jQuery.find.matchesSelector(cur, selectors) ) {    
  38.                 ret.push( cur );    
  39.                 break;   
  40.             } else {    
  41.                 cur = cur.parentNode;    
  42.                 if ( !cur || !cur.ownerDocument || cur === context || cur.nodeType === 11 ) {    
  43.                    break;    
  44.                 }    
  45.             }    
  46.         }     
  47.     }   
  48.     ret = ret.length > 1 ? jQuery.unique( ret ) : ret;    
  49.     return this.pushStack( ret, "closest", selectors );    
  50. },   

恰逢我也想造個輪子，便去研究它一翻，發(fā)現(xiàn)其***個可以是字符串，元素節(jié)點或jQuery對象，還有一個可選參數(shù)，上下文?？丛创a前幾句，發(fā)現(xiàn)有個分支是判斷是否是Array，估計是供內(nèi)部調(diào)用的優(yōu)化代碼，可以無視之。于是其方法簡化為：

  1. closest: function( selectors, context ) {    
  2.     var ret = [], i, l, cur = this[0];    
  3.     // 如果字符串包含位置偽類或者是個元素節(jié)點,則封裝為一個jQuery對象,否則為0(即false的簡寫,用于快速跳過分支)    
  4.     var pos = POS.test( selectors ) || typeof selectors !== "string" ?    
  5.         jQuery( selectors, context || this.context ) :    
  6.         0;    
  7.     //遍歷原jQuery對象的節(jié)點    
  8.     for ( i = 0, l = this.length; i < l; i++ ) {    
  9.         cur = this[i];    
  10.         while ( cur ) {    
  11.             //如果是jQuery對象,則判定其是否包含當前節(jié)點,否則使用matchesSelector方法判定這個節(jié)點是否匹配給定的表達式selectors    
  12.             if ( pos ? pos.index(cur) > -1 : jQuery.find.matchesSelector(cur, selectors) ) {    
  13.               //是則放入選擇器中    
  14.                 ret.push( cur );    
  15.                 break;   
  16.             } else {    
  17.                 //  否則把當前節(jié)點變?yōu)槠涓腹?jié)點    
  18.                 cur = cur.parentNode;    
  19.                 if ( !cur || !cur.ownerDocument || cur === context || cur.nodeType === 11 ) {    
  20.                     break;    
  21.                 }    
  22.             }    
  23.         }    
  24.     }    
  25.     //如果大于1,進行唯一化操作    
  26.     ret = ret.length > 1 ? jQuery.unique( ret ) : ret;    
  27.     //將節(jié)點集合重新包裝成一個新jQuery對象返回    
  28.     return this.pushStack( ret, "closest", selectors );    
  29. },  

由于本人很反感位置偽類，認為其違反選擇器的法則之一(由關(guān)系選擇器隔開的各選擇器分組內(nèi)部，它們的位置是隨意的)，因此有關(guān)位置偽類的邏輯我也去掉了。

  1. closest: function( selectors ) {    
  2.     var ret = [], i, l, cur = this[0];    
  3.     // 如果字符串包含位置偽類或者是個元素節(jié)點,則封裝為一個jQuery對象,否則為0(即false的簡寫,用于快速跳過分支)    
  4.     var node =  selectors.nodeType ? selectors :false;    
  5.     var nodes = [].slice.call(this);//將jQuery對象轉(zhuǎn)換為純數(shù)組    
  6.     //遍歷原jQuery對象的節(jié)點    
  7.     for ( i = 0, l = this.length; i < l; i++ ) {    
  8.         cur = this[i];   
  9.         while ( cur ) {    
  10.             //如果是jQuery對象,則判定其是否包含當前節(jié)點,否則使用matchesSelector方法判定這個節(jié)點是否匹配給定的表達式selectors    
  11.             if ( obj ? nodes.indexOf(node) > -1 : jQuery.find.matchesSelector(cur, selectors) ) {    
  12.                 //indexOf方法在某些瀏覽器需要自行實現(xiàn)    
  13.                 //是則放入選擇器中    
  14.                 ret.push( cur );    
  15.                 break;    
  16.             } else {    
  17.                 //  否則把當前節(jié)點變?yōu)槠涓腹?jié)點    
  18.                 cur = cur.parentNode;    
  19.                 //如果沒有父節(jié)點(說明其還沒有插入DOM樹),或不是元素節(jié)點,或是文檔碎片(說明其剛被移出DOM樹)    
  20.                 if ( !cur || !cur.ownerDocument || cur.nodeType === 11 ) {    
  21.                     break;    
  22.                 }    
  23.             }    
  24.         }    
  25.     }    
  26.     //如果大于1,進行唯一化操作    
  27.     ret = ret.length > 1 ? jQuery.unique( ret ) : ret;    
  28.     //將節(jié)點集合重新包裝成一個新jQuery對象返回    
  29.     return $(ret);//本人覺得pushStack真是個邪惡的方法,讓菜鳥不籽有鏈下去的欲望,殊不知這是維護的大敵    
  30. },  

注意,jquery1.6中closest方法不再是返回包含一個或零個節(jié)點的jQuery對象了,再是對應(yīng)多個了(因此jQuery官網(wǎng)文檔是錯誤的,沒有即時同步這變化.)

  1. <!doctype html>    
  2.  
  3. <html>    
  4.   <head>    
  5.     <title>closest在jquery1.6的改變 by 司徒正美</title>    
  6.     <script src="jquery.js"></script>    
  7.     <script>    
  8.       $(function(){    
  9.         $("p").delegate("strong","click",function(){    
  10.          alert(this.innerHTML)    
  11.         });    
  12.         alert($("strong").closest("p").length)    
  13.       });    
  14.     </script>    
  15.   </head>    
  16.   <body>    
  17.     <p>    
  18.       <strong>使用事件代理1</strong>    
  19.     </p>    
  20.     <p>    
  21.      <strong>使用事件代理2</strong>    
  22.     </p>    
  23.     <p>    
  24.       <strong>使用事件代理3</strong>    
  25.     </p>    
  26.   </body>    
  27. </html>  

下面是我的實現(xiàn):

  1. closest: function( expr ) {    
  2.     // 如果字符串包含位置偽類或者是個元素節(jié)點,則封裝為一個dom對象,否則為0(即false的簡寫,用于快速跳過分支)    
  3.     var node =  expr.nodeType ? expr : 0, nodes = dom.slice(this);//將它轉(zhuǎn)換為純數(shù)組    
  4.     //遍歷原dom對象的節(jié)點    
  5.     for (var i = 0, ret = [], cur; cur = this[i++];) {//由于肯定里面都是節(jié)點,因此可以使用這種循環(huán)    
  6.         while (cur && cur.nodeType === 1 ) {    
  7.             //如果是dom對象,則判定其是否包含當前節(jié)點,否則使用matchesSelector方法判定這個節(jié)點是否匹配給定的表達式expr    
  8.             if ( node ? nodes.indexOf(node) > -1 : matchElement( cur, expr ) ){    
  9.                 //indexOf方法在某些瀏覽器需要自行實現(xiàn)    
  10.                 //是則放入選擇器中    
  11.                 ret.push( cur );    
  12.                 break;    
  13.             } else {    
  14.                 // 否則把當前節(jié)點變?yōu)槠涓腹?jié)點    
  15.                 cur = cur.parentNode;    
  16.             }    
  17.         }    
  18.     }    
  19.     //如果大于1,進行唯一化操作    
  20.     ret = ret.length > 1 ? dom.unique( ret ) : ret;    
  21.     //將節(jié)點集合重新包裝成一個新dom對象返回    
  22.     return this.labor(ret);    
  23. },  

原文鏈接：http://www.cnblogs.com/rubylouvre/archive/2011/05/12/2043854.html

【編輯推薦】

  1. 詳解jQuery構(gòu)造器的實現(xiàn)
  2. jQuery調(diào)用WCF開發(fā)實例經(jīng)驗分享
  3. 5月***超有趣的免費jQuery插件推薦
  4. 手把手教你使用jQuery操作元素的屬性與樣式
  5. jQuery性能指標和調(diào)優(yōu)

 

責任編輯：陳貽新 來源： 司徒正美的博客
jQuery
相關(guān)推薦

2011-01-24 13:20:49

2021-10-20 12:30:09

AIOps智能建筑物聯(lián)網(wǎng)

2024-12-31 00:07:12

2017-04-19 08:47:42

AsyncJavascript異步代碼

2015-07-16 14:40:20

簡化切換框架

2021-09-07 08:33:27

JavaScript TypeScript 函數(shù)

2021-08-03 06:57:36

Js事件節(jié)流

2009-12-04 17:16:41

PHP析構(gòu)函數(shù)

2024-04-11 14:04:23

C++編程函數(shù)

2012-02-01 10:33:59

Java

2023-04-17 10:10:42

2019-04-10 10:42:52

簡化Windows 10遷移

2023-08-11 17:19:03

2019-08-15 09:53:28

Windows 10啟動速度Windows

2013-04-19 10:28:10

紅帽

2010-08-03 13:45:17

DB2快照函數(shù)

2010-08-05 15:40:07

DB2快照函數(shù)

2020-03-26 07:49:13

智慧城市物聯(lián)網(wǎng)技術(shù)

2013-03-20 10:43:15

HttpHandlerHttpModule

2023-04-28 14:52:26

點贊
收藏

51CTO技術(shù)棧公眾號