jQuery each() - Come funziona veramente internamente?

Question

Ho consultato la fonte di jQuery su questo, ma devo ammettere che è probabilmente oltre la mia comprensione - o sto cercando nel posto sbagliato.

Intorno alla riga 222 c'è una funzione che sembra ricorsiva, e poi ancora intorno alla riga 566 ce n'è un'altra dichiarata nello spazio dei nomi .extend().

Sono solo curioso: come funziona esattamente? Per esempio, quando io chiamo:

$('.item').each(function(){ 
    // Do Something 
}); 

Come fa a sapere per scorrere l'array di elementi DOM, quando fermarsi, come si applica la funzione? Non può fare solo

$('.item').doThis() 

perché doThis() potrebbe non essere un membro di tale oggetto.

Per favore chiariscimi :) grazie.

Answer 1

No, non è ricorsivo. La funzione su line 222 è quella sul prototipo di jQuery ($.fn), mentre la funzione che chiama è jQuery.each - una proprietà statica che è definita in line 566. Nota come funziona extend: Se non viene fornito alcun oggetto da estendere, utilizza this. È applicato entrambi su jQuery e jQuery.fn in diverse sezioni del codice.

così come funziona esattamente?

$obj.each(callback) sta chiamando il metodo $.fn.each, che applica $.each sull'istanza jQuery (l'involucro DOM) stesso: line 223.

Ora, in $.each, ci sono quattro casi: con o senza l'array args fornito, e su una struttura tipo array o su altri oggetti. Non hai passato ulteriori argomenti e le istanze di jQuery hanno una proprietà length e hanno gli elementi DOM in indici numerici, quindi verrà eseguito il ciclo in line 596. Quindi, la chiamata è equivalente a

for (var i=0, len=$obj.length; i<len; i++) 
    if (callback.call($obj[i], i, $obj[i]) === false) break; 

Answer 2

Per quanto io sappia, questo

$('selector').each(func); 

è l'equivalente di fare questo:

func = ...; 
$selector = $('selector'); 
for (var i = 0; i < $selector.length; i++) { 
    if (func.call($selector[i], i, $selector[i]) === false) { 
     break; 
    } 
} 

L'oggetto restituito da una selezione $ è in realtà un array di elementi DOM con un un sacco di metodi extra ad esso collegati, quindi puoi fondamentalmente lavorare con esso proprio come faresti con una matrice. Spero che chiarisca le cose!

Answer 3

Ogni query si fa in jQuery viene memorizzato come un array come oggetto, significa che è possibile accedere alla lista degli elementi DOM query ha trovato in questo modo:

$('.item')[0] //The first item found by your query 

Internamente, $(). Ognuno usa $ .each, che è un modo per iterare attraverso la tua collezione, chiamare la funzione che hai passato come argomento, e usare 'Function.apply' per impostare 'questo' come corrente oggetto viene iterato attraverso.

Answer 4

Scopri linee 566-605 in the source

È iterativo e abbastanza semplice.