Das gesamte jQuery-Framework ist sehr komplex und nicht leicht zu verstehen. Ich habe dieses umfangreiche und leistungsstarke Framework in den letzten Tagen studiert. Die Gesamtarchitektur von jQuery kann unterteilt werden in: Einstiegsmodul, unteres Modul und Funktionsmodul. Hier nehmen wir jquery-1.7.1 als Beispiel für die Analyse.
Die Gesamtarchitektur von jquery
Bei der Analyse des obigen Codes haben wir festgestellt, dass JQuery die Schreibmethode der Selbstausführung anonymer Funktionen übernimmt. Der Vorteil davon besteht darin, dass das Problem der Namensraum- und Variablenverschmutzung wirksam verhindert werden kann. Die Abkürzung des obigen Codes lautet:
Parameterfenster
Die anonyme Funktion übergibt zwei Parameter, einer ist Fenster und der andere ist undefiniert. Wir wissen, dass Variablen in js Bereichsketten haben. Die beiden übergebenen Variablen werden zu lokalen Variablen der anonymen Funktion und der Zugriff erfolgt schneller. Durch die Übergabe des Fensterobjekts kann das Fensterobjekt als lokale Variable verwendet werden. Beim Zugriff auf das Fensterobjekt in jquery ist es nicht erforderlich, die Bereichskette an die Spitze zurückzugeben -Ebenenbereich, sodass auf das Fensterobjekt schneller zugegriffen werden kann.
Parameter undefiniert
Wenn js nach einer Variablen sucht, sucht die js-Engine zunächst im Bereich der Funktion selbst nach der Variablen. Wenn sie nicht vorhanden ist, wird die Suche nach oben fortgesetzt . Wenn es nicht gefunden werden kann, wird undefiniert zurückgegeben. undefiniert ist eine Eigenschaft des Fensterobjekts. Durch die Übergabe des undefinierten Parameters ohne Zuweisung eines Werts kann die Gültigkeitskette bei der Suche nach undefiniert verkürzt werden. Stellen Sie im Rahmen einer selbstaufrufenden anonymen Funktion sicher, dass undefiniert wirklich undefiniert ist. Denn undefiniert kann überschrieben und mit einem neuen Wert versehen werden.
Was ist jquery.fn?
Durch die Analyse des obigen Codes haben wir festgestellt, dass jQuery.fn jQuery.prototype ist. Der Vorteil dieser Schreibweise besteht darin, dass es kürzer ist. Später haben wir gesehen, dass jquery der Einfachheit halber einfach ein $-Symbol anstelle von jquery verwendet hat. Daher verwenden wir oft $(), wenn wir das jquery-Framework verwenden,
Konstruktor jQuery()
Bildbeschreibung
jQuery-Objekte werden nicht durch neue jQuery erstellt, sondern durch neue jQuery.fn.init:
new jQuery.fn.init( selector, context, rootjQuery ) zurückgeben;
}
Hier wird eine jQuery-Variable definiert, deren Wert der jQuery-Konstruktor ist, der zurückgegeben und der jQuery-Variablen in Zeile 955 (oberster Code) zugewiesen wird
jQuery.fn.init
jQuery.fn (Zeile 97 oben) ist das Prototypobjekt der Konstruktorfunktion jQuery() und jQuery.fn.init() ist die jQuery-Prototypmethode, die auch als Konstruktor bezeichnet werden kann. Verantwortlich für das Parsen der Parametertypen Selektor und Kontext sowie für die Durchführung entsprechender Suchvorgänge.
Parameterkontext: Sie können ihn nicht übergeben, oder Sie können ihn in einem jQuery-Objekt, einem DOM-Element oder einem der gewöhnlichen js-Objekte übergeben
Parameter rootjQuery: jQuery-Objekt, das das Dokumentobjekt enthält und für Situationen wie einen document.getElementById()-Fehler verwendet wird.
Standardmäßig beginnt die Suche nach übereinstimmenden Elementen beim Stammelement-Dokumentobjekt, d. h. der Suchbereich ist der gesamte Dokumentbaum, Sie können jedoch auch den zweiten Parameter context übergeben, um den Suchbereich einzuschränken. Zum Beispiel:
Die Methoden jQuery.extend(object) und jQuery.fn.extend(object) werden verwendet, um zwei oder mehr Objekte zum ersten Objekt zusammenzuführen. Der relevante Quellcode lautet wie folgt (Teil):
jQuery.extend(object); Fügen Sie der jQuery-Klasse eine Klassenmethode hinzu, was als Hinzufügen einer statischen Methode verstanden werden kann. Zum Beispiel:
Fügen Sie eine „statische Methode“ namens „add“ für jQuery hinzu, und dann können Sie diese Methode dort verwenden, wo jQuery eingeführt wird,
$.add(3,4); //return 7
jQuery.fn.extend(object), sehen Sie sich eine Codedemonstration auf der offiziellen Website wie folgt an:
<script><br>
jQuery.fn.extend({<br>
check: function() {<br>
return this.each(function() {<br>
This.checked = true;<br>
});<br>
},<br>
Deaktivieren Sie: function() {<br>
return this.each(function() {<br>
This.checked = false;<br>
});<br>
}<br>
});<br>
// Verwenden Sie die neu erstellte .check()-Methode<br>
$( "input[type='checkbox']" ).check();<br>
</script>
CSS-Auswahl-Engine Sizzle
Man kann sagen, dass jQuery für den Betrieb von DOM geboren wurde. Der Grund, warum jQuery so leistungsfähig ist, liegt an der CSS-Auswahl-Engine Sizzle. Die Parsing-Regeln zitieren ein Beispiel aus dem Internet:
selector："div > p div.aaron input[type="checkbox"]"
Parsing-Regeln:
1 Folgen Sie von rechts nach links
2 Nehmen Sie das letzte Token heraus, z. B. [type="checkbox"]
Übereinstimmungen: Array[3]
Typ: „ATTR“
Kontrollkästchen „]“
}
3 Filtertyp Wenn der Typ > ~ leer ist, einer der vier Beziehungsselektoren, dann überspringen und mit dem Filtern fortfahren
4, bis es mit ID, CLASS und TAG übereinstimmt, da es auf diese Weise über die Browserschnittstelle
abgerufen werden kann
5 Zu diesem Zeitpunkt hat die Samensammlung einen Wert, was die Bedingungen für die Pinselauswahl verringert
6. Wenn mehrere übereinstimmende Seed-Sammlungen vorhanden sind, ist eine weitere Filterung erforderlich. Ändern Sie den Selektor: „div > p div.aaron [type="checkbox"]“
7 OK, springe zur nächsten Stufe der Kompilierungsfunktion
aufgeschobenes Objekt
Bei der Entwicklung von Websites stoßen wir häufig auf bestimmte JavaScript-Vorgänge, die lange dauern. Darunter gibt es sowohl asynchrone Vorgänge (z. B. Ajax-Lesen von Serverdaten) als auch synchrone Vorgänge (z. B. das Durchlaufen eines großen Arrays), und die Ergebnisse sind nicht sofort verfügbar.
Der übliche Ansatz besteht darin, Rückruffunktionen für sie anzugeben. Das heißt, Sie legen vorab fest, welche Funktionen nach ihrer Ausführung aufgerufen werden sollen.Allerdings ist jQuery sehr schwach, wenn es um Callback-Funktionen geht. Um dies zu ändern, hat das jQuery-Entwicklungsteam das verzögerte Objekt entworfen.
Einfach ausgedrückt ist das verzögerte Objekt die Callback-Funktionslösung von jQuery. Im Englischen bedeutet defer „Verzögerung“. Die Bedeutung eines verzögerten Objekts besteht also darin, die Ausführung bis zu einem bestimmten Punkt in der Zukunft zu „verzögern“.
Sehen Sie sich die traditionelle Schreibweise der Ajax-Operation von jQuery an:
Nach Abschluss der $.ajax()-Operation wird das XHR-Objekt zurückgegeben, wenn Sie eine Version von jQuery verwenden, die niedriger als 1.5.0 ist, und Sie können keine Kettenoperationen ausführen, wenn die Version höher als 1.5.0 ist , können die zurückgegebenen verzögerten Objekte verkettet werden.
Die neue Schreibweise lautet nun:
Ein weiterer großer Vorteil des verzögerten Objekts besteht darin, dass Sie eine Rückruffunktion für mehrere Ereignisse angeben können, was mit herkömmlichem Schreiben nicht möglich ist.
Bitte schauen Sie sich den folgenden Code an, der eine neue Methode $.when() verwendet:
.done(function(){ alarm("Haha, erfolgreich!"); })
.fail(function(){ alarm("Fehler!"); });
Die Bedeutung dieses Codes besteht darin, zunächst zwei Operationen $.ajax("test1.html") und $.ajax("test2.html") auszuführen. Wenn beide erfolgreich sind, führen Sie den durch die Funktion done() angegebenen Rückruf aus ; wenn einer oder beide fehlschlagen, wird die durch fail() angegebene Callback-Funktion ausgeführt.
Implementierungsprinzip von jQuery.Deferred(func)
Intern werden drei Callback-Funktionslisten verwaltet: Erfolgs-Callback-Funktionsliste, Fehler-Callback-Funktionsliste und Nachrichten-Callback-Funktionsliste. Andere Methoden arbeiten und erkennen diese drei Listen.
Quellcodestruktur von jQuery.Deferred( func ):
Zurückgestellt: Funktion( func ) {
// Erfolgreiche Rückruffunktionsliste
var doneList = jQuery.Callbacks( "once Memory" ),
// Liste der Fehlerrückruffunktionen
failList = jQuery.Callbacks( "once memory" ),
// Liste der Nachrichtenrückruffunktionen
progressList = jQuery.Callbacks( "memory" ),
// Ausgangszustand
state = „ausstehend“,
// Schreibgeschützte Kopie der asynchronen Warteschlange
Versprechen = {
// erledigt, fehlgeschlagen, Fortschritt
// state, isResolved, isRejected
// dann, immer
// Pipe
// versprechen
},
// Asynchrone Warteschlange
deferred = Promise.Promise({}),
Taste;
// Methoden hinzufügen, um Erfolgs-, Fehler- und Nachrichtenrückruflisten auszulösen
for (Listen eingeben) {
deferred[key] =LISTS[key].fire;
deferred[ key "With" ] =LISTS[ key .fireWith;
}
// Eine Rückruffunktion hinzufügen, um den Status
festzulegen
deferred.done( function() {
state = "resolved";
}, failList.disable, progressList.lock )
.fail( function() {
state = „abgelehnt“;
}, doneList.disable, progressList.lock );
// Wenn der Funktionsparameter func übergeben wird, wird er ausgeführt.
if ( func ) {
func.call(deferred, deferred);
}
// Rückgabe der asynchronen Warteschlange verzögert
},
}
Bietet die Möglichkeit, Rückruffunktionen basierend auf dem Status eines oder mehrerer Objekte auszuführen, typischerweise basierend auf einer asynchronen Warteschlange mit asynchronen Ereignissen.
Wenn mehrere asynchrone Warteschlangenobjekte übergeben werden, gibt die Methode jQuery.when() eine schreibgeschützte Kopie des neuen asynchronen Hauptwarteschlangenobjekts zurück. Die schreibgeschützte Kopie verfolgt den endgültigen Status der übergebenen asynchronen Warteschlange.
Sobald alle asynchronen Warteschlangen erfolgreich sind, wird die Erfolgsrückruffunktion der „Haupt“-Asynchronwarteschlange aufgerufen;
Wenn eine der asynchronen Warteschlangen ausfällt, wird die Fehlerrückruffunktion der asynchronen Hauptwarteschlange aufgerufen.
Bildbeschreibung
Asynchrone Warteschlange verzögert
Asynchrone Aufgaben und Rückruffunktionen entkoppeln
Stellen Sie Grundfunktionen für das Ajax-Modul, das Warteschlangenmodul und das Ready-Ereignis bereit.
Prototypeigenschaften und -methoden
Quellcode für Prototypeigenschaften und -methoden:
Das Selektorattribut wird verwendet, um den Selektorausdruck aufzuzeichnen, wenn jQuery DOM-Elemente findet und filtert.
Das Attribut .length repräsentiert die Anzahl der Elemente im aktuellen JQuery-Objekt.
Die Methode .size() gibt die Anzahl der Elemente im aktuellen JQuery-Objekt zurück. Sie entspricht funktional der Eigenschaftslänge, aber die Länge sollte zuerst verwendet werden, da sie keinen Funktionsaufruf-Overhead verursacht.
.size() lautet wie folgt:
Methode .toArray() konvertiert das aktuelle jQuery-Objekt in ein echtes Array. Das konvertierte Array enthält alle Elemente:
Method.get(index) gibt das Element an der angegebenen Position im aktuellen jQuery-Objekt oder ein Array zurück, das alle Elemente enthält. Seine Quelle
Der Code lautet wie folgt:
// Ein „sauberes“ Array zurückgeben
This.toArray():
// Nur das Objekt zurückgeben
( num < 0 ? this[ this.length num ] : this[ num ] );
},
Zuerst wird beurteilt, ob num kleiner als 0 ist. Wenn es kleiner als 0 ist, wird der Index unter Verwendung der Länge num neu berechnet und dann wird der Array-Zugriffsoperator ([]) verwendet, um das Element zu erhalten Die angegebene Position ist eine kleine Methode, die negative Indizes unterstützt. Wenn sie größer oder gleich 0 ist, wird das Element direkt an der angegebenen Position zurückgegeben.
Detaillierte Erläuterung der Verwendung von eg() und get(): Zusammenfassung gängiger JQuery-Methoden und Anwendungsbeispiele
Methode .each() wird verwendet, um das aktuelle jQuery-Objekt zu durchlaufen und die Rückruffunktion für jedes Element auszuführen. Method.each() wird intern durch einfachen Aufruf der statischen Methode jQuery.each() implementiert:
Die Rückruffunktion wird in dem Kontext ausgelöst, in dem das aktuelle Element der Kontext ist, dh das Schlüsselwort this zeigt immer auf das aktuelle Element, und die Rückgabe von false in der Rückruffunktion kann den Durchlauf beenden.
Methode .map() durchläuft das aktuelle jQuery-Objekt, führt die Rückruffunktion für jedes Element aus und fügt den Rückgabewert der Rückruffunktion in ein neues jQuery-Objekt ein. Diese Methode wird häufig verwendet, um den Wert einer Sammlung von DOM-Elementen abzurufen oder festzulegen.
Die Prototypmethode .pushStack() erstellt ein neues leeres jQuery-Objekt, fügt dann die Sammlung von DOM-Elementen in dieses jQuery-Objekt ein und behält einen Verweis auf das aktuelle jQuery-Objekt bei.
Der Prototyp method.pushStack() ist eine der Kernmethoden, die Unterstützung für die folgenden Methoden bietet:
jQuery-Objektdurchquerung: .eq(), .first(), .last(), .slice(), .map().
DOM-Suche und Filterung: .find(), .not(), .filter(), .closest(), .add(), .andSelf().
DOM-Durchquerung: .parent(), .parents(), .parentsUntil(), .next(), .prev(), .nextAll(), .prevAll(), .nextUnit(), .prevUnit() , .siblings(), .children(), .contents().
DOM-Einfügung: jQuery.before(), jQuery.after(), jQuery.replaceWith(), .append(), .prepent(), .before(), .after(), .replaceWith().
Definieren Sie die Methode .push(elems, name, selector), die 3 Parameter akzeptiert:
Parameterelemente: Array von Elementen (oder Array-ähnliches Objekt), das in das neue jQuery-Objekt eingefügt wird.
Parametername: Der Name der jQuery-Methode, die die Elemente des Elementarrays generiert.
Parameterauswahl: Der an die jQuery-Methode übergebene Parameter, der zum Ändern des Prototypattributs.selector verwendet wird.
Die Methode .end() beendet den letzten Filtervorgang in der aktuellen Kette und stellt die übereinstimmenden Elemente in ihrem vorherigen Zustand wieder her
Gibt das vorherige jQuery-Objekt zurück. Wenn das Attribut prevObect nicht vorhanden ist, wird ein leeres jQuery-Objekt erstellt und zurückgegeben. Die Methode .pushStack() dient zum Schieben in den Stapel und die Methode .end() zum Herausspringen aus dem Stapel
Statische Eigenschaften und Methoden
Der relevante Quellcode lautet wie folgt:
未完待续、、、今天就先到这里了，下次补齐。别急哈小伙伴们
