如何理解与简化jQuery的closest函数

在实现delegate方法中，有一个很重要的辅助函数叫closest，虽然现在它归类为遍历节点这个模块中。这个函数实现得非常复杂，洋洋洒洒近50行，完全不符合极限编程的规矩。

成都创新互联-专业网站定制、快速模板网站建设、高性价比台江网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式台江网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖台江地区。费用合理售后完善，十年实体公司更值得信赖。

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

恰逢我也想造个轮子，便去研究它一翻，发现其***个可以是字符串，元素节点或jQuery对象，还有一个可选参数，上下文。看源码前几句，发现有个分支是判断是否是Array，估计是供内部调用的优化代码，可以无视之。于是其方法简化为：

 
 
 
      
  
  
  1. closest: function( selectors, context ) {    
    2.   
  
  
  2.     var ret = [], i, l, cur = this[0];    
    3.   
  
  
  3.     // 如果字符串包含位置伪类或者是个元素节点,则封装为一个jQuery对象,否则为0(即false的简写,用于快速跳过分支)    
    4.   
  
  
  4.     var pos = POS.test( selectors ) || typeof selectors !== "string" ?    
    5.   
  
  
  5.         jQuery( selectors, context || this.context ) :    
    6.   
  
  
  6.         0;    
    7.   
  
  
  7.     //遍历原jQuery对象的节点    
    8.   
  
  
  8.     for ( i = 0, l = this.length; i < l; i++ ) {    
    9.   
  
  
  9.         cur = this[i];    
    10.   
  
  
  10.         while ( cur ) {    
    11.   
  
  
  11.             //如果是jQuery对象,则判定其是否包含当前节点,否则使用matchesSelector方法判定这个节点是否匹配给定的表达式selectors    
    12.   
  
  
  12.             if ( pos ? pos.index(cur) > -1 : jQuery.find.matchesSelector(cur, selectors) ) {    
    13.   
  
  
  13.               //是则放入选择器中    
    14.   
  
  
  14.                 ret.push( cur );    
    15.   
  
  
  15.                 break;   
    16.   
  
  
  16.             } else {    
    17.   
  
  
  17.                 //  否则把当前节点变为其父节点    
    18.   
  
  
  18.                 cur = cur.parentNode;    
    19.   
  
  
  19.                 if ( !cur || !cur.ownerDocument || cur === context || cur.nodeType === 11 ) {    
    20.   
  
  
  20.                     break;    
    21.   
  
  
  21.                 }    
    22.   
  
  
  22.             }    
    23.   
  
  
  23.         }    
    24.   
  
  
  24.     }    
    25.   
  
  
  25.     //如果大于1,进行唯一化操作    
    26.   
  
  
  26.     ret = ret.length > 1 ? jQuery.unique( ret ) : ret;    
    27.   
  
  
  27.     //将节点集合重新包装成一个新jQuery对象返回    
    28.   
  
  
  28.     return this.pushStack( ret, "closest", selectors );    
    29.   
  
  
  29. },  
    30.

由于本人很反感位置伪类，认为其违反选择器的法则之一(由关系选择器隔开的各选择器分组内部，它们的位置是随意的)，因此有关位置伪类的逻辑我也去掉了。

 
 
 
      
  
  
  1. closest: function( selectors ) {    
    2.   
  
  
  2.     var ret = [], i, l, cur = this[0];    
    3.   
  
  
  3.     // 如果字符串包含位置伪类或者是个元素节点,则封装为一个jQuery对象,否则为0(即false的简写,用于快速跳过分支)    
    4.   
  
  
  4.     var node =  selectors.nodeType ? selectors :false;    
    5.   
  
  
  5.     var nodes = [].slice.call(this);//将jQuery对象转换为纯数组    
    6.   
  
  
  6.     //遍历原jQuery对象的节点    
    7.   
  
  
  7.     for ( i = 0, l = this.length; i < l; i++ ) {    
    8.   
  
  
  8.         cur = this[i];   
    9.   
  
  
  9.         while ( cur ) {    
    10.   
  
  
  10.             //如果是jQuery对象,则判定其是否包含当前节点,否则使用matchesSelector方法判定这个节点是否匹配给定的表达式selectors    
    11.   
  
  
  11.             if ( obj ? nodes.indexOf(node) > -1 : jQuery.find.matchesSelector(cur, selectors) ) {    
    12.   
  
  
  12.                 //indexOf方法在某些浏览器需要自行实现    
    13.   
  
  
  13.                 //是则放入选择器中    
    14.   
  
  
  14.                 ret.push( cur );    
    15.   
  
  
  15.                 break;    
    16.   
  
  
  16.             } else {    
    17.   
  
  
  17.                 //  否则把当前节点变为其父节点    
    18.   
  
  
  18.                 cur = cur.parentNode;    
    19.   
  
  
  19.                 //如果没有父节点(说明其还没有插入DOM树),或不是元素节点,或是文档碎片(说明其刚被移出DOM树)    
    20.   
  
  
  20.                 if ( !cur || !cur.ownerDocument || cur.nodeType === 11 ) {    
    21.   
  
  
  21.                     break;    
    22.   
  
  
  22.                 }    
    23.   
  
  
  23.             }    
    24.   
  
  
  24.         }    
    25.   
  
  
  25.     }    
    26.   
  
  
  26.     //如果大于1,进行唯一化操作    
    27.   
  
  
  27.     ret = ret.length > 1 ? jQuery.unique( ret ) : ret;    
    28.   
  
  
  28.     //将节点集合重新包装成一个新jQuery对象返回    
    29.   
  
  
  29.     return $(ret);//本人觉得pushStack真是个邪恶的方法,让菜鸟不籽有链下去的欲望,殊不知这是维护的大敌    
    30.   
  
  
  30. },  
    31.

注意,jquery1.6中closest方法不再是返回包含一个或零个节点的jQuery对象了,再是对应多个了(因此jQuery官网文档是错误的,没有即时同步这变化.)

 
 
 
      
  
  
  1.     
    2.   
  
  
  2.  
    3.   
  
  
  3.     
    4.   
  
  
  4.       
    5.   
  
  
  5.     closest在jquery1.6的改变 by 司徒正美    
    6.   
  
  
  6.         
    7.   
  
  
  7.         
    8.   
  
  
  8.       
    9.   
  
  
  9.       
    10.   
  
  
  10.     
        
    11.   
  
  
  11.       使用事件代理1    
    12.   
  
  
  12.     
        
    13.   
  
  
  13.     
        
    14.   
  
  
  14.      使用事件代理2    
    15.   
  
  
  15.     
        
    16.   
  
  
  16.     
        
    17.   
  
  
  17.       使用事件代理3    
    18.   
  
  
  18.     
        
    19.   
  
  
  19.       
    20.   
  
  
  20.   
    21.

下面是我的实现:

 
 
 
      
  
  
  1. closest: function( expr ) {    
    2.   
  
  
  2.     // 如果字符串包含位置伪类或者是个元素节点,则封装为一个dom对象,否则为0(即false的简写,用于快速跳过分支)    
    3.   
  
  
  3.     var node =  expr.nodeType ? expr : 0, nodes = dom.slice(this);//将它转换为纯数组    
    4.   
  
  
  4.     //遍历原dom对象的节点    
    5.   
  
  
  5.     for (var i = 0, ret = [], cur; cur = this[i++];) {//由于肯定里面都是节点,因此可以使用这种循环    
    6.   
  
  
  6.         while (cur && cur.nodeType === 1 ) {    
    7.   
  
  
  7.             //如果是dom对象,则判定其是否包含当前节点,否则使用matchesSelector方法判定这个节点是否匹配给定的表达式expr    
    8.   
  
  
  8.             if ( node ? nodes.indexOf(node) > -1 : matchElement( cur, expr ) ){    
    9.   
  
  
  9.                 //indexOf方法在某些浏览器需要自行实现    
    10.   
  
  
  10.                 //是则放入选择器中    
    11.   
  
  
  11.                 ret.push( cur );    
    12.   
  
  
  12.                 break;    
    13.   
  
  
  13.             } else {    
    14.   
  
  
  14.                 // 否则把当前节点变为其父节点    
    15.   
  
  
  15.                 cur = cur.parentNode;    
    16.   
  
  
  16.             }    
    17.   
  
  
  17.         }    
    18.   
  
  
  18.     }    
    19.   
  
  
  19.     //如果大于1,进行唯一化操作    
    20.   
  
  
  20.     ret = ret.length > 1 ? dom.unique( ret ) : ret;    
    21.   
  
  
  21.     //将节点集合重新包装成一个新dom对象返回    
    22.   
  
  
  22.     return this.labor(ret);    
    23.   
  
  
  23. },  
    24.

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

【编辑推荐】

  1. 详解jQuery构造器的实现
  2. jQuery调用WCF开发实例经验分享
  3. 5月***超有趣的免费jQuery插件推荐
  4. 手把手教你使用jQuery操作元素的属性与样式
  5. jQuery性能指标和调优

网站标题：如何理解与简化jQuery的closest函数
本文地址：http://www.shufengxianlan.com/qtweb/news33/122383.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

企业网站制作知识

分类信息网站

成都营销型网站建设　　 　上市企业网站建设方案　　 　南充做网站　　 　成都响应式网站建设　　 　小程序开发　　 　雕琢时光茶叶　　 　成都服务器托管　　 　四川柴油发电机　　 　响应式报价　　 　成都网络营销　　 　企业网站建设　　 　犀浦门窗定制　　 　响应式网站设计　　 　成都网站推广　　 　响应式网站　　 　网站建设公司　　 　四川搅拌罐车　　 　成都企业网站建设公司　　 　四川服务器托管　　 　成都网站改版