快捷導(dǎo)航

關(guān)于jQuery中的each方法(jQuery到底干了什么)

更新時(shí)間：2014年03月05日 16:54:39 作者：

這篇文章主要介紹了關(guān)于jQuery中的each方法,需要的朋友可以參考下

1. 估計(jì)很多人都會(huì)用到j(luò)Query中的each方法。

那就來(lái)看一看jQuery都干了些什么。

找到j(luò)query中的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; 
}, 

這段代碼還是比較簡(jiǎn)單的，應(yīng)該沒(méi)什么問(wèn)題.

為了測(cè)試這個(gè)東西，我寫(xiě)了下面一段js;

復(fù)制代碼代碼如下:

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

然后再加一段html:

復(fù)制代碼代碼如下:

 
<a href="" class="demo"></a> 
<a href="" class="demo"></a> 
<a href="" class="demo"></a> 

然后拿著jQuery的源碼來(lái)調(diào)試，以為能得到正確的結(jié)果?？墒呛苓z憾。

可以看到，這里的object竟然不是我所想要的那三個(gè)html對(duì)象，竟然是js內(nèi)置的8種數(shù)據(jù)類(lèi)型。

之后在jquery的源碼中加了一段代碼:

復(fù)制代碼代碼如下:

 
console.log(Object.prototype.toString(object)); 
console.log(length); 

之后的輸入如下：

也就是說(shuō)在文檔加載的時(shí)候，jQuery會(huì)用each遍歷dom對(duì)象,即使沒(méi)有使用

復(fù)制代碼代碼如下:

 
$(function(){ 
}); 

當(dāng)遍歷指定對(duì)象之后，依舊會(huì)繼續(xù)冒泡遍歷父級(jí)元素。

2. 根據(jù)jQuery的源碼使用回調(diào)函數(shù)參數(shù)

復(fù)制代碼代碼如下:

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

從源碼可以看到:

復(fù)制代碼代碼如下:

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

最后都將當(dāng)前對(duì)象通過(guò)call方法傳遞給了回調(diào)函數(shù)，那么就可以像上面一樣去使用當(dāng)前對(duì)象中的屬性。當(dāng)然也可以直接用this來(lái)調(diào)用。

如果說(shuō)復(fù)雜些的東西，比如，這里我是將$(".demo")作為object傳遞進(jìn)去給$.each()

如里某些時(shí)候不是傳遞的jQuery或者h(yuǎn)tml對(duì)象。而是一個(gè)Object或者array。

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

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

3. 采用call或者apply實(shí)現(xiàn)回調(diào)模式.

從上面的代碼可以看到：

復(fù)制代碼代碼如下:

callback.call(obj,args)

復(fù)制代碼代碼如下:

callback.apply([obj],args)

之類(lèi)的代碼，這里只需要傳遞callback函數(shù)，就能實(shí)現(xiàn)自己調(diào)用，這對(duì)于提高代碼的復(fù)用程度用處不小。

但是也存在某些缺點(diǎn)，比如代碼可讀性降低，耦合程度增加等。

偶有所得，以記錄之，以防忘記！

您可能感興趣的文章: