Comment implémenter des modèles de programmation asynchrone en JavaScript

Méthodes pour implémenter le mode de programmation asynchrone en JavaScript : 1. Fonction de rappel, qui est la méthode la plus basique de programmation asynchrone ; 2. Écoute d'événements 3. Publier ou s'abonner 4. Objet de promesses.

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur DELL G3.

Méthodes pour implémenter le mode de programmation asynchrone en JavaScript :

Fonction de rappel

C'est la plus basique des fonctions asynchrones. méthode de programmation.

Supposons qu'il y ait deux fonctions f1 et f2, et que cette dernière attend le résultat de l'exécution de la première.

Le code est le suivant :

f1();
f2();

Si f1 est une tâche fastidieuse, vous pouvez envisager de réécrire f1 et d'écrire f2 comme fonction de rappel de f1.

Le code est le suivant :

　　function f1(callback){
　　　　setTimeout(function () {
　　　　　　// f1的任务代码
　　　　　　callback();
　　　　}, 1000);
　　}

Le code d'exécution devient le suivant :

Le code est le suivant :

　　f1(f2);

De cette façon, on changer l'opération de synchronisation en C'est devenu une opération asynchrone. F1 ne bloquera pas l'exécution du programme Cela équivaut à exécuter d'abord la logique principale du programme et à reporter l'exécution des opérations fastidieuses.

L'avantage de la fonction callback est qu'elle est simple, facile à comprendre et à déployer. L'inconvénient est qu'elle n'est pas propice à la lecture et à la maintenance du code. Les différentes parties sont fortement couplées (Couplage). , le processus sera très déroutant et chaque tâche ne peut être spécifiée qu'avec une fonction de rappel.

2. Surveillance des événements

Une autre façon de penser est d'utiliser le modèle événementiel. L'exécution d'une tâche ne dépend pas de l'ordre du code, mais de la survenance d'un événement.

Prenons f1 et f2 comme exemple. Tout d’abord, liez un événement à f1 (jQuery est utilisé ici).

Le code est le suivant :

　　f1.on('done', f2);

La ligne de code ci-dessus signifie que lorsque l'événement done se produit dans f1, f2 sera exécuté. Ensuite, réécrivez f1 :

Le code est le suivant :

　　function f1(){
　　　　setTimeout(function () {
　　　　　　// f1的任务代码
　　　　　　f1.trigger('done');
　　　　}, 1000);
　　}

f1.trigger('done') signifie qu'une fois l'exécution terminée, l'événement done est déclenché immédiatement, commençant ainsi à exécutez 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 tâche est terminée, elle "publie" un signal au centre de signal. D'autres tâches peuvent "s'abonner" au signal du centre de signal. sachez quand vous pouvez commencer à exécuter. 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 "terminé" du jQuery "Signal Center".

Le code est le suivant :

　　jQuery.subscribe("done", f2);

Ensuite, f1 est réécrit comme suit :

Le code est le suivant :

　　function f1(){
　　　　setTimeout(function () {
　　　　　　// 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.

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 évidemment 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 chaque signal possède.

4. Objet Promises

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 être écrite comme :

Le code est le suivant :

　　f1().then(f2);

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

Le code est le suivant :

　　function f1(){
　　　　var dfd = $.Deferred();
　　　　setTimeout(function () {
　　　　　　// f1的任务代码
　　　　　　dfd.resolve();
　　　　}, 500);
　　　　return 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 :

Le code est le suivant :

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

Autre exemple, spécifiez la fonction de rappel lorsqu'une erreur survient :

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 a été terminée et qu'une fonction de rappel est ajoutée, la fonction de rappel sera exécutée immédiatement. Ainsi, vous n'avez pas à vous inquiéter si vous avez manqué un événement ou un signal. L’inconvénient de cette méthode est qu’elle est relativement difficile à rédiger et à comprendre.

Recommandations d'apprentissage gratuites associées : Tutoriel vidéo javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!