Heim >Web-Frontend >js-Tutorial >4 Möglichkeiten zur Implementierung asynchroner Programmiermuster in JavaScript_Javascript-Kenntnisse

4 Möglichkeiten zur Implementierung asynchroner Programmiermuster in JavaScript_Javascript-Kenntnisse

WBOY
WBOYOriginal
2016-05-16 16:35:40944Durchsuche

Sie wissen vielleicht, dass die Ausführungsumgebung der Javascript-Sprache „Single Thread“ ist.

Der sogenannte „Single Thread“ bedeutet, dass immer nur eine Aufgabe gleichzeitig erledigt werden kann. Wenn mehrere Aufgaben vorhanden sind, müssen diese in die Warteschlange gestellt werden. Nachdem die vorherige Aufgabe abgeschlossen ist, wird die nächste Aufgabe ausgeführt und so weiter.

Der Vorteil dieses Modus besteht darin, dass er relativ einfach zu implementieren ist und die Ausführungsumgebung relativ einfach ist. Der Nachteil besteht darin, dass, solange eine Aufgabe lange dauert, nachfolgende Aufgaben in die Warteschlange gestellt werden müssen, was die Ausführung verzögert des gesamten Programms. Die häufige Nichtreaktion des Browsers (suspended dead) wird häufig dadurch verursacht, dass ein bestimmter Teil des Javascript-Codes über einen längeren Zeitraum ausgeführt wird (z. B. eine Endlosschleife), wodurch die gesamte Seite an dieser Stelle hängen bleibt und andere Aufgaben nicht ausgeführt werden können.

Um dieses Problem zu lösen, unterteilt die Javascript-Sprache den Ausführungsmodus von Aufgaben in zwei Typen: synchron (synchron) und asynchron (asynchron).

„Synchronmodus“ ist der Modus im vorherigen Absatz. Die letzte Aufgabe wartet auf das Ende der vorherigen Aufgabe, bevor sie ausgeführt wird. Die Ausführungsreihenfolge des Programms ist konsistent und synchron mit der Reihenfolge der Aufgaben Völlig anders. Jede Aufgabe verfügt über eine oder mehrere Rückruffunktionen (Callback). Die nächste Aufgabe wird nicht ausgeführt, sondern die Rückruffunktion wird ausgeführt, ohne auf das Ende der vorherigen Aufgabe zu warten Die Reihenfolge der Programmausführung ist inkonsistent und asynchron mit der Reihenfolge der Aufgaben.

„Asynchroner Modus“ ist sehr wichtig. Auf der Browserseite sollten lang laufende Vorgänge asynchron ausgeführt werden, um zu verhindern, dass der Browser nicht mehr reagiert. Das beste Beispiel sind Ajax-Vorgänge. Auf der Serverseite ist der „asynchrone Modus“ sogar der einzige Modus, da die Ausführungsumgebung Single-Threaded ist. Wenn alle HTTP-Anfragen synchron ausgeführt werden dürfen, sinkt die Serverleistung stark und es kommt zu einem baldigen Antwortverlust.

Dieser Artikel fasst 4 Methoden der „asynchronen Modus“-Programmierung zusammen. Wenn Sie sie verstehen, können Sie Javascript-Programme mit einer vernünftigeren Struktur, besserer Leistung und einfacherer Wartung schreiben.

1. Rückruffunktion

Dies ist die grundlegendste Methode der asynchronen Programmierung.

Angenommen, es gibt zwei Funktionen f1 und f2, und letztere wartet auf das Ausführungsergebnis der ersteren.

Code kopieren 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.

Code kopieren Der Code lautet wie folgt:

Funktion f1(Rückruf){

setTimeout(function () {

// Aufgabencode von f1

callback();

  }, 1000);

 }


Der ausgeführte Code sieht wie folgt aus:
Code kopieren Der Code lautet wie folgt:

f1(f2);

Mit dieser Methode wandeln wir synchrone Vorgänge in asynchrone Vorgänge um. F1 blockiert nicht die Ausführung des Programms. Dies entspricht der Ausführung der Hauptlogik des Programms und der Verschiebung der 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 Sehr verwirrend und jede Aufgabe kann nur eine Rückruffunktion angeben.

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).

Code kopieren Der Code lautet wie folgt:

f1.on('done', f2);

