Calcul du nième nombre de Fibonnaci 
  
  

    

    

      
       Calculer 
    
    

  
  
 Cette partie est très simple. Premièrement, nous avons un titre. Ensuite, nous avons un conteneur avec une entrée et un bouton. Un utilisateur saisit un nombre puis clique sur «Calculer». Nous avons également un conteneur pour contenir le résultat du calcul. Enfin, nous incluons le fichier  src / index.js  dans une balise  script . 
 Vous pouvez supprimer le lien de la feuille de style. Mais si vous manquez de temps, j'ai défini des CSS que vous pouvez utiliser. Créez simplement le fichier  styles.css  dans le dossier racine et ajoutez les styles ci-dessous: 

 body {
    marge: 0;
    rembourrage: 0;
    box-dimensionnement: border-box;
  }
  
  .body-conteneur,
  .heading-container {
    rembourrage: 0 20px;
  }
  
  .heading-container {
    rembourrage: 20px;
    Couleur blanche;
    arrière-plan: # 7a84dd;
  }
  
  .heading-container> h1 {
    marge: 0;
  }
  
  .body-container {
    largeur: 50%
  }
  
  .input-div {
    margin-top: 15px;
    marge inférieure: 15px;
    affichage: flex;
    align-items: centre;
  }
  
  .résultats {
    largeur: 50vw;
  }
  
  .résultats> p {
    taille de la police: 24px;
  }
  
  .result-div {
    rembourrage: 5px 10px;
    rayon de la bordure: 5px;
    marge: 10px 0;
    couleur de fond: # e09bb7;
  }
  
  .result-div p {
    marge: 5px;
  }
  
  span.bold {
    poids de la police: gras;
  }
  
  contribution {
    taille de la police: 25px;
  }
  
  p.error {
    La couleur rouge;
  }
  
  .number-input {
    rembourrage: 7,5 px 10 px;
  }
  
  .btn-submit {
    rembourrage: 10px;
    rayon de la bordure: 5px;
    bordure: aucune;
    arrière-plan: # 07f;
    taille de la police: 24px;
    Couleur blanche;
    curseur: pointeur;
    marge: 0 10px;
  } 
 Maintenant, ouvrez  src / index.js  développons-le lentement. Ajoutez le code ci-dessous.
 const fib = (n) => (n  {
  // 1er, 2ème, 3ème, 4ème, etc.
  const j = num% 10;
  const k = num% 100;
  commutateur (vrai) {
    cas j === 1 && k! == 11:
      retourne num + "st";
    cas j === 2 && k! == 12:
      retourne num + "nd";
    cas j === 3 && k! == 13:
      retourne num + "rd";
    défaut:
      retourne num + "th";
  }
};
const textCont = (n, fibNum, heure) => {
  const nth = suffixe_ordinal (n);
  retour '
  
 Heure:  $ {heure} ms 
  
 $ {nth}  numéro de fibonnaci:  $ {fibNum} 
   `;
}; 
 Ici, nous avons trois fonctions. La première est la fonction que nous avons vue précédemment pour calculer le nième FN. La deuxième fonction est simplement une fonction utilitaire pour attacher un suffixe approprié à un nombre entier. La troisième fonction prend quelques arguments et produit un balisage que nous insérerons plus tard dans le DOM. Le premier argument est le nombre dont FN est en cours de calcul. Le deuxième argument est le FN calculé. Le dernier argument est le temps qu'il faut pour effectuer le calcul.
 Toujours dans  src / index.js ajoutez le code ci-dessous juste sous le précédent.
 const errPar = document.getElementById ( "Erreur");
const btn = document.getElementById ("submit-btn");
const input = document.getElementById ("number-input");
const resultsContainer = document.getElementById ("conteneur de résultats");

btn.addEventListener ("clic", (e) => {
  errPar.textContent = '';
  const num = window.Number (input.value);

  si (num <2) {
    errPar.textContent = "Veuillez saisir un nombre supérieur à 2";
    revenir;
  }

  const startTime = new Date (). getTime ();
  const somme = fib (num);
  const time = new Date (). getTime () - startTime;

  const resultDiv = document.createElement ("div");
  resultDiv.innerHTML = textCont (num, somme, heure);
  resultDiv.className = "result-div";
  resultsContainer.appendChild (resultDiv);
}); 
 Tout d'abord, nous utilisons l'API  document  pour obtenir les nœuds  DOM  dans notre fichier HTML. Nous obtenons une référence au paragraphe où nous afficherons les messages d'erreur; l'entrée; le bouton de calcul et le conteneur dans lequel nous afficherons nos résultats.
 Ensuite, nous attachons un gestionnaire d'événements "clic" au bouton. Lorsque le bouton est cliqué, nous prenons tout ce qui se trouve à l'intérieur de l'élément d'entrée et le convertissons en un nombre, si nous obtenons quelque chose de moins de 2, nous affichons un message d'erreur et retournons. Si nous obtenons un nombre supérieur à 2, nous continuons. Tout d'abord, nous enregistrons l'heure actuelle. Après cela, nous calculons le FN. Lorsque cela se termine, nous obtenons un décalage horaire qui représente la durée du calcul. Dans la partie restante du code, nous créons un nouveau  div . Nous définissons ensuite son code HTML interne comme la sortie de la fonction  textCont ()  que nous avons définie précédemment. Enfin, nous lui ajoutons une classe (pour le style) et l'ajoutons au conteneur de résultats. L'effet de ceci est que chaque calcul apparaîtra dans un  div  séparé sous le précédent.
 Nous pouvons voir que lorsque le nombre augmente, le temps de calcul augmente également (de façon exponentielle). Par exemple, de 30 à 35, nous avons fait passer le temps de calcul de 13 ms à 130 ms. On peut encore considérer ces opérations comme «rapides». À 40, nous voyons un temps de calcul supérieur à 1 seconde. Sur ma machine, c'est là que je commence à remarquer que la page ne répond plus. À ce stade, je ne peux plus interagir avec la page pendant que le calcul est en cours. Je ne peux pas me concentrer sur l’entrée ou faire quoi que ce soit d’autre.
 Rappelez-vous quand nous avons dit que JavaScript était monothread? Eh bien, ce thread a été «bloqué» par ce calcul de longue durée, donc tout le reste doit «attendre» qu'il se termine. Il peut commencer à une valeur inférieure ou supérieure sur votre ordinateur, mais vous êtes obligé d'atteindre ce point. Notez qu'il a fallu près de 10 secondes pour calculer celle de 44. S'il y avait d'autres choses à faire sur votre application Web, eh bien, l'utilisateur doit attendre que Fib (44) se termine avant de pouvoir continuer. Mais si vous avez déployé un travailleur Web pour gérer ce calcul, vos utilisateurs pourraient continuer avec autre chose pendant son exécution.
 Voyons maintenant comment les travailleurs Web nous aident à surmonter ce problème.
 Un exemple de travailleur Web en action [19659003] Dans cette section, nous allons déléguer le travail de calcul du nième FN à un travailleur Web. Cela aidera à libérer le thread principal et à garder notre interface utilisateur réactive pendant que le calcul est en cours.
 Démarrer avec les travailleurs Web est étonnamment simple. Voyons comment. Créez un nouveau fichier  src / fib-worker.js . et entrez le code suivant.
 const fib = (n) => (n  {
  const {num} = e.data;
  const startTime = new Date (). getTime ();
  const fibNum = fib (num);
  postMessage ({
    fibNum,
    time: new Date (). getTime () - startTime,
  });
}; 
 Notez que nous avons déplacé la fonction qui calcule le nième nombre de Fibonacci,  fib  dans ce fichier. Ce fichier sera géré par notre web worker.
 Rappel dans la section  Qu'est-ce qu'un web worker nous avons mentionné que les web workers et leurs parents communiquent en utilisant le gestionnaire d'événements  onmessage  et  méthode postMessage () . Ici, nous utilisons le gestionnaire d'événements  onmessage  pour écouter les messages du script parent. Une fois que nous recevons un message, nous déstructurons le numéro de l'attribut data de l'événement. Ensuite, nous obtenons l'heure actuelle et commençons le calcul. Une fois le résultat prêt, nous utilisons la méthode  postMessage ()  pour renvoyer les résultats dans le script parent.
 Ouvrez  src / index.js  apportons quelques modifications.
 ...

const worker = nouvelle fenêtre.Worker ("src / fib-worker.js");

btn.addEventListener ("clic", (e) => {
  errPar.textContent = "";
  const num = window.Number (input.value);
  si (num  err;
  worker.onmessage = (e) => {
    const {time, fibNum} = e.data;
    const resultDiv = document.createElement ("div");
    resultDiv.innerHTML = textCont (num, fibNum, heure);
    resultDiv.className = "result-div";
    resultsContainer.appendChild (resultDiv);
  };
}); 
 La première chose à faire est de créer le web worker en utilisant le constructeur  Worker . Ensuite, dans l'écouteur d'événements de notre bouton, nous envoyons un numéro au worker en utilisant  worker.postMessage ({num}) . Après cela, nous définissons une fonction pour écouter les erreurs dans le worker. Ici, nous renvoyons simplement l'erreur. Vous pouvez certainement faire plus si vous le souhaitez, comme l'afficher dans DOM. Ensuite, nous écoutons les messages du travailleur. Une fois que nous recevons un message, nous déstructurons  time  et  fibNum et continuons le processus de les montrer dans le DOM.
 Notez qu'à l'intérieur du web worker, le  onmessage  est disponible dans la portée du travailleur, donc nous aurions pu l'écrire comme  self.onmessage  et  self.postMessage () . Mais dans le script parent, nous devons les attacher au worker lui-même.
 Dans la capture d'écran ci-dessous, vous verrez le fichier de travail Web dans l'onglet sources des outils de développement Chrome. Ce que vous devez noter, c'est que l'interface utilisateur reste réactive quel que soit le numéro que vous entrez. Ce comportement est la magie des travailleurs Web.
 Nous avons beaucoup progressé avec notre application Web. Mais il y a autre chose que nous pouvons faire pour l’améliorer. Notre implémentation actuelle utilise un seul worker pour gérer chaque calcul. Si un nouveau message arrive alors que l'un d'eux est en cours d'exécution, l'ancien est remplacé. Pour contourner cela, nous pouvons créer un nouveau travailleur pour chaque appel afin de calculer le FN. Voyons comment procéder dans la section suivante.
 Utilisation de plusieurs travailleurs Web
 Actuellement, nous traitons chaque demande avec un seul travailleur. Ainsi, une demande entrante remplacera une précédente qui n'est pas encore terminée. Ce que nous voulons maintenant, c'est apporter un petit changement pour générer un nouveau web worker pour chaque requête. Nous tuerons ce travailleur une fois que cela sera fait.
 Ouvrez  src / index.js  et déplacez la ligne qui crée le travailleur Web dans le gestionnaire d'événements de clic du bouton. Le gestionnaire d'événements devrait maintenant ressembler à celui ci-dessous.
 btn.addEventListener ("click", (e) => {
  errPar.textContent = "";
  const num = window.Number (input.value);
  
  si (num  err;
  worker.onmessage = (e) => {
    const {time, fibNum} = e.data;
    const resultDiv = document.createElement ("div");
    resultDiv.innerHTML = textCont (num, fibNum, heure);
    resultDiv.className = "result-div";
    resultsContainer.appendChild (resultDiv);
    worker.terminate () // cette ligne termine le worker
  };
}); 
 Nous avons apporté deux modifications.
 Nous avons déplacé cette ligne  const worker = new window.Worker ("src / fib-worker.js")  dans le gestionnaire d'événements de clic du bouton. [19659008] Nous avons ajouté cette ligne  worker.terminate ()  pour rejeter le worker une fois que nous en avons terminé avec lui.
 Donc, à chaque clic du bouton, nous créons un nouveau worker pour gérer le calcul. Ainsi, nous pouvons continuer à modifier l'entrée, et chaque résultat apparaîtra à l'écran une fois le calcul terminé. Dans la capture d'écran ci-dessous, vous pouvez voir que les valeurs de 20 et 30 apparaissent avant celle de 45. Mais j'ai commencé 45 en premier. Une fois que la fonction retourne pour 20 et 30, leurs résultats ont été affichés et le travailleur a été licencié. Lorsque tout est terminé, nous ne devrions pas avoir de travailleurs dans l’onglet sources.
 Nous pourrions terminer cet article ici, mais s'il s'agissait d'une application de réaction, comment y intégrerions-nous les travailleurs Web. C'est l'objet de la section suivante.
 Web Workers In React
 Pour commencer, créez une nouvelle application de réaction en utilisant CRA. Copiez le fichier  fib-worker.js  dans le dossier  public /  de votre application react. Mettre le fichier ici découle du fait que les applications React sont des applications d'une seule page. C’est à peu près la seule chose qui est spécifique à l’utilisation du nœud de calcul dans une application de réaction. Tout ce qui en découle est purement React.
 Dans le dossier  src / créez un fichier  helpers.js  et exportez la fonction  ordinal_suffix ()  à partir de celui-ci.
 // src / helpers.js

export const ordinal_suffix = (num) => {
  // 1er, 2ème, 3ème, 4ème, etc.
  const j = num% 10;
  const k = num% 100;
  commutateur (vrai) {
    cas j === 1 && k! == 11:
      retourne num + "st";
    cas j === 2 && k! == 12:
      retourne num + "nd";
    cas j === 3 && k! == 13:
      retourne num + "rd";
    défaut:
      retourne num + "th";
  }
}; 
 Notre application nous obligera à maintenir un état, alors créez un autre fichier,  src / reducer.js  et collez-le dans le réducteur d'état.
 // src / reducers.js

export const reducer = (état = {}, action) => {
  commutateur (action.type) {
    case "SET_ERROR":
      return {... état, err: action.err};
    case "SET_NUMBER":
      return {... état, num: action.num};
    cas "SET_FIBO":
      revenir {
        ...Etat,
        computedFibs: [
          ...state.computedFibs,
          { id: action.id, nth: action.nth, loading: action.loading },
        ],
      };
    case "UPDATE_FIBO": {
      const curr = state.computedFibs.filter ((c) => c.id === action.id) [0];
      const idx = state.computedFibs.indexOf (curr);
      curr.loading = faux;
      curr.time = heure.action;
      curr.fibNum = action.fibNum;
      state.computedFibs [idx] = curr;
      return {... état};
    }
    défaut:
      état de retour;
  }
}; 
 Passons en revue chaque type d'action l'un après l'autre.
  SET_ERROR : définit un état d'erreur lorsqu'il est déclenché.
  SET_NUMBER : définit la valeur dans notre
  SET_FIBO : ajoute une nouvelle entrée au tableau des FN calculés.
  UPDATE_FIBO : ici nous cherchons une entrée particulière et la remplaçons par un nouvel objet qui a le FN calculé et le temps nécessaire pour le calculer.
 Nous utiliserons ce réducteur sous peu. Avant cela, créons le composant qui affichera les FN calculés. Créez un nouveau fichier  src / Results.js  et collez le code ci-dessous.
 // src / Results.js

importer React depuis "react";

export const Résultats = (accessoires) => {
  const {résultats} = accessoires;
  revenir (
    

      {results.map ((fb) => {
        const {id, nth, time, fibNum, loading} = fb;
        revenir (
          

            {chargement ? (
              

                Calcul du {""}
                
                  {nth}
                 {""}
                Numéro de Fibonacci ...
              
            ): (
              <>
                

                  Heure:  {time} ms 
                
                

                  
                     {nth}
                   {""}
                  numéro de fibonnaci: {""}
                  
                    {fibNum}
                  
                
              >
            )}
          
        );
      })}
    
  );
}; 
 Avec cette modification, nous commençons le processus de conversion de notre précédent fichier index.html en jsx. Ce fichier a une responsabilité: prendre un tableau d'objets représentant les FN calculés et les afficher. La seule différence par rapport à ce que nous avions auparavant est l'introduction d'un état de chargement  . Alors maintenant, lorsque le calcul est en cours d'exécution, nous montrons l'état de chargement pour informer l'utilisateur que quelque chose se passe.
 Insérons les derniers éléments en mettant à jour le code dans  src / App.js . Le code est assez long, nous allons donc le faire en deux étapes. Ajoutons le premier bloc de code.
 import React de "react";
import "./App.css";
import {ordinal_suffix} depuis "./helpers";
importer {reducer} depuis './reducer'
importer {Résultats} de "./Results";
function App () {
  const [info, dispatch] = React.useReducer (réducteur, {
    err: "",
    num: "",
    computedFibs: [],
  });
  const runWorker = (num, id) => {
    dispatch ({type: "SET_ERROR", err: ""});
    const worker = nouvelle fenêtre.Worker ('./ fib-worker.js')
    worker.postMessage ({num});
    worker.onerror = (err) => err;
    worker.onmessage = (e) => {
      const {time, fibNum} = e.data;
      envoi({
        tapez: "UPDATE_FIBO",
        id,
        temps,
        fibNum,
      });
      worker.terminate ();
    };
  };
  revenir (
    

      

        
 Calcul du nième numéro de Fibonnaci 
      
      

        

           {info.err}
        

        // ... le prochain bloc de code va ici ... //

        
      
    
  );
}
Export default App; 
 Comme d'habitude, nous apportons nos importations. Ensuite, nous instancions une fonction d'état et de mise à jour avec le hook  useReducer . Nous définissons ensuite une fonction,  runWorker () qui prend un numéro et un ID et se met à appeler un web worker pour calculer le FN pour ce nombre.
 Notez que pour créer le worker, nous passons un chemin relatif vers le constructeur de travail. Lors de l'exécution, notre code React est attaché au fichier  public / index.html ainsi il peut trouver le fichier  fib-worker.js  dans le même répertoire. Lorsque le calcul est terminé (déclenché par  worker.onmessage ), l'action  UPDATE_FIBO  est envoyée et le travailleur est arrêté par la suite. Ce que nous avons maintenant n'est pas très différent de ce que nous avions auparavant.
 Dans le bloc de retour de ce composant, nous rendons le même HTML que nous avions auparavant. Nous transmettons également le tableau de nombres calculés au composant  pour le rendu.
 Ajoutons le dernier bloc de code dans l'instruction  return .
 

          
              envoi({
                tapez: "SET_NUMBER",
                num: window.Number (e.target.value),
              })
            }
          />
           {
              if (info.num 
            Calculer
          
        
 
 Nous avons défini un gestionnaire  onChange  sur l'entrée pour mettre à jour la variable d'état  info.num . Sur le bouton, nous définissons un gestionnaire d'événements  onClick . Lorsque le bouton est cliqué, nous vérifions si le nombre est supérieur à 2. Notez qu'avant d'appeler  runWorker () nous envoyons d'abord une action pour ajouter une entrée au tableau des FN calculés. C'est cette entrée qui sera mise à jour une fois que le travailleur aura terminé son travail. De cette façon, chaque entrée conserve sa position dans la liste, contrairement à ce que nous avions auparavant.
 Enfin, copiez le contenu de  styles.css  d'avant et remplacez le contenu de  App.css .
 Nous avons maintenant tout en place. Maintenant, démarrez votre serveur de réaction et jouez avec quelques chiffres. Prenez note de l'état de chargement, qui est une amélioration UX. Notez également que l'interface utilisateur reste réactive même lorsque vous entrez un nombre aussi élevé que 1000 et cliquez sur «Calculer».
 Notez l'état de chargement et le travailleur actif. Une fois que la 46ème valeur est calculée, l'ouvrier est tué et l'état de chargement est remplacé par le résultat final.
 Conclusion
 Ouf! Le trajet a été long, alors terminons-le. Je vous encourage à jeter un œil à l'entrée MDN pour les web workers (voir la liste des ressources ci-dessous) pour découvrir d'autres façons d'utiliser les web workers.
 Dans cet article, nous avons appris ce que sont les web workers et le type de problèmes qu'ils rencontrent. re destiné à résoudre. Nous avons également vu comment les implémenter en utilisant du JavaScript brut. Enfin, nous avons vu comment implémenter des web workers dans une application React.
 Je vous encourage à profiter de cette excellente API pour offrir une meilleure expérience à vos utilisateurs.
 Autres ressources
 Console.time () [19659023]documents Web MDN 
  {JSON} Placeholder site Web officiel
  Using Web Workers documents Web MDN
  Numéro Fibonacci Wikipedia
  Opérateur conditionnel (ternaire) documents Web MDN
   Document API Web, documents Web MDN
  Mise en route  , Create React App (docs)
   Function.prototype.toString () MDN Web Docs
  IIFE MDN Web Docs
   workerSetup.js Superbes didacticiels Fullstack, GitHub
 « Programmation parallèle en JavaScript à l'aide de Web Workers ,» Uday Hiwarale, moyen
 (ks, ra, yk, il) 
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
 
   
 
Source link 
Partager :
Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)