1. 程式人生 > >jQuery-原始碼閱讀,pushStack()入棧方法

jQuery-原始碼閱讀,pushStack()入棧方法

首先了解下棧:棧(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()等常用方法中都呼叫了這個入棧方法。