Detaillierte Erläuterung der Programmierparadigmen in jQuery_jquery
WBOY
Freigeben： 2016-05-16 16:27:01
Original
1463 Leute haben es durchsucht
In diesem Artikel wird das Programmierparadigma in jQuery im Detail analysiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Das Gesicht der Browser-Front-End-Programmierung hat sich seit 2005 tiefgreifend verändert. Dies bedeutet nicht nur, dass eine große Anzahl grundlegender Bibliotheken mit umfangreichen Funktionen entstanden ist, die es uns ermöglichen, Geschäftscode bequemer zu schreiben war eine große Veränderung in der Art und Weise, wie wir die Front-End-Technologie betrachten, mit einem klaren Bewusstsein dafür, wie wir die Produktivität von Programmierern auf Front-End-spezifische Weise steigern können. Hier geben wir eine kurze Einführung in die Programmierparadigmen und gängigen Techniken, die in JavaScript auf der Grundlage der Implementierungsprinzipien des jQuery-Quellcodes entstehen.
A. 1995 entwickelte Brendan Eich von Netscape die Sprache JavaScript, eine dynamische, schwach typisierte, prototypbasierte Skriptsprache.
B. Im Jahr 1999 wurde Microsoft IE5 veröffentlicht, der das XMLHTTP ActiveX-Steuerelement enthielt.
C. Microsoft IE6 wurde 2001 veröffentlicht und unterstützt teilweise die Standards DOM Level 1 und CSS 2.
D. Douglas Crockford erfand das JSON-Format im Jahr 2002.
Zum jetzigen Zeitpunkt kann man sagen, dass die technischen Elemente, auf denen Web 2.0 basiert, im Grunde genommen Gestalt angenommen haben, es jedoch nicht sofort einen wesentlichen Einfluss auf die gesamte Branche hatte. Obwohl einige Techniken der „asynchronen teilweisen Seitenaktualisierung“ heimlich unter Programmierern verbreitet werden und sogar riesige und aufgeblähte Klassenbibliotheken wie Bindows hervorgebracht haben, wird das Frontend im Allgemeinen als karger und schmutziger Sumpf betrachtet, in dem nur die Backend-Technologie König ist. Was fehlt?
Wenn wir aus heutiger Sicht auf den js-Code vor 2005 zurückblicken, einschließlich der von talentierten Leuten damals geschriebenen, können wir ihre Schwäche in der Programmsteuerung deutlich spüren. Es ist nicht so, dass die js-Technologie vor 2005 an sich Probleme hatte, es ist nur so, dass sie auf der konzeptionellen Ebene verstreut waren, es ihnen an einem einheitlichen Konzept mangelte oder ihr eigener einzigartiger Stil und ihre eigene Seele fehlten. Zu dieser Zeit versuchten die meisten Menschen und Technologien, traditionelle objektorientierte Sprachen zu simulieren und traditionelle objektorientierte Technologien zu verwenden, um Nachahmungen traditioneller GUI-Modelle zu implementieren.
2005 war ein Jahr des Wandels und ein Jahr der Konzepterstellung. Mit der Veröffentlichung einer Reihe erfrischender interaktiver Anwendungen durch Google wurde ein Artikel „Ajax: A New Approach to Web Applications“ von Jesse James Garrett weit verbreitet. Ajax, ein Frontend-spezifisches Konzept, vereinte schnell viele verstreute Praktiken unter demselben Slogan und löste einen Paradigmenwechsel in der Webprogrammierung aus. Wie das Sprichwort sagt: Wenn der Name nicht stimmt, stimmen auch die Worte nicht. Jetzt können die unbekannten Massen eine Organisation gründen. Vor Ajax hatte man schon lange erkannt, dass das wesentliche Merkmal der B/S-Architektur darin bestand, dass die Zustandsräume des Browsers und des Servers getrennt waren. Die allgemeine Lösung bestand jedoch darin, diese Unterscheidung zu verbergen und den Vordergrundzustand mit dem Hintergrund zu synchronisieren. Einheitliche logische Verarbeitung, z. B. ASP.NET. Aufgrund des Mangels an ausgereiften Entwurfsmustern zur Unterstützung der Persistenz des Vordergrundzustands muss das geladene js-Objekt beim Seitenwechsel verworfen werden. Wer kann also erwarten, dass es komplizierte Arbeiten abschließt?
Ajax gibt eindeutig an, dass die Schnittstelle teilweise aktualisiert wird und der Status im Vordergrund bleibt, was einen Bedarf fördert: js-Objekte müssen für längere Zeit im Vordergrund vorhanden sein. Dies bedeutet auch die Notwendigkeit, diese Objekte und Funktionen effektiv zu verwalten, was eine komplexere Code-Organisationstechnologie erfordert, was den Wunsch nach Modularität und einer gemeinsamen Codebasis bedeutet.
Es gibt tatsächlich nur sehr wenige Teile des vorhandenen Codes von jQuery, die tatsächlich mit Ajax in Zusammenhang stehen (unter Verwendung von XMLHTTP-Steuerelementen, um asynchron auf Hintergrundrückgabedaten zuzugreifen), aber ohne Ajax hätte jQuery keinen Grund, als öffentliche Codebasis zu existieren.
2. Modularisierung: Namespaces verwalten
Wenn eine große Menge Code generiert wird, ist das grundlegendste Konzept, das wir brauchen, die Modularisierung, bei der Arbeit zerlegt und wiederverwendet wird. Der Schlüssel zur Zerlegungsarbeit liegt darin, dass die Ergebnisse der unabhängigen Arbeit jeder Person miteinander integriert werden können. Dies bedeutet, dass jedes Modul auf einem konsistenten zugrunde liegenden Konzept basieren muss und interagieren kann. Das heißt, es sollte auf einer gemeinsamen Codebasis basieren, die Inkonsistenz des zugrunde liegenden Browsers abschirmen und eine einheitliche Abstraktionsschicht implementieren, z einheitlicher Mechanismus zur Ereignisverwaltung. Wichtiger als eine einheitliche Codebasis ist, dass es keine Namenskonflikte zwischen Modulen geben darf. Andernfalls funktionieren die beiden Module auch ohne Interaktion zwischen ihnen nicht zusammen.
Eines der Hauptverkaufsargumente, die derzeit von jQuery beworben werden, ist die gute Kontrolle über Namespaces. Dies ist sogar noch wichtiger als die Bereitstellung immer vollständigerer Funktionspunkte. Dank der guten Modularität können wir Code aus beliebigen Quellen wiederverwenden und die Arbeit aller Beteiligten akkumulieren und überlagern. Und die Funktionsimplementierung ist nur eine Frage der vorübergehenden Arbeitsbelastung. jQuery verwendet eine Variante des Modulmusters, um die Auswirkungen auf den globalen Namespace zu reduzieren, indem dem Fensterobjekt lediglich ein jQuery-Objekt (d. h. $function) hinzugefügt wird.
Der sogenannte Modulmustercode lautet wie folgt. Der Schlüssel besteht darin, anonyme Funktionen zu verwenden, um den Umfang temporärer Variablen einzuschränken.
// Zurück zur öffentlichen API
zurück {
PublicThing: publicThing,
sayPrivateThing: sayPrivateThing
}
})();
JS selbst verfügt nicht über eine Paketstruktur, aber nach jahrelangen Versuchen hat die Branche ihr Verständnis des Paketladens schrittweise vereinheitlicht und eine Lösung wie die RequireJs-Bibliothek geschaffen, die einen gewissen Konsens gefunden hat. jQuery kann gut in die RequireJS-Bibliothek integriert werden, um ein umfassenderes Modulabhängigkeitsmanagement zu erreichen. http://requirejs.org/docs/jquery.html
require(["jquery", "jquery.my"], function () {
//Ausführen, wenn sowohl jquery.js als auch jquery.my.js erfolgreich geladen wurden
$(function(){
$('#my').myFunc();
});
});
Das Modul my/shirt wird durch den folgenden Funktionsaufruf definiert, der von den Modulen my/cart und my/inventory abhängt:
require.def("my/shirt",
["mein/Warenkorb", "mein/Inventar"],
Funktion(Warenkorb, Inventar) {
// Modulmuster hier verwenden, um die vom my/shirt-Modul bereitgestellte API zurückzugeben
return {
Farbe: „blau“,
Größe: „groß“
addToCart: function() {
// Dekrement ist die von my/inventory verfügbar gemachte API
Inventory.decrement(this);
cart.add(this);
}
}
}
);
3. Magic$: Objektförderung
Woran haben Sie gedacht, als Sie die $-Funktion zum ersten Mal gesehen haben? Die traditionelle Programmiertheorie sagt uns immer, dass die Benennung von Funktionen korrekt sein und die Absicht des Autors klar zum Ausdruck bringen sollte. Sie behauptet sogar, dass lange Namen besser sind als kurze Namen, weil sie die Möglichkeit von Mehrdeutigkeiten verringern. Aber was ist $? Verstümmelter Code? Die Botschaft, die es vermittelt, ist zu dunkel und mehrdeutig. $ wurde von der Prototype.js-Bibliothek erfunden und ist wirklich eine magische Funktion, da sie einen primitiven DOM-Knoten in ein Objekt mit komplexem Verhalten verwandeln kann. In der ursprünglichen Implementierung von Prototyp.js wurde die $function als definiert
var $ = function (id) {
Rückgabe „string“ == typeof id ? document.getElementById(id) : id;
};
Dies entspricht grundsätzlich der folgenden Formel
e = $(id)
Dies ist nicht nur eine clevere Abkürzung für Funktionsnamen, sondern, was noch wichtiger ist, sie stellt auf konzeptioneller Ebene eine Eins-zu-eins-Entsprechung zwischen Text-ID und DOM-Element her. Bevor es $ gibt, ist der Abstand zwischen der ID und dem entsprechenden Element sehr groß. Im Allgemeinen muss das Element in einer Variablen wie zwischengespeichert werden
for (var i = 0; i < arguments.length; i ) {
var element = arguments[i];
If (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
Rückgabeelement;
elements.push(element);
}
Elemente zurückgeben;
}
Dies entspricht der Formel:
[e,e] = $(id,id)
Leider ist „prototyp.js“ bei diesem Schritt auf die falsche Fährte gegangen und dieser Ansatz hat wenig praktischen Nutzen.
Es ist jQuery, das $ wirklich fördert, und sein $ entspricht der Formel
[o] = $(Selektor)
Hier sind drei Verbesserungen:
A. Der Selektor ist kein Einzelknoten-Locator mehr, sondern ein komplexer Sammlungsselektor
B. Die zurückgegebenen Elemente sind keine ursprünglichen DOM-Knoten, sondern Objekte mit umfangreichen Verhaltensweisen, die durch jQuery weiter verbessert werden und komplexe Funktionsaufrufketten starten können.
C. Das von $ zurückgegebene Verpackungsobjekt wird in eine Array-Form gebracht, die natürlich Sammlungsvorgänge in die Aufrufkette integriert.
Natürlich ist das Obige nur eine stark vereinfachte Beschreibung des magischen $, und seine tatsächliche Funktion ist viel komplizierter. Insbesondere gibt es eine sehr häufig verwendete direkte Konstruktionsfunktion
")....
jQuery erstellt direkt eine Reihe von DOM-Knoten basierend auf dem eingehenden HTML-Text und verpackt sie als jQuery-Objekte. Dies kann in gewissem Maße als Erweiterung des Selektors angesehen werden: Die HTML-Inhaltsbeschreibung selbst ist eine eindeutige Bezeichnung.
$(function{}) Diese Funktion ist wirklich etwas sprachlos. Das bedeutet, dass diese Rückruffunktion aufgerufen wird, wenn document.ready ist. $ ist wirklich eine magische Funktion. Wenn Sie Fragen haben, stellen Sie diese bitte.
Zusammenfassend lässt sich sagen, dass $ der Übergangskanal von der gewöhnlichen DOM- und Textbeschreibungswelt zur jQuery-Welt mit Rich-Object-Verhalten ist. Nachdem wir diese Tür überquert hatten, kamen wir im Utopia an.
4. Amorphe Parameter: Konzentrieren Sie sich auf Ausdruck statt auf Einschränkungen
Da bei schwach typisierten Sprachen das Wort „schwach“ auf dem Kopf steht, ist es unvermeidlich, dass sich die Leute von Natur aus etwas unzulänglich fühlen. Ist das Fehlen von Typbeschränkungen im Programm wirklich ein großes Manko bei traditionellen, stark typisierten Sprachen? , Art und Anzahl der Funktionsparameter sind alle vom Compiler überprüfte Einschränkungen, aber diese Einschränkungen reichen bei weitem nicht aus. In allgemeinen Anwendungen wird zur Stärkung der Einschränkungen immer eine große Menge Verteidigungscode hinzugefügt, beispielsweise in C We ASSERT wird häufig verwendet, und in Java müssen wir häufig den Bereich von Parameterwerten bestimmen
throw new IndexOutOfBoundsException(
"Index: " index ", Größe: " size);
Offensichtlich führen diese Codes zu einer großen Anzahl nicht funktionierender Ausführungspfade im Programm. Das heißt, wir haben viele Urteile gefällt, und wenn der Code bis zu einem bestimmten Punkt ausgeführt wird, löst das System eine Ausnahme aus und ruft dies aus Wenn wir unser Denken ändern, können wir die Ergebnisse dieser Urteile verwenden, um etwas zu tun. Wenn wir dem Trend folgen und die Form der Parameter weiter schwächen, wird „Schwäche“ auf die Spitze getrieben, wenn es nichts Schwaches zu tun gibt, wird „Schwäche“ zu einem ikonischen Merkmal?
Sehen Sie sich die Ereignisbindungsfunktion bind in jQuery an,
$("#my").bind("click.myGroup" , function( ){});
F. Warum ist diese Funktion nicht verrückt geworden???
Auch wenn der Typ unsicher ist, muss die Bedeutung der Parameter an festen Positionen sicher sein, oder? das?
Wert = o.val(), Wert o.val(3) einstellen
Wie kann eine Funktion so exzessiv sein, wie kann sie sich je nach Art und Anzahl der übergebenen Parameter nicht störend auswirken? Da dies aber nicht verhindert werden kann, ist es bewusst erlaubt . Es gibt zwar viele Formen der Veränderung, aber kein Wort des Unsinns behindert den Ausdruck (ich bin nicht hier, um Menschen zu erschrecken).
5. Kettenbetrieb: schrittweise Verfeinerung der Linearisierung Das Hauptverkaufsargument von jQuery war in der Anfangszeit der sogenannte Kettenbetrieb
.find('h3') // Alle untergeordneten h3-Knoten auswählen
.eq(2) // Filtern Sie die Sammlung und behalten Sie das dritte Element bei
.html('Ändern Sie den Text des dritten h3')
.end() // Zurück zur vorherigen h3-Sammlung
.eq(0)
.html('Ändern Sie den Text des ersten h3');
In allgemeinen imperativen Sprachen müssen wir Daten immer in verschachtelten Schleifen filtern, und der Code zum tatsächlichen Bearbeiten der Daten ist mit dem Code zum Auffinden der Daten verknüpft. JQuery verwendet jedoch die Methode, zuerst eine Sammlung zu erstellen und dann anzuwenden Funktionen zur Sammlung. Diese Methode erreicht die Entkopplung der beiden Logiken und die Linearisierung der verschachtelten Struktur. Tatsächlich können wir eine Sammlung intuitiv verstehen, ohne auf prozedurales Denken wie $('div.my input:checked') zurückzugreifen. Kann als direkte Beschreibung und nicht als Verfolgung des Prozessverhaltens angesehen werden.
Schleife bedeutet, dass sich unser Denken in einem Zustand des wiederholten Zurückspulens befindet und nach der Linearisierung direkt in eine Richtung geht, was die Denklast erheblich reduziert und die Zusammensetzbarkeit des Codes verbessert, um die Unterbrechung des Aufrufs zu reduzieren jQuery hat eine wunderbare Idee erfunden: jQuery umhüllt das Objekt selbst wie ein Array (Sammlung). Sammlungen können neuen Sammlungen zugeordnet werden, und Sammlungen können auf ihre eigenen Untersammlungen beschränkt werden Das Ergebnis ist auch eine Sammlung. Es sind einige strukturelle Änderungen aufgetreten, aber es handelt sich immer noch um einen konzeptionellen Fixpunkt. Dies ist eine Designidee, die aus funktionalen Sprachen übernommen wurde. Sammlungsoperationen sind zu häufige Operationen. In Java können wir leicht feststellen, dass viele sogenannte Kapselungsfunktionen tatsächlich einige Sammlungsdurchlaufoperationen kapseln. In jQuery sind Sammlungsoperationen zu einfach und müssen nicht gekapselt werden.
Verkettete Aufrufe bedeuten, dass wir immer ein „aktuelles“ Objekt haben und alle Operationen an diesem aktuellen Objekt ausgeführt werden. Dies entspricht der folgenden Formel
x = dx
Jeder Schritt in der Aufrufkette ist eine inkrementelle Beschreibung des aktuellen Objekts und ein schrittweiser Verfeinerungsprozess in Richtung des endgültigen Ziels. Diese Idee wird auch häufig in der Witrix-Plattform verwendet. Insbesondere um die Integration von Plattformmechanismus und Geschäftscode zu realisieren, stellt die Plattform den Standardinhalt des Objekts (Containers) bereit, und der Geschäftscode kann auf dieser Grundlage schrittweise verfeinert und überarbeitet werden, einschließlich der Aufhebung der Standardeinstellungen.
Apropos: Obwohl der Kettenaufruf von jQuery oberflächlich betrachtet sehr einfach ist, müssen Sie bei der internen Implementierung eine zusätzliche Schicht von Schleifen schreiben, da der Compiler nicht weiß, wie man „automatisch auf jedes Element in der Sammlung anwendet“.
$.fn['someFunc'] = function(){
Geben Sie this.each(function(){ zurück
jQuery.someFunc(this,...);
}
}
6. Daten: einheitliche Datenverwaltung
Als js-Bibliothek muss sie ein großes Problem lösen, nämlich die Zustandszuordnung und die kollaborative Verwaltung zwischen js-Objekten und DOM-Knoten. Einige JS-Bibliotheken konzentrieren sich auf JS-Objekte und speichern DOM-Knotenzeiger in Mitgliedsvariablen von JS-Objekten. Beim Zugriff verwenden sie immer JS-Objekte als Einstiegspunkt und bedienen DOM-Objekte indirekt über JS-Funktionen. Bei dieser Art der Kapselung ist der DOM-Knoten eigentlich nur eine „Assembly“ auf niedriger Ebene, die als Schnittstelle angezeigt wird. Die Wahl von jQuery ähnelt der Witrix-Plattform, die auf der Struktur von HTML selbst basiert. Sie erweitert die Funktion des DOM-Knotens durch js und macht ihn zu einem erweiterten Objekt mit komplexem Verhalten. Die Idee hier ist unaufdringliches Design und anmutige Degradierung. Die semantische Struktur ist auf der grundlegenden HTML-Ebene vollständig. Die Rolle von js besteht darin, das interaktive Verhalten zu verbessern und die Präsentationsform zu steuern.
Wenn wir jedes Mal über $('#my') auf das entsprechende Verpackungsobjekt zugreifen, wo werden dann einige Zustandsvariablen gespeichert, die lange aufrechterhalten werden müssen? jQuery bietet einen einheitlichen globalen Datenverwaltungsmechanismus.
Der Datensatz in HTML kann über $('#my').data('myAttr') gelesen werden.
Beim ersten Zugriff auf Daten weist jQuery dem DOM-Knoten eine eindeutige UUID zu und legt sie dann auf ein bestimmtes Expando-Attribut des DOM-Knotens fest. jQuery stellt sicher, dass diese UUID auf dieser Seite nicht wiederholt wird.
Der obige Code kann sowohl DOM-Knoten als auch reine JS-Objekte verarbeiten. Wenn es sich um ein JS-Objekt handelt, werden die Daten direkt im JS-Objekt selbst abgelegt, und wenn es sich um einen DOM-Knoten handelt, werden sie einheitlich über den Cache verwaltet.
Da alle Daten einheitlich über den Datenmechanismus verwaltet werden, insbesondere alle Ereignisüberwachungsfunktionen (data.events), kann jQuery die Ressourcenverwaltung sicher implementieren. Beim Klonen eines Knotens können die zugehörigen Ereignisüberwachungsfunktionen automatisch geklont werden. Wenn der Inhalt des DOM-Knotens ersetzt oder der DOM-Knoten zerstört wird, kann jQuery auch die Ereignisüberwachungsfunktion automatisch abbrechen und die relevanten js-Daten sicher freigeben.
Das Bild von „Ereignissen, die sich entlang des Objektbaums ausbreiten“ ist die Essenz des objektorientierten Schnittstellenprogrammiermodells. Die Zusammensetzung von Objekten stellt eine stabile Beschreibung der Schnittstellenstruktur dar. Ereignisse treten kontinuierlich an einem bestimmten Knoten des Objektbaums auf und breiten sich durch den Blasenmechanismus nach oben aus. Der Objektbaum wird auf natürliche Weise zu einer Kontrollstruktur. Wir können Ereignisse auf allen untergeordneten Knoten auf dem übergeordneten Knoten abhören, ohne explizit eine Zuordnung zu jedem untergeordneten Knoten herzustellen.
Neben der Etablierung einer einheitlichen Abstraktion für die Ereignismodelle verschiedener Browser hat jQuery vor allem die folgenden Verbesserungen vorgenommen:
A. Ein benutzerdefinierter Ereignismechanismus (benutzerdefinierter Mechanismus) wurde hinzugefügt. Der Ereignisweitergabemechanismus hat im Prinzip nichts mit dem Ereignisinhalt selbst zu tun, sodass benutzerdefinierte Ereignisse denselben Verarbeitungspfad durchlaufen und dieselbe Überwachungsmethode wie die integrierten Ereignisse des Browsers verwenden können . Die Verwendung benutzerdefinierter Ereignisse kann die Kohäsion des Codes verbessern und die Codekopplung verringern. Wenn beispielsweise keine benutzerdefinierten Ereignisse vorhanden sind, muss der zugehörige Code häufig verwandte Objekte direkt bedienen
B. Ereignisüberwachung für dynamisch erstellte Knoten hinzugefügt. Die Bind-Funktion kann nur Listening-Funktionen für vorhandene DOM-Knoten registrieren
$('li.trigger').bind('click', function() {}}
Wenn nach dem Aufruf von bind ein weiterer Li-Knoten erstellt wird, wird das Klickereignis dieses Knotens nicht überwacht.
Der Delegate-Mechanismus von jQuery kann die Überwachungsfunktion beim übergeordneten Knoten registrieren, und die auf dem untergeordneten Knoten ausgelösten Ereignisse werden automatisch an den entsprechenden HandlerFn entsprechend dem Selektor gesendet. Wenn Sie sich jetzt registrieren, können Sie zuhören die in der Zukunft erstellten Knoten
Abgesehen von der Implementierung von jQuery überlegen wir uns zunächst, was wir tun müssen, wenn wir Animationseffekte auf der Benutzeroberfläche erzielen möchten. Wir möchten beispielsweise die Breite eines Divs innerhalb einer Sekunde von 100 Pixel auf 200 Pixel erhöhen Man kann sich leicht vorstellen, dass wir im Laufe der Zeit von Zeit zu Zeit die Breite des Div anpassen müssen, [und gleichzeitig] im Gegensatz zu gewöhnlichen Funktionsaufrufen auch anderen Code ausführen müssen, nachdem wir den Animationsbefehl ausgegeben haben Wir können nicht erwarten, das gewünschte Ergebnis sofort zu erhalten, und wir können nicht einfach darauf warten, dass das Ergebnis eintrifft. Die Komplexität der Animation liegt darin, dass sie innerhalb eines bestimmten Zeitraums nach einem einmaligen Ausdruck ausgeführt werden muss Mehrere logische Ausführungspfade, die gleichzeitig entfaltet werden müssen
Der große Sir Isaac Newton schrieb in „Mathematische Prinzipien der Naturphilosophie“: „Die absolute, wahre und mathematische Zeit selbst vergeht.“ A1 bis A5 und Schritt B1 bis B5 gleichzeitig, wir müssen nur [A1, B1] zum Zeitpunkt t1, [A2, B2] zum Zeitpunkt t2 usw. ausführen
t1 |. t3 |. t5 ...
A1 |. A3 |. A4 |
B1 |. B2 |. B4 |
Eine konkrete Umsetzungsform kann sein
A. Teilen Sie jede Animation in ein Animationsobjekt auf, das intern in mehrere Schritte unterteilt ist.
Animation = neue Animation(div,"width",100,200,1000,
Interpolationsfunktion, die für die Schrittsegmentierung verantwortlich ist, Rückruffunktion, wenn die Animation abgeschlossen ist);
B. Registrieren Sie das Animationsobjekt im globalen Manager
timerFuncs.add(animation);
C. Bringen Sie bei jedem Auslösemoment der globalen Uhr jede registrierte Ausführungssequenz einen Schritt weiter voran und löschen Sie sie, wenn sie beendet ist, aus dem globalen Manager.
Nachdem wir das Hauptproblem gelöst haben, schauen wir uns das Ausdrucksproblem an. Wie können wir Schnittstellenfunktionen entwerfen, um unsere Absichten in möglichst kompakter Form auszudrücken?
A. Es gibt mehrere Elemente, um ähnliche Animationen durchzuführen
B. Jedes Element verfügt über mehrere Attribute, die gleichzeitig geändert werden müssen
C. Nachdem Sie eine Animation ausgeführt haben, starten Sie eine weitere Animation
Man kann sagen, dass die Antworten von jQuery auf diese Fragen den letzten verbleibenden Wert des grammatikalischen Ausdrucks von js verdrängen
//Hier führt dequeue zuerst die nächste Funktion in der Warteschlange aus, also alarm("y")
$(this).dequeue();
alarm('x');
})
.queue(function(){
alarm("y");
// Wenn Sie die Warteschlange nicht aktiv entfernen, wird die Ausführung der Warteschlange unterbrochen und nicht automatisch fortgesetzt.
$(this).dequeue();
});
A. Verwenden Sie den integrierten Selektionsmechanismus von jQuery, um die Verarbeitung einer Sammlung auf natürliche Weise auszudrücken.
B. Verwenden Sie Map, um mehrere Attributänderungen auszudrücken
C. Verwenden Sie Mikroformate, um domänenspezifische Delta-Konzepte auszudrücken. ' =200px' bedeutet, 200px zum vorhandenen Wert hinzuzufügen
D. Verwenden Sie die Reihenfolge der Funktionsaufrufe, um die Reihenfolge der Animationsausführung automatisch zu definieren: An die Ausführungswarteschlange angehängte Animationen warten natürlich, bis die vorherige Animation vollständig ausgeführt ist, bevor sie beginnen.
Die Implementierungsdetails der jQuery-Animationswarteschlange lauten ungefähr wie folgt:
A. Die Animationsfunktion ruft tatsächlich queue(function(){dequeue muss am Ende der Ausführung aufgerufen werden, sonst wird die nächste Methode nicht gesteuert})
Wenn die Warteschlangenfunktion ausgeführt wird, es sich um eine FX-Warteschlange handelt und derzeit keine Animation ausgeführt wird (wenn animate zweimal hintereinander aufgerufen wird, wartet die zweite Ausführungsfunktion in der Warteschlange), wird der Vorgang zum Entfernen aus der Warteschlange automatisch ausgelöst, um den zu steuern Warteschlange zum Ausführen.
Wenn es sich um eine FX-Warteschlange handelt, wird beim Entfernen aus der Warteschlange automatisch die Zeichenfolge „inprogress“ hinzugefügt, um anzuzeigen, dass die Animation ausgeführt wird
B. Erstellen Sie für jede Eigenschaft ein jQuery.fx-Objekt. Rufen Sie dann die Funktion fx.custom (entspricht start) auf, um die Animation zu starten.
C. Registrieren Sie in der benutzerdefinierten Funktion die Funktion fx.step bei den globalen timerFuncs und versuchen Sie dann, einen globalen Timer zu starten.
timerId = setInterval( fx.tick, fx.interval );
D. Die statische Tick-Funktion ruft nacheinander die Schrittfunktion jedes FX auf. In der Schrittfunktion wird der aktuelle Wert des Attributs durch Beschleunigung berechnet und dann wird die Aktualisierung von fx aufgerufen, um das Attribut zu aktualisieren.
E. Die Funktion „step“ von fx bestimmt, dass „dequeue“ aufgerufen wird, um die nächste Methode zu steuern, wenn alle Attributänderungen abgeschlossen sind.
Was sehr interessant ist, ist, dass der jQuery-Implementierungscode offensichtlich viele Relay-Trigger-Codes enthält: Wenn Sie die nächste Animation ausführen müssen, nehmen Sie sie heraus und führen Sie sie aus. Wenn Sie den Timer starten müssen, starten Sie den Timer. usw. Dies liegt daran, dass das js-Programm nur einen echten Ausführungspfad hat. Um sicherzustellen, dass der Ausführungsthread nicht unterbrochen wird, ist es denkbar, dass es mehrere Ausführungspfade gibt Engines innerhalb des Programms oder sogar unendliche Ausführungs-Engines, dann ändert sich das Erscheinungsbild des Programms. In diesem Fall wird die Rekursion zu einer natürlicheren Beschreibung als die Schleife
9. Versprechensmuster: Identifizierung von Kausalzusammenhängen
In Wirklichkeit entwickeln sich immer so viele Zeitlinien unabhängig voneinander, und Menschen und Dinge überschneiden sich in Zeit und Raum, aber in Software sind Funktionen im Quellcode aufgereiht, und einige Fragen werden unweigerlich auftauchen . Warum sollte derjenige an der Spitze zuerst hingerichtet werden? Wäre da nicht ich, wenn das ganze Universum gemeinsam 1, 2, 3 schreit? Aus Gottes Sicht ist die Verwaltung wahrscheinlich zu schwierig ist die Relativitätstheorie. Wenn es keinen Informationsaustausch und keine gegenseitige Abhängigkeit gibt, können die Ereignisse, die in einem anderen Koordinatensystem nacheinander auftreten, in umgekehrter Reihenfolge auftreten. Der Programmierer folgt dem Beispiel des Kürbisses , und dann das Versprechensmuster erfunden.
Promise- und Zukunftsmuster sind im Grunde dasselbe. Werfen wir zunächst einen Blick auf das bekannte Zukunftsmuster in Java.
Das Ausgeben eines Funktionsaufrufs bedeutet nur, dass etwas passiert ist, und bedeutet nicht unbedingt, dass der Aufrufer das Endergebnis der Angelegenheit kennen muss. Was die Funktion sofort zurückgibt, ist nur ein Versprechen (Zukunftstyp), das erfüllt wird die Zukunft, die eigentlich eine Art Handle ist, wird herumgereicht, und dem Code, der in der Mitte wechselt, ist es egal, was das tatsächliche Ergebnis ist und ob es zurückgegeben wurde, bis ein Teil des Codes darauf angewiesen ist Das vom Aufruf zurückgegebene Ergebnis wird daher geöffnet und überprüft. Wenn das tatsächliche Ergebnis zurückgegeben wurde, gibt Future.get() das tatsächliche Ergebnis sofort zurück, andernfalls blockiert es den aktuellen Ausführungspfad, bis das Ergebnis zurückgegeben wird. Wenn Sie danach „future.get()“ aufrufen, wird immer sofort zurückgegeben, da der Kausalzusammenhang hergestellt wurde. [Ergebnisrückgabe] Dieses Ereignis muss schon einmal stattgefunden haben und wird sich nicht mehr ändern.
Der Zukunftsmodus bedeutet im Allgemeinen, dass das externe Objekt den Rückgabewert der Zukunft aktiv prüft, während der Versprechensmodus bedeutet, dass das externe Objekt eine Rückruffunktion für das Versprechen registriert
Funktion getData(){
Geben Sie $.get('/foo/').done(function(){ zurück
console.log('Wird ausgelöst, nachdem die AJAX-Anfrage erfolgreich war');
}).fail(function(){
console.log('Wird ausgelöst, nachdem die AJAX-Anfrage fehlgeschlagen ist');
});
}
Funktion showDiv(){
var dfd = $.Deferred();
$('#foo').fadeIn( 1000, dfd.resolve );
Geben Sie dfd.promise(); zurück
}
$.when( getData(), showDiv() )
.then(function(ajaxResult,ignoreResultFromShowDiv){
console.log('Wird ausgelöst, nachdem SOWOHL showDiv() ALS AUCH die AJAX-Anfrage erfolgreich war!');
// 'ajaxResult' ist die Antwort des Servers
});
jQuery führt die verzögerte Struktur ein, rekonstruiert Ajax, Queue, document.ready usw. und vereinheitlicht den asynchronen Ausführungsmechanismus. Dann fügt (onDone, onFail) dem Versprechen eine Rückruffunktion hinzu Wenn der Aufruf erfolgreich abgeschlossen wurde (resolve), wird die Callback-Funktion onDone ausgeführt, und wenn der Aufruf fehlschlägt (reject), wird onFail ausgeführt, wenn auf mehrere Promise-Objekte gewartet werden kann gestartet oder sogar beendet wurde, ist es weiterhin möglich, Callback-Funktionen zu registrieren
someObj.done(callback).sendRequest() vs. someObj.sendRequest().done(callback)
Das Registrieren der Rückruffunktion vor dem Ausgeben eines asynchronen Aufrufs oder das Registrieren nach dem Ausgeben eines asynchronen Aufrufs ist völlig gleichwertig. Dies zeigt, dass der Programmausdruck nie vollständig korrekt ist und es immer eine inhärente Dimension der Änderung gibt, wenn diese inhärente Dimension effektiv sein kann genutzt Die Variabilität kann die Leistung gleichzeitiger Programme erheblich verbessern.
Die spezifische Implementierung des Versprechenmodus ist sehr einfach. jQuery._Deferred definiert eine Funktionswarteschlange, die die folgenden Funktionen hat:
A. Speichern Sie die Rückruffunktion.
B. Alle gespeicherten Funktionen zum Zeitpunkt der Auflösung oder Ablehnung ausführen.
C. Nach der Ausführung werden alle weiteren Funktionen sofort ausgeführt.
Einige Sprachen, die speziell auf verteiltes Rechnen oder paralleles Rechnen ausgerichtet sind, verfügen über einen integrierten Versprechensmodus auf Sprachebene, z. B. die E-Sprache
def carPromise := carMaker <- produzieren("Mercedes");
Def TemperaturePromise := carPromise <- getEngineTemperature()
...
When (temperaturePromise) -> done(temperature) {
println(`Die Temperatur des Automotors beträgt: $temperature`)
} fangen e {
println(`Motortemperatur konnte nicht ermittelt werden, Fehler: $e`)
}
In der E-Sprache ist <- der Eventual-Operator, was bedeutet, dass er irgendwann ausgeführt wird, aber nicht unbedingt jetzt. Das normale car.moveTo(2,3) bedeutet, dass es sofort ausgeführt wird und das Ergebnis erhalten wird Der Compiler ist dafür verantwortlich, alle Versprechenabhängigkeiten zu identifizieren und die Planung automatisch zu implementieren
10. Erweitern: Vererbung ist nicht erforderlich
JS ist eine prototypbasierte Sprache und verfügt über keinen eingebauten Vererbungsmechanismus. Dies hat viele Schüler gestört, die über eine umfassende Ausbildung in der traditionellen objektorientierten Ausbildung verfügen. Aber was kann uns die Vererbung bringen? Die einfachste Antwort lautet: Code-Wiederverwendung. Analysieren wir also zunächst das Potenzial der Vererbung als Mittel zur Code-Wiederverwendung.
Früher gab es ein Konzept namens „Mehrfachvererbung“, das die Super-Saiyajin-Version des Vererbungskonzepts war. Leider wurde später ein angeborener Defekt diagnostiziert, so dass eine Interpretation des Vererbungskonzepts entstand: Vererbung ist eine „ist eine“-Beziehung, ein abgeleitetes Objekt „ist eine“ hat viele Basisklassen, was unweigerlich zu Schizophrenie führen wird, daher ist Mehrfachvererbung schlecht
Klasse B{ public: void f(){ f in B } }
Klasse D: öffentlich A, B{}
Wenn Klasse D von zwei Basisklassen A und B erbt und beide Klassen A und B dieselbe Funktion f implementieren, dann ist das f in Klasse D das f in A oder das f in B, oder was ist mit f? in A und f in B? Die Entstehung dieses Dilemmas ergibt sich aus der Tatsache, dass die Basisklassen A und B von D in einer parallelen Beziehung stehen. Sie erfüllen schließlich das Kommutativgesetz und das Assoziativgesetz. Es kann für uns schwierig sein, zwei Unterordnungsbeziehungen zwischen Konzepten zu erkennen. Wenn wir jedoch einige Anforderungen auf konzeptioneller Ebene lockern und Probleme bei der Wiederverwendung von Code eher von der operativen Ebene aus betrachten, können wir einfach davon ausgehen, dass B auf der Grundlage von A operiert Wir können ein lineares Ergebnis der Transformation erhalten. Mit anderen Worten, wenn wir das Kommutativgesetz zwischen A und B aufgeben und nur das Assoziativgesetz beibehalten, wird A, B erweitert und B, A wird zu zwei unterschiedlichen Ergebnissen führen, und das wird nicht mehr der Fall sein Seien Sie keine Unklarheit in der Interpretation. Der sogenannte Merkmalsmechanismus in der Sprache übernimmt tatsächlich diese Strategie
Lange nach der Erfindung der objektorientierten Technologie erschien die sogenannte aspektorientierte Programmierung. Sie unterscheidet sich von OOP darin, dass es sich um eine Positionierungs- und Modifikationstechnologie im Codestrukturraum handelt und Methoden, und AOP bietet auch eine Code-Wiederverwendungsmethode, die als Mixin-Objekt angesehen wird und beliebig geöffnet und geändert werden kann werden direkt in den Objektkörper injiziert und dessen Verhalten direkt verändert
Die Bibliothek „prototyp.js“ führt die Erweiterungsfunktion
ist eine Abdeckoperation zwischen Maps, aber sie ist sehr effektiv und wurde in der jQuery-Bibliothek erweitert. Diese Operation ähnelt Mixin, dem wichtigsten technischen Mittel zur Code-Wiederverwendung in jQuery – es ist keine große Sache wenn es keine Vererbung gibt.
11. Namenszuordnung: Alles sind Daten
Wenn der Code gut ist, muss es weniger Schleifenurteile geben. Schleifen und Beurteilungsanweisungen sind die Grundkomponenten des Programms, werden jedoch häufig nicht in hervorragenden Codebibliotheken gefunden, da die Verflechtung dieser Anweisungen die Hauptlinie verwischt Lassen Sie uns in der erschöpfenden Codeverfolgung durch Funktionen wie „jeweils“ und „extend“ in den Hintergrund treten. Die val( )-Funktion von jQuery muss unterschiedliche Verarbeitungen für verschiedene Tags durchführen. Definieren Sie daher eine Funktionszuordnungstabelle mit tagName als Schlüssel
Zuordnungstabellen verwalten Funktionen als gewöhnliche Daten und werden häufig in dynamischen Sprachen verwendet. Insbesondere ist das Objekt selbst ein Container für Funktionen und Variablen und kann als Zuordnungstabelle betrachtet werden. Eine in jQuery häufig verwendete Technik ist die dynamische Verwendung von Namenszuordnungen Generieren Sie Code und bilden Sie einen vorlagenähnlichen Mechanismus. Um beispielsweise zwei sehr ähnliche Funktionen myWidth und myHeight zu implementieren, benötigen wir kein
(function(window,undefined){
// Darin befindet sich ein weiteres Paket
var jQuery = (function() {
var jQuery = function(selector, context) {
return new jQuery.fn.init( selector, context, rootjQuery );
}
....
// fn ist eigentlich die Abkürzung für Prototyp
jQuery.fn = jQuery.prototype = {
Konstruktor: jQuery,
init: function(selector, context, rootjQuery) {... }
}
// Der Aufruf von jQuery() entspricht new init(), und der Prototyp von init ist der Prototyp von jQuery
jQuery.fn.init.prototype = jQuery.fn;
// // Das hier zurückgegebene jQuery-Objekt hat nur die grundlegendsten Funktionen. Das Folgende ist eine Reihe von Erweiterungen
Geben Sie jQuery zurück;
})();
...
//JQuery als globales Objekt verfügbar machen
window.jQuery = window.$ = jQuery;
})(Fenster);
Offensichtlich ist $.fn eigentlich die Abkürzung von jQuery.prototype
Ein zustandsloses Plug-in ist nur eine Funktion, sehr einfach
if($.browser.msie) {
// etwas tun
} else if($.browser.opera) {
// ...
}
Da der Wettbewerb auf dem Browsermarkt jedoch eskaliert, imitieren und tarnen sich die Konkurrenten gegenseitig, was zu einem UserAgent-Chaos führt. Mit der Geburt von Chrome und dem Aufstieg von Safari hat auch der IE begonnen, seine Entwicklung hin zu Standards und Sniffern zu beschleunigen Kann dies nicht mehr tun. Als differenziertere und spezifischere Erkennungsmethode hat sich die Feature-Erkennung allmählich zur gängigen Methode für den Umgang mit der Browserkompatibilität entwickelt
// IE entfernt führende Leerzeichen, wenn .innerHTML verwendet wird
leadingWhitespace: ( div.firstChild.nodeType === 3 ),
...
}
Nur basierend auf dem, was Sie tatsächlich gesehen haben, und nicht auf dem, was Sie einmal wussten, ist es einfacher, mit der Zukunft kompatibel zu sein.
14. Prototyp vs. jQuery
prototype.js ist eine Bibliothek mit hohen Ansprüchen. Ihr Ziel ist es, eine neue Benutzererfahrung zu bieten, JavaScript auf Sprachebene mit Bezug auf Ruby zu transformieren und letztendlich das Gesicht von js stark zu verändern. $, extensions, every, bind ... Diese bekannten Konzepte werden alle in das js-Feld eingeführt. Es fügt skrupellos verschiedene Konzepte zum globalen Namensraum des Fensters hinzu. Wessen Impuls ist gegeben? jQuery hingegen ist pragmatischer und sein Ziel besteht einfach darin, weniger zu schreiben und mehr zu tun
Das Schicksal radikaler Idealisten besteht jedoch oft darin, dass sie sterben, bevor ihre Ambitionen erfüllt werden. Als die ikonische Bindungsfunktion von „prototyp.js“ in den ECMAScript-Standard aufgenommen wurde, war ihr Niedergang zum Scheitern verurteilt Objekt ist die einzigartige geheime Fähigkeit von Prototype.js und es ist auch seine Achillesferse. Insbesondere wenn es versucht, jQuery zu imitieren und erweiterte Objekte über Element.extend(element) zurückgibt, wird es von jQuery vollständig in den Graben geworfen. js unterscheidet sich von jQuery. Es verändert jedoch immer direkt den Prototyp des nativen Objekts. Die Lösung von Problemen auf nativer Objektebene ist jedoch vorhersehbar. Leistungsprobleme, Namenskonflikte, Kompatibilitätsprobleme usw. können nicht durch die Fähigkeit einer Hilfebibliothek gelöst werden. Die 2.0-Version von Prototype.js soll große Änderungen erfahren. Ich weiß nicht, ob ich mit der Geschichte brechen soll Kompatibilität, oder weiterhin kämpfen, um in den Rissen zu überleben.
Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