Die Bedeutung der obigen Codezeile besteht darin, dass f2 ausgeführt wird, wenn das erledigte Ereignis in f1 auftritt. Schreiben Sie dann f1 um:
Code kopieren Der Code lautet wie folgt:

Funktion f1(){

setTimeout(function () {

// Aufgabencode von f1

  f1.trigger('done');

  }, 1000);

 }


f1.trigger('done') signifie qu'une fois l'exécution terminée, l'événement done sera immédiatement déclenché pour commencer l'exécution de f2.

L'avantage de cette méthode est qu'elle est relativement facile à comprendre, qu'elle peut lier plusieurs événements, que chaque événement peut spécifier plusieurs fonctions de rappel et qu'elle peut être « découplée », ce qui est propice à la modularisation. L'inconvénient est que l'ensemble du programme doit être piloté par des événements et que le processus en cours devient très flou.

3. Publier/Abonnez-vous

L'« événement » de la section précédente peut être compris comme un « signal ».

Nous supposons qu'il existe un "centre de signal". Lorsqu'une certaine tâche est exécutée, elle "publie" un signal au centre de signal. D'autres tâches peuvent "s'abonner" au signal du centre de signal pour savoir ce que vous pouvez. commencez à l’exécuter vous-même. C'est ce qu'on appelle le « modèle de publication-abonnement » (modèle de publication-abonnement), également connu sous le nom de « modèle d'observateur » (modèle d'observateur).

Il existe de nombreuses implémentations de ce modèle. Celle utilisée ci-dessous est Tiny Pub/Sub de Ben Alman, qui est un plug-in pour jQuery.

Tout d'abord, f2 s'abonne au signal "done" du jQuery "Signal Center".

Copier le code Le code est le suivant :

jQuery.subscribe("done", f2);

Ensuite, f1 se réécrit comme suit :
Copier le code Le code est le suivant :

fonction f1(){

setTimeout(function () {

// Code de tâche de f1

jQuery.publish("done");

  }, 1000);

 }


jQuery.publish("done") signifie qu'une fois l'exécution de f1 terminée, le signal "done" est envoyé au "centre de signal" jQuery, déclenchant ainsi l'exécution de f2.

De plus, une fois l'exécution de f2 terminée, vous pouvez également vous désinscrire.

Copier le code Le code est le suivant :

jQuery.unsubscribe("done", f2);

La nature de cette méthode est similaire à « l’écoute d’événements », mais elle est nettement meilleure que cette dernière. Parce que nous pouvons surveiller le fonctionnement du programme en consultant le « Centre de messages » pour voir combien de signaux existent et combien d'abonnés possède chaque signal.

4. Objet Promesses

L'objet Promises est une spécification proposée par le groupe de travail CommonJS pour fournir une interface unifiée pour la programmation asynchrone.

En termes simples, l'idée est que chaque tâche asynchrone renvoie un objet Promise, qui possède une méthode then qui permet de spécifier une fonction de rappel. Par exemple, la fonction de rappel f2 de f1 peut s'écrire :

Copier le code Le code est le suivant :

f1().then(f2);

f1 doit être réécrit comme suit (l'implémentation jQuery est utilisée ici) :
Copier le code Le code est le suivant :

fonction f1(){

 var dfd = $.Deferred();

setTimeout(function () {

// Code de tâche de f1

 dfd.resolve();

  }, 500);

Retourner dfd.promise ;

 }


L'avantage d'écrire de cette façon est que la fonction de rappel devient une méthode d'écriture en chaîne, le déroulement du programme est clairement visible et il existe un ensemble complet de méthodes de support qui peuvent réaliser de nombreuses fonctions puissantes.

Par exemple, spécifiez plusieurs fonctions de rappel :

Copier le code Le code est le suivant :

f1().then(f2).then(f3);

Pour un autre exemple, spécifiez la fonction de rappel lorsqu'une erreur se produit :
Copier le code Le code est le suivant :

f1().then(f2).fail(f3);

De plus, elle présente un avantage que n'ont pas les trois méthodes précédentes : si une tâche est terminée et qu'une fonction de rappel est ajoutée, la fonction de rappel sera exécutée immédiatement. Vous n'avez donc pas à craindre de manquer un événement ou un signal. L’inconvénient de cette méthode est qu’elle est relativement difficile à rédiger et à comprendre.
Stellungnahme:
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