Methoden zur Implementierung des asynchronen Programmiermodus in JavaScript: 1. Rückruffunktion, die grundlegendste Methode der asynchronen Programmierung; 2. Ereignisabhörung; 4. Versprechensobjekt;
Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, DELL G3-Computer.
Methoden zur Implementierung des asynchronen Programmiermodus in JavaScript:
1. Rückruffunktion
Dies ist die grundlegendste Methode der asynchronen Programmierung.
Angenommen, es gibt zwei Funktionen f1 und f2, und die letztere wartet auf das Ausführungsergebnis der ersteren.
Der Code lautet wie folgt:
f1(); f2();
Wenn f1 eine zeitaufwändige Aufgabe ist, können Sie erwägen, f1 neu zu schreiben und f2 als Rückruffunktion von f1 zu schreiben.
Der Code lautet wie folgt:
function f1(callback){
setTimeout(function () {
// f1的任务代码
callback();
}, 1000);
}Der Ausführungscode lautet wie folgt:
Der Code lautet wie folgt:
f1(f2);
Auf diese Weise verwandeln wir den synchronen Vorgang in einen asynchronen Vorgang und f1 blockiert das Programm nicht Laufen, was der ersten Ausführung entspricht. Die Hauptlogik des Programms verzögert die Ausführung zeitaufwändiger Vorgänge.
Der Vorteil der Rückruffunktion besteht darin, dass sie einfach, leicht zu verstehen und bereitzustellen ist. Der Nachteil besteht darin, dass sie dem Lesen und Verwalten des Codes nicht förderlich ist. Die verschiedenen Teile sind stark gekoppelt (Kopplung), der Prozess wird verwirrend sein , und für jede Aufgabe kann nur eine Rückruffunktion angegeben werden.
2. Ereignisüberwachung
Eine andere Denkweise ist die Verwendung des ereignisgesteuerten Modells. Die Ausführung einer Aufgabe hängt nicht von der Reihenfolge des Codes ab, sondern davon, ob ein Ereignis eintritt.
Nehmen wir f1 und f2 als Beispiel. Binden Sie zunächst ein Ereignis an f1 (hier wird jQuery verwendet).
Der Code lautet wie folgt:
f1.on('done', f2);
Die obige Codezeile bedeutet, dass f2 ausgeführt wird, wenn das erledigte Ereignis in f1 auftritt. Schreiben Sie dann f1 um:
Der Code lautet wie folgt:
function f1(){
setTimeout(function () {
// f1的任务代码
f1.trigger('done');
}, 1000);
}f1.trigger('done') bedeutet, dass nach Abschluss der Ausführung das Done-Ereignis sofort ausgelöst wird und somit mit der Ausführung von f2 begonnen wird.
Der Vorteil dieser Methode besteht darin, dass sie relativ einfach zu verstehen ist, mehrere Ereignisse binden kann, jedes Ereignis mehrere Rückruffunktionen angeben kann und „entkoppelt“ werden kann, was der Modularisierung förderlich ist. Der Nachteil besteht darin, dass das gesamte Programm ereignisgesteuert werden muss und der laufende Prozess sehr unklar wird.
3. Veröffentlichen/Abonnieren
Das „Ereignis“ im vorherigen Abschnitt kann als „Signal“ verstanden werden.
Wir gehen davon aus, dass es ein „Signalzentrum“ gibt. Wenn eine bestimmte Aufgabe ausgeführt wird, „veröffentlicht“ sie ein Signal an das Signalzentrum, um zu erfahren, wann sie selbst mit der Ausführung beginnen kann . Dies wird als „Publish-Subscribe-Muster“ (Publish-Subscribe-Muster) oder auch als „Observer-Muster“ (Observer-Muster) bezeichnet.
Es gibt viele Implementierungen dieses Musters. Die folgende ist Ben Almans Tiny Pub/Sub, ein Plug-in für jQuery.
Zuerst abonniert f2 das „Fertig“-Signal bei der „Signal Center“-jQuery.
Der Code lautet wie folgt:
jQuery.subscribe("done", f2);Dann wird f1 wie folgt umgeschrieben:
Der Code lautet wie folgt:
function f1(){
setTimeout(function () {
// f1的任务代码
jQuery.publish("done");
}, 1000);
}jQuery.publish("done") bedeutet, dass nach Abschluss der Ausführung von f1 veröffentlicht wird. done“ an das jQuery-Signal „Signal Center“ und löst so die Ausführung von f2 aus.
Darüber hinaus können Sie sich auch abmelden, nachdem f2 die Ausführung abgeschlossen hat.
Der Code lautet wie folgt:
jQuery.unsubscribe("done", f2);Die Art dieser Methode ähnelt der „Ereignisüberwachung“, ist aber offensichtlich besser als letztere. Denn wir können den Betrieb des Programms überwachen, indem wir im „Message Center“ nachsehen, wie viele Signale vorhanden sind und wie viele Abonnenten jedes Signal hat.
4. Promises-Objekt
Das Promises-Objekt ist eine von der CommonJS-Arbeitsgruppe vorgeschlagene Spezifikation, um eine einheitliche Schnittstelle für die asynchrone Programmierung bereitzustellen.
Einfach ausgedrückt besteht die Idee darin, dass jede asynchrone Aufgabe ein Promise-Objekt zurückgibt, das über eine then-Methode verfügt, die die Angabe einer Rückruffunktion ermöglicht. Beispielsweise kann die Rückruffunktion f2 von f1 wie folgt geschrieben werden:
Der Code lautet wie folgt:
f1().then(f2);
f1 muss wie folgt umgeschrieben werden (hier wird die jQuery-Implementierung verwendet):
Der Code lautet wie folgt:
function f1(){
var dfd = $.Deferred();
setTimeout(function () {
// f1的任务代码
dfd.resolve();
}, 500);
return dfd.promise;
}Der Vorteil dieser Schreibweise besteht darin, dass die Rückruffunktion zu einer Kettenschreibmethode geworden ist, der Programmfluss klar erkennbar ist und ein vollständiger Satz unterstützender Methoden vorhanden ist, mit denen viele leistungsstarke Funktionen realisiert werden können.
Geben Sie beispielsweise mehrere Rückruffunktionen an:
Der Code lautet wie folgt:
f1().then(f2).then(f3);
Ein weiteres Beispiel: Geben Sie die Rückruffunktion an, wenn ein Fehler auftritt:
Der Code lautet wie folgt:
f1().then(f2).fail(f3);
Darüber hinaus gibt es auch eine Funktion, über die keine der vorherigen drei Methoden verfügt. Vorteile: Wenn eine Aufgabe abgeschlossen ist und eine Rückruffunktion hinzugefügt wird, wird die Rückruffunktion sofort ausgeführt. Sie müssen sich also keine Sorgen machen, ein Ereignis oder Signal zu verpassen. Der Nachteil dieser Methode besteht darin, dass sie relativ schwer zu schreiben und zu verstehen ist.
Verwandte kostenlose Lernempfehlungen: Javascript-Video-Tutorial
Das obige ist der detaillierte Inhalt vonSo implementieren Sie asynchrone Programmiermuster in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
