首頁 > web前端 > js教程 > 關於jQuery中的each方法(jQuery到底做了什麼)_jquery

關於jQuery中的each方法(jQuery到底做了什麼)_jquery

WBOY
發布: 2016-05-16 16:56:57
原創
1500 人瀏覽過

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 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;
break;
}
}
} else {
for ( ; i if ( callback.call( object[ i ], i, object[ i ] ) === false ) {
break;
}
}
}
}

return object;
},


這段程式碼比較簡單的,應該沒什麼問題.
為了測試這個東西,我寫了下面一段js; 複製程式碼

複製程式碼


複製程式碼

複製程式碼複製程式碼

複製程式碼


複製程式碼

關於jQuery中的each方法(jQuery到底做了什麼)_jquery
複製程式碼


複製程式碼 程式碼如下: $.each($(".demo"),function(){
console.log("show");
});


然後再加一段html:


關於jQuery中的each方法(jQuery到底做了什麼)_jquery
複製程式碼
程式碼如下: 程式碼如下:

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

 
可以看到,這裡的object竟然不是我所想要的那三個html對象,竟然是js內建的8種資料型別。
之後在jquery的原始碼中加了一段程式碼: 複製程式碼


複製程式碼

程式碼:

🎜>
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函數,就能實現自己調用,這對於提高程式碼的複用程度用處不小。

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

偶有所得,以記錄之,以防忘記!
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板