在實現delegate方法中，有一個很重要的輔助函數叫closest，雖然現在它歸類為遍歷節點這個模塊中。這個函數實現得非常復雜，洋洋灑灑近50行，完全不符合極限編程的規矩。
closest: function( selectors, context ) {
var ret = [], i, l, cur = this[0];
// Array
if ( jQuery.isArray( selectors ) ) {//這分支的過濾邏輯基本與下面的一致
var match, selector,
matches = {},
level = 1;
if ( cur && selectors.length ) {
for ( i = 0, l = selectors.length; i < l; i++ ) {
selector = selectors[i];
if ( !matches[ selector ] ) {
matches[ selector ] = POS.test( selector ) ?
jQuery( selector, context || this.context ) :
selector;
}
}
while ( cur && cur.ownerDocument && cur !== context ) {
for ( selector in matches ) {
match = matches[ selector ];//這里頻繁創建新的jQuery對象與使用is這樣復雜的方法,我不覺得其高效到哪里去
if ( match.jquery ? match.index( cur ) > -1 : jQuery( cur ).is( match ) ) {
ret.push({ selector: selector, elem: cur, level: level });
}
}
cur = cur.parentNode;
level++;
}
}
return ret;
}
// String
var pos = POS.test( selectors ) || typeof selectors !== "string" ?
jQuery( selectors, context || this.context ) :
0;
for ( i = 0, l = this.length; i < l; i++ ) {
cur = this[i];
while ( cur ) {
if ( pos ? pos.index(cur) > -1 : jQuery.find.matchesSelector(cur, selectors) ) {
ret.push( cur );
break;
} else {
cur = cur.parentNode;
if ( !cur || !cur.ownerDocument || cur === context || cur.nodeType === 11 ) {
break;
}
}
}
}
ret = ret.length > 1 ? jQuery.unique( ret ) : ret;
return this.pushStack( ret, "closest", selectors );
},
恰逢我也想造個輪子，便去研究它一翻，發現其第一個可以是字符串，元素節點或jQuery對象，還有一個可選參數，上下文?？?a >源碼前幾句，發現有個分支是判斷是否是Array，估計是供內部調用的優化代碼，可以無視之。于是其方法簡化為：
closest: function( selectors, context ) {
var ret = [], i, l, cur = this[0];
// 如果字符串包含位置偽類或者是個元素節點,則封裝為一個jQuery對象,否則為0(即false的簡寫,用于快速跳過分支)
var pos = POS.test( selectors ) || typeof selectors !== "string" ?
jQuery( selectors, context || this.context ) :
0;
//遍歷原jQuery對象的節點
for ( i = 0, l = this.length; i < l; i++ ) {
cur = this[i];
while ( cur ) {
//如果是jQuery對象,則判定其是否包含當前節點,否則使用matchesSelector方法判定這個節點是否匹配給定的表達式selectors
if ( pos ? pos.index(cur) > -1 : jQuery.find.matchesSelector(cur, selectors) ) {
//是則放入選擇器中
ret.push( cur );
break;
} else {
// 否則把當前節點變為其父節點
cur = cur.parentNode;
if ( !cur || !cur.ownerDocument || cur === context || cur.nodeType === 11 ) {
break;
}
}
}
}
//如果大于1,進行唯一化操作
ret = ret.length > 1 ? jQuery.unique( ret ) : ret;
//將節點集合重新包裝成一個新jQuery對象返回
return this.pushStack( ret, "closest", selectors );
},
由于本人很反感位置偽類，認為其違反選擇器的法則之一（由關系選擇器隔開的各選擇器分組內部，它們的位置是隨意的），因此有關位置偽類的邏輯我也去掉了。
closest: function( selectors ) {
var ret = [], i, l, cur = this[0];
// 如果字符串包含位置偽類或者是個元素節點,則封裝為一個jQuery對象,否則為0(即false的簡寫,用于快速跳過分支)
var node = selectors.nodeType ? selectors :false;
var nodes = [].slice.call(this);//將jQuery對象轉換為純數組
//遍歷原jQuery對象的節點
for ( i = 0, l = this.length; i < l; i++ ) {
cur = this[i];
while ( cur ) {
//如果是jQuery對象,則判定其是否包含當前節點,否則使用matchesSelector方法判定這個節點是否匹配給定的表達式selectors
if ( obj ? nodes.indexOf(node) > -1 : jQuery.find.matchesSelector(cur, selectors) ) {
//indexOf方法在某些瀏覽器需要自行實現
//是則放入選擇器中
ret.push( cur );
break;
} else {
// 否則把當前節點變為其父節點
cur = cur.parentNode;
//如果沒有父節點(說明其還沒有插入DOM樹),或不是元素節點,或是文檔碎片(說明其剛被移出DOM樹)
if ( !cur || !cur.ownerDocument || cur.nodeType === 11 ) {
break;
}
}
}
}
//如果大于1,進行唯一化操作
ret = ret.length > 1 ? jQuery.unique( ret ) : ret;
//將節點集合重新包裝成一個新jQuery對象返回
return $(ret);//本人覺得pushStack真是個邪惡的方法,讓菜鳥不籽有鏈下去的欲望,殊不知這是維護的大敵
},
注意,jquery1.6中closest方法不再是返回包含一個或零個節點的jQuery對象了,再是對應多個了(因此jQuery官網文檔是錯誤的,沒有即時同步這變化.)
<!doctype html>
<html>
<head>
<title>closest在jquery1.6的改變 by 司徒正美</title>
<script src="jquery.js"></script>
<script>
$(function(){
$("p").delegate("strong","click",function(){
alert(this.innerHTML)
});
alert($("strong").closest("p").length)
});
</script>
</head>
<body>
<p>
<strong>使用事件代理1</strong>
</p>
<p>
<strong>使用事件代理2</strong>
</p>
<p>
<strong>使用事件代理3</strong>
</p>
</body>
</html>
下面是我的實現:
closest: function( exPR ) {
// 如果字符串包含位置偽類或者是個元素節點,則封裝為一個dom對象,否則為0(即false的簡寫,用于快速跳過分支)
var node = expr.nodeType ? expr : 0, nodes = dom.slice(this);//將它轉換為純數組
//遍歷原dom對象的節點
for (var i = 0, ret = [], cur; cur = this[i++];) {//由于肯定里面都是節點,因此可以使用這種循環
while (cur && cur.nodeType === 1 ) {
//如果是dom對象,則判定其是否包含當前節點,否則使用matchesSelector方法判定這個節點是否匹配給定的表達式expr
if ( node ? nodes.indexOf(node) > -1 : matchElement( cur, expr ) ){
//indexOf方法在某些瀏覽器需要自行實現
//是則放入選擇器中
ret.push( cur );
break;
} else {
// 否則把當前節點變為其父節點
cur = cur.parentNode;
}
}
}
//如果大于1,進行唯一化操作
ret = ret.length > 1 ? dom.unique( ret ) : ret;
//將節點集合重新包裝成一個新dom對象返回
return this.labor(ret);
},
新聞熱點
疑難解答
