jQuery-原始碼閱讀,pushStack()入棧方法
阿新 • • 發佈:2019-02-02
首先了解下棧:棧(stack)又名堆疊,它是一種運算受限的線性表。其限制是僅允許在表的一端進行插入和刪除運算。棧的規則是先進後出。下面看下jQuery中鏈式方法的使用:
$('ul').children('li').css("backgroundColor","#CCC");
首先選擇頁面中ul元素,再尋找其子元素中li,為其設定背景顏色為灰色。這裡,ul首先入棧,子元素li後入棧,則css()最後操作的是li元素不是ul,這裡是因為jQuery裡所有鏈式操作都呼叫了jQuery中的工具方法——pushStack()。下面看下這個神奇函式的原始碼:
pushStack: function( elems ) { // Build a new jQuery matched element set var ret = jQuery.merge( this.constructor(), elems ); // Add the old object onto the stack (as a reference) ret.prevObject = this; ret.context = this.context; // Return the newly-formed element set return ret; }
可以看到,首先新建一個ret物件,其中連線(merge)了jQuery和傳入新物件(集合),然後設定ret物件的上級元素為this,返回ret。然後再看下返回上級的end()在原始碼中的實現:
end: function() {
return this.prevObject || this.constructor(null);
}
end()利用了pushStack中的prevObject,返回該物件,若該物件為空,返回建構函式。
在原始碼中多次使用這個入棧函式,如map()、slice()、eq()等常用方法中都呼叫了這個入棧方法。