如何理解與簡化jquery的closest函式

2021-09-06 03:22:14 字數 1786 閱讀 1302

在實現delegate方法中,有乙個很重要的輔助函式叫closest,雖然現在它歸類為遍歷節點這個模組中。這個函式實現得非常複雜,洋洋灑灑近50行,完全不符合極限程式設計的規矩。

closest: function( selectors, context ) ,

level = 1;

if ( cur && selectors.length )

}while ( cur && cur.ownerdocument && cur !== context ) );}}

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++ ) else }}

} ret = ret.length > 1 ? jquery.unique( ret ) : ret;

return this.pushstack( ret, "closest", selectors );

},

恰逢我也想造個輪子,便去研究它一翻,發現其第乙個可以是字串,元素節點或jquery物件,還有乙個可選引數,上下文。看原始碼前幾句,發現有個分支是判斷是否是array,估計是供內部呼叫的優化**,可以無視之。於是其方法簡化為:

closest: function( selectors, context )  else }}

}//如果大於1,進行唯一化操作

ret = ret.length > 1 ? jquery.unique( ret ) : ret;

//將節點集合重新包裝成乙個新jquery物件返回

return this.pushstack( ret, "closest", selectors );

},

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

closest: function( selectors )  else }}

}//如果大於1,進行唯一化操作

ret = ret.length > 1 ? jquery.unique( ret ) : ret;

//將節點集合重新包裝成乙個新jquery物件返回

return $(ret);//本人覺得pushstack真是個**的方法,讓菜鳥不籽有鏈下去的慾望,殊不知這是維護的大敵

},

注意,jquery1.6中closest方法不再是返回包含乙個或零個節點的jquery物件了,再是對應多個了(因此jquery官網文件是錯誤的,沒有即時同步這變化.)

使用事件**1

使用事件**2

使用事件**3

下面是我的實現:

closest: function( expr )  else }}

//如果大於1,進行唯一化操作

ret = ret.length > 1 ? dom.unique( ret ) : ret;

//將節點集合重新包裝成乙個新dom物件返回

return this.labor(ret);

},

c 類間關係,簡化理解

1.繼承關係 is a 類a被類b共有繼承,b的宣告形式 class b public a 2.組合關係 has a 如小鳥和翅膀的關係 類a是類b的一部分,實現形式為 class a class b 銷毀b時,會先銷毀a,a只能屬於b 3.聚合關係 弱所屬關係 如大雁和雁群的關係,大雁可以屬於不同...

如何實現乙個簡化版的 jQuery

對於操作dom來說,jquery是非常方便的乙個庫,雖然如今隨著react,vue之類框架的流行,jquery用得越來越少了,但是其中很多思想還是非常值得我們學習的,這篇文章將介紹如何從零開始實現乙個簡化版jquery。在這裡,我把這個庫命名為 clus class 的諧音 下面以 符號代替。首先需...

助你簡化開發的 jQuery 外掛程式

vanity toolset是一套方便的ui工具集,可以幫助你快速的搭建幻燈,聚光燈,佔位,收放相關的ui,它完成了大部分的ui功能,你只需要花費很少時間就可以構建乙個完整功能的ui 這個漂亮的進度條外掛程式可以幫助你快速構建乙個功能豐富的載入條,讓你的介面不在千篇一律。乙個幫助你建立元素透明效果的...