關於jQuery中的each.(jQuery到底幹瞭什麼!)

1. 估計很多人都會用到jQuery中的each方法。

那就來看一看jQuery都幹瞭些什麼。

找到jquery中的each源碼:

each: function( object, callback, args ) {
		var name, i = 0,
			length = object.length,
			isObj = length === undefined || jQuery.isFunction( object );
			
		if ( args ) {	
			if ( isObj ) {	
				for ( name in object ) {	
					if ( callback.apply( object[ name ], args ) === false ) {
						break;
					}
				}
			} else {
				for ( ; i < length; ) {
					if ( callback.apply( object[ i++ ], args ) === false ) {
						break;
					}
				}
			}

		// A special, fast, case for the most common use of each
		} else {
			if ( isObj ) {
				for ( name in object ) {
					if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
						break;
					}
				}
			} else {
				for ( ; i < length; ) {
					if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {
						break;
					}
				}
			}
		}

		return object;
	},

這段代碼還是比較簡單的,應該沒什麼問題.

為瞭測試這個東西,我寫瞭下面一段js;

	$.each($(".demo"),function(){
				console.log("show");
		});

然後再加一段html:

	
	
	

然後拿著jQuery的源碼來調試,以為能得到正確的結果。可是很遺憾。

可以看到,這裡的object竟然不是我所想要的那三個html對象,竟然是js內置的8種數據類型。

之後在jquery的源碼中加瞭一段代碼:vcD4KPHA+PC9wPgo8cHJlIGNsYXNzPQ==”brush:java;”>console.log(Object.prototype.toString(object));
console.log(length);
之後的輸入如下:

也就是說在文檔加載的時候,jQuery會用each遍歷dom對象,即使沒有使用

$(function(){
});

當遍歷指定對象之後,依舊會繼續冒泡遍歷父級元素。

2. 根據jQuery的源碼使用回調函數參數

	$.each($(".demo"),function(a,b){
			console.log(a + "" + $(a).attr("class"));
		})

從源碼可以看到:

callback.call( object[ i ], i, object[ i++ ] ) 

最後都將當前對象通過call方法傳遞給瞭回調函數,那麼就可以像上面一樣去使用當前對象中的屬性。當然也可以直接用this來調用。

如果說復雜些的東西,比如,這裡我是將$(“.demo”)作為object傳遞進去給$.each()

如裡某些時候不是傳遞的jQuery或者html對象。而是一個Object或者array。

而在array中又存在很多其它的object或者方法。

這樣就能弄出更多的效果。

3. 采用call或者apply實現回調模式.

從上面的代碼可以看到:

callback.call(obj,args)

callback.apply([obj],args)

之類的代碼,這裡隻需要傳遞callback函數,就能實現自己調用,這對於提高代碼的復用程度用處不小。

但是也存在某些缺點,比如代碼可讀性降低,耦合程度增加等。

偶有所得,以記錄之,以防忘記!

發佈留言