Comme vous le savez peut-être, l'environnement d'exécution de la langue JavaScript est "thread unique".
Le soi-disant "thread unique" signifie qu'une seule tâche ne peut être terminée qu'à la fois. S'il y a plusieurs tâches, vous devez faire la queue, terminer la tâche précédente, exécuter la tâche suivante, etc.
L'avantage de ce modèle est qu'il est relativement simple à mettre en œuvre et que l'environnement d'exécution est relativement simple; L'inconvénient est que tant qu'il y a une tâche qui prend beaucoup de temps, les tâches suivantes doivent être mis en file d'attente, ce qui retardera l'exécution de l'ensemble du programme. Les navigateurs communs ne répondent pas souvent (faux décès) parce qu'un certain morceau de code JavaScript s'exécute pendant longtemps (comme une boucle morte), ce qui a provoqué la fin de la page entière à cet endroit et d'autres tâches ne peuvent pas être exécutées.
Pour résoudre ce problème, le langage JavaScript divise le mode d'exécution des tâches en deux types: synchrone (synchrone) et asynchrone (asynchrone).
"Mode synchrone" est le modèle de la section précédente. Cette dernière tâche attend que la tâche précédente se termine puis s'exécute. L'ordre d'exécution du programme est cohérent et synchrone avec l'ordre d'arrangement des tâches; Le "mode asynchrone" est complètement différent. Chaque tâche a une ou plusieurs fonctions de rappel (rappels). Une fois la tâche précédente terminée, ce n'est pas la tâche suivante, mais la fonction de rappel est exécutée. Cette dernière tâche est exécutée sans attendre la fin de la tâche précédente, de sorte que l'ordre d'exécution du programme est incohérent et asynchrone avec l'ordre d'arrangement des tâches.
"Mode asynchrone" est très important. Du côté du navigateur, les opérations à long terme doivent être exécutées de manière asynchrone pour éviter que le navigateur ne perde une réponse. Le meilleur exemple est les opérations AJAX. Côté serveur, "Mode asynchrone" est même le seul mode, car l'environnement d'exécution est unique, si toutes les demandes HTTP peuvent être exécutées de manière synchrone, les performances du serveur baisseront fortement et perdront bientôt sa réponse.
Cet article résume 4 méthodes de programmation "mode asynchrone". Les comprendre vous permet d'écrire des programmes JavaScript avec une structure plus raisonnable, de meilleures performances et une maintenance plus pratique.
1. Fonction de rappel
Il s'agit de la méthode la plus élémentaire de programmation asynchrone.
Supposons qu'il existe deux fonctions F1 et F2, ce dernier attendant le résultat d'exécution de la première.
La copie de code est la suivante:
F1 ();
f2 ();
Si F1 est une tâche qui prend du temps, vous pouvez envisager de réécrire F1 et d'écrire F2 comme fonction de rappel de F1.
La copie de code est la suivante:
fonction f1 (rappel) {
setTimeout (function () {
// Code de tâche de F1
callback ();
}, 1000);
}
Le code d'exécution devient ceci:
La copie de code est la suivante:
F1 (F2);
De cette façon, nous transformons les opérations synchrones en opérations asynchrones. F1 ne bloquera pas l'opération du programme, ce qui équivaut à exécuter la logique principale du programme d'abord et à reporter l'exécution de l'opération qui prend du temps.
L'avantage des fonctions de rappel est qu'ils sont simples, faciles à comprendre et à déployer, et l'inconvénient est qu'ils ne sont pas propices à la lecture et à la maintenance du code. Ils sont très couplés (couplage) entre les différentes parties, et le processus sera très chaotique, et chaque tâche ne peut spécifier qu'une seule fonction de rappel.
2. Surveillance des événements
Une autre idée est d'adopter un modèle axé sur les événements. L'exécution d'une tâche ne dépend pas de l'ordre du code, mais de savoir si un événement se produit.
Prenons F1 et F2 comme exemples. Tout d'abord, liez un événement pour F1 (la méthode d'écriture jQuery utilisée ici).
La copie de code est la suivante:
f1.on («Done», F2);
La ligne de code ci-dessus signifie que lorsque l'événement terminé se produit en F1, F2 est exécuté. Ensuite, réécrivez F1:
La copie de code est la suivante:
fonction f1 () {
setTimeout (function () {
// Code de tâche de F1
f1.trigger («fait»);
}, 1000);
}
F1.trigger («Done») signifie qu'après la fin de l'exécution, l'événement Terminé est déclenché immédiatement, commençant ainsi à exécuter F2.
L'avantage de cette méthode est qu'il est relativement facile à comprendre. Il peut lier plusieurs événements, et chaque événement peut spécifier plusieurs fonctions de rappel, et il peut être "découplage", ce qui est propice à la modularisation. L'inconvénient est que l'ensemble du programme deviendra motivé par des événements et que le processus d'opération deviendra très clair.
3. Publier / abonner
L '"événement" dans la section précédente peut être entièrement compris comme un "signal".
Nous supposons qu'il y a un "centre de signal". Une fois une tâche terminée, un signal est publié sur le centre de signalisation. D'autres tâches peuvent "s'abonner" le signal au centre de signal, afin de savoir quand il peut commencer l'exécution. C'est ce qu'on appelle le «modèle de publication-abonnement», également connu sous le nom de «modèle d'observateur».
Il existe de nombreuses implémentations de ce modèle. Ce qui suit est le minuscule pub / sub de Ben Alman, qui est un plug-in pour jQuery.
Tout d'abord, F2 s'abonne au signal "fait" au "Centre de signal" jQuery.
La copie de code est la suivante:
jQuery.Subscribe ("Done", F2);
Ensuite, F1 est réécrit comme suit:
La copie de code est la suivante:
fonction f1 () {
setTimeout (function () {
// Code de tâche de F1
jQuery.publish ("fait");
}, 1000);
}
jQuery.publish ("fait") signifie qu'après la fin de l'exécution de F1, un signal "fait" est émis au "Centre de signal" jQuery, déclenchant ainsi l'exécution de F2.
De plus, après l'exécution de F2, le désabonnement peut également être non abonné.
La copie de code est la suivante:
jQuery.unSubscribe ("Done", F2);
La nature de cette méthode est similaire à "l'écoute des événements", mais est nettement meilleure que ce dernier. Parce que nous pouvons surveiller le fonctionnement du programme en examinant le "centre de messages" pour comprendre combien de signaux existent et combien d'abonnés pour chaque signal.
4. Promet l'objet
L'objet Promise est une spécification proposée par le groupe de travail CommonJS, dans le but de fournir une interface unifiée pour la programmation asynchrone.
Autrement dit, son idée est que chaque tâche asynchrone renvoie un objet Promise, qui a une méthode alors qui permet de spécifier la fonction de rappel. Par exemple, la fonction de rappel F2 de F1 peut être écrite comme:
La copie de code est la suivante:
f1 (). alors (f2);
F1 doit être réécrit comme suit (l'implémentation de jQuery est utilisée ici):
La copie de code est la suivante:
fonction f1 () {
var dfd = $ .deferred ();
setTimeout (function () {
// Code de tâche de F1
dfd.Resolve ();
}, 500);
retour dfd.promise;
}
L'avantage de l'écriture de cette façon est que la fonction de rappel est devenue une méthode d'écriture de chaîne, et le flux du programme peut être vu très clairement, 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:
La copie de code est la suivante:
f1 (). Ensuite (F2) .Then (F3);
Par exemple, spécifiez la fonction de rappel lorsqu'une erreur se produit:
La copie de code est la suivante:
f1 (). alors (f2) .fail (f3);
De plus, il a un avantage qu'aucune des trois méthodes précédentes n'a: si une tâche a été terminée, ajoutez une fonction de rappel et la fonction de rappel sera exécutée immédiatement. Donc, vous n'avez pas à vous soucier de manquer un événement ou un signal. L'inconvénient de cette méthode est qu'il est relativement difficile d'écrire et de comprendre.