jQuery each() - Wie funktioniert es wirklich intern?

Question

Ich habe die jQuery-Quelle zu diesem Thema konsultiert, aber ich muss zugeben, es ist wahrscheinlich jenseits meines Verständnisses - oder ich suche am falschen Ort. https://github.com/jquery/jquery/blob/master/src/core.js

Strecken Linie 222 gibt es eine Funktion, die rekursiv aussieht, und dann wieder um die Linie 566 gibt es ein weiteres in .extend() Namespace deklariert.

Ich bin nur neugierig - wie genau funktioniert das? Zum Beispiel, wenn ich rufe:

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

Wie es mit dem Fahrrad durch die Anordnung von DOM-Elementen nicht kennt, wann man aufhören muss, wie funktioniert es die Funktion anwenden? Es kann nicht einfach

$('.item').doThis() 

weil DoThis() möglicherweise kein Mitglied dieses Objekts sein.

Bitte erleuchte mich :) danke.

Answer 1

Nein, es ist nicht rekursiv. Die Funktion auf line 222 ist die eine auf jQuery-Prototyp ($.fn), während die Funktion, die es aufruft, ist jQuery.each - eine statische Eigenschaft, die in line 566 definiert ist. Beachten Sie, wie extend funktioniert: Wenn kein zu erweiterndes Objekt angegeben wird, verwendet es this. Es wird sowohl auf jQuery als auch auf jQuery.fn in verschiedenen Abschnitten des Codes angewendet.

also wie funktioniert das genau?

$obj.each(callback) ruft die $.fn.each-Methode, die auf der $.each jQuery Instanz (DOM wrapper) selbst gilt: line 223.

Jetzt, in $.each, gibt es vier Fälle: Mit oder ohne args Array geliefert, und auf einer Array-ähnlichen Struktur oder auf anderen Objekten. Sie haben keine zusätzlichen Argumente übergeben, und jQuery-Instanzen haben eine length-Eigenschaft und die DOM-Elemente in numerischen Indizes, sodass die Schleife in line 596 ausgeführt wird. So ist Ihr Anruf entspricht

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

Answer 2

Soweit ich weiß, dieses

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

ist das Äquivalent, dies zu tun:

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

Die Aufgabe wird durch ein $ Auswahl zurückgegeben wird, ist tatsächlich ein Array von DOM-Elemente mit ein eine ganze Reihe zusätzlicher Methoden, die damit verbunden sind, so dass Sie im Prinzip damit arbeiten können, wie Sie es mit einem Array tun würden. Hoffnung, die Dinge aufräumt!

Answer 3

Jede Abfrage, die Sie in jQuery tun wird als ein Array wie Objekt gespeichert, dh Sie können die Liste der DOM-Elemente zugreifen können Ihre Abfrage, indem Sie diese gefunden hat:

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

Intern verwendet $() jeweils $ .each, was eine Möglichkeit ist, durch Ihre Sammlung zu iterieren, die Funktion aufzurufen, die Sie als Argument übergeben haben, und 'Function.apply' zu verwenden, um 'this' als aktuell zu definieren Objekt wird durchlaufen.

Answer 4

Check out Linien 566-605 in the source

Es ist iterativ und recht unkompliziert.