15 techniques avancées JavaScript que chaque développeur devrait connaître
- 552
- 119
- Thomas Richard
JavaScript est un langage de programmation polyvalent et puissant qui a été largement utilisé dans le développement d'applications Web. En tant que développeur, il est essentiel d'avoir une solide compréhension des capacités et des techniques avancées de la langue pour créer des applications Web robustes, efficaces et évolutives.
Voici 15 techniques avancées JavaScript que chaque développeur devrait connaître.
1. Fermetures
La fermeture est une technique puissante en JavaScript qui vous permet de créer des fonctions avec un état persistant. Essentiellement, une fermeture est une fonction qui «se souvient» de l'environnement dans lequel il a été créé. Cela peut être utile pour créer des variables privées, ainsi que pour créer des fonctions qui peuvent être utilisées pour générer d'autres fonctions.
Par exemple:
fonction compter () let count = 0; return function () return ++ count; const c = compter (); console.log (c ()); // 1 console.log (c ()); // 2 console.log (c ()); // 3| 1234567891011 | fonction compter () let count = 0; return function () return ++ count; const c = compter (); console.log (c ()); // 1Console.log (c ()); // 2Console.log (c ()); // 3 |
Dans l'exemple ci-dessus, la fonction de compteur renvoie une fonction qui a accès à la variable de comptage dans sa portée extérieure. Chaque fois que la fonction renvoyée est appelée, il incrémente la variable de comptage et renvoie sa valeur.
2. Curry
Le curry est une technique dans laquelle une fonction avec plusieurs arguments est transformée en une série de fonctions qui prennent chacune un seul argument. Cela peut être utile pour créer un code plus modulaire, ainsi que pour créer des fonctions qui peuvent être réutilisées dans différents contextes.
Par exemple:
fonction add (a, b) return a + b; fonction curryAdd (a) return function (b) return add (a, b); const add5 = curryAdd (5); console.log (add5 (10)); // 15| 123456789101112 | fonction add (a, b) return a + b; fonction curryAdd (a) return function (b) return add (a, b); const add5 = curryadd (5); console.log (add5 (10)); // 15 |
Dans l'exemple ci-dessus, la fonction ADD est transformée en une fonction au curry à l'aide de la fonction CurryAdd. La fonction CurryAdd prend le premier argument A et renvoie une nouvelle fonction qui prend le deuxième argument B et appelle la fonction d'ajout originale avec les deux arguments.
3. Mémorisation
La mémoire est une technique pour optimiser les performances des fonctions en mettant en cache les résultats de calculs coûteux. Cela peut être utile pour les fonctions qui sont appelées fréquemment ou qui mettent beaucoup de temps à fonctionner.
Par exemple:
fonction fibonacci (n) if (n <= 1) return n; return fibonacci(n - 1) + fibonacci(n - 2); function memoize(func) const cache = ; return function(… args) const key = JSON.stringify(args); if (cache[key]) return cache[key]; const result = func.apply(this, args); cache[key] = result; return result; const memoizedFibonacci = memoize(fibonacci); console.log(memoizedFibonacci(10)); // 55| 12345678910111213141516171819202122 | fonction fibonacci (n) if (n <= 1) return n; return fibonacci(n - 1) + fibonacci(n - 2); function memoize(func) const cache = ; return function(...args) const key = JSON.stringify(args); if (cache[key]) return cache[key]; const result = func.apply(this, args); cache[key] = result; return result; const memoizedFibonacci = memoize(fibonacci);console.log(memoizedFibonacci(10)); // 55 |
Dans l'exemple ci-dessus, la fonction Memoize prend une fonction Func et renvoie une nouvelle fonction qui cache le résultat de l'appel de fonction d'origine en fonction de ses paramètres d'entrée. La prochaine fois que la fonction sera appelée avec les mêmes paramètres d'entrée, il renvoie le résultat mis en cache au lieu d'exécuter la fonction d'origine.
4. Étranglement
La limitation est une technique où une fonction est exécutée au plus une fois dans un intervalle de temps spécifié. Cela peut aider à limiter le nombre de fois qu'une fonction est appelée et améliorer les performances de votre application.
Par exemple:
Fonction Throttle (func, retard) let lastCall = 0; Fonction de retour (… args) const Now = new Date ().obtenir du temps(); Si (maintenant - LastCall < delay) return; lastCall = now; func.apply(this, args); window.addEventListener('scroll', throttle(function() console.log('scrolling'); , 100));| 123456789101112131415 | Fonction Throttle (func, retard) let lastCall = 0; Fonction de retour (...args) const now = new Date ().obtenir du temps(); Si (maintenant - LastCall < delay) return; lastCall = now; func.apply(this, args); window.addEventListener('scroll', throttle(function() console.log('scrolling');, 100)); |
Dans l'exemple ci-dessus, la fonction de papillon prend une fonction FUNC et un délai d'intervalle de temps comme arguments et renvoie une nouvelle fonction qui exécute Func au plus une fois par retard en millisecondes.
Dans l'exemple ci-dessus, l'écouteur d'événements de défilement est enveloppé d'une fonction de gaz qui limite le nombre de fois la console.L'instruction log («défilement») est exécutée lors du défilement.
5. Débouchant
Le débouchement est une technique où une fonction est retardée jusqu'à ce qu'un intervalle de temps spécifié se soit écoulé après la dernière invocation. Cela peut aider à réduire le nombre de fois qu'une fonction est appelée et améliorer les performances de votre application.
Par exemple:
Fonction Debounce (func, retard) LET TIMERID; return function (… args) if (timerid) cleartimeout (timerid); timerid = setTimeout (() => func.s'appliquer (ceci, args); timerid = null; , retard); fenêtre.addEventListener ('redimensi', déboucher (function () console.log («redimensionner»); , 500));| 12345678910111213141516 | Fonction Debounce (func, retard) LET TIMERID; Fonction de retour (...args) if (timerid) cleartimeout (timerid); timerid = setTimeout (() => func.s'appliquer (ceci, args); timerid = null; , retard); fenêtre.addEventListener ('redimensi', déboucher (function () console.log («redimensionner»);, 500)); |
Dans l'exemple ci-dessus, la fonction de débouçage prend une fonction Func et un délai d'intervalle de temps comme arguments et renvoie une nouvelle fonction qui retarde l'exécution de Func jusqu'à ce que des millisecondes de retard se soient écoulées depuis la dernière invocation.
Dans l'exemple ci-dessus, l'auditeur d'événements de redimensionnel est enveloppé d'une fonction de débouchement qui limite le nombre de fois la console.L'instruction log («redimensionner») est exécutée lors de la redimensionnement de la fenêtre.
6. Promesses
Les promesses sont un moyen de gérer le code asynchrone en javascript. Ils sont essentiellement un espace réservé pour une valeur qui ne sera peut-être pas encore disponible, mais sera à l'avenir. Les promesses peuvent être utilisées pour s'assurer que certains code ne fonctionnent qu'après l'exécution d'un autre code, et ils peuvent également être utilisés pour gérer les erreurs de manière plus élégante que la gestion traditionnelle des erreurs.
Par exemple:
fonction fetchData () return new promest ((résoudre, rejeter) => fetch ('https: // exemple.com / data ') .alors (réponse => réponse.JSON ()) .alors (data => résoudre (données)) .catch (error => rejeter (error)); ); fetchData () .alors (data => console.journal (données)) .Catch (erreur => console.erreur (erreur));| 123456789101112 | fonction fetchData () return new promest ((résoudre, rejeter) => fetch ('https: // exemple.com / data ') .alors (réponse => réponse.JSON ()) .alors (data => résoudre (données)) .catch (error => rejeter (error)); ); fetchData () .alors (data => console.journal (données)) .Catch (erreur => console.erreur (erreur)); |
Dans l'exemple ci-dessus, la fonction FetchData renvoie une promesse qui se résout avec les données récupérées à partir de https: // exemple.com / données. La promesse est ensuite consommée en utilisant les méthodes d'alors et de capture pour gérer les données résolues et toutes les erreurs qui se produisent.
7. Asynchrone / attendre
Async / Await est un sucre syntaxtique au-dessus des promesses qui vous permet d'écrire du code asynchrone qui ressemble à un code synchrone. Cela peut rendre le code asynchrone plus lisible et plus facile à entretenir.
Par exemple:
fonction async fetchData () try const const ° réponse = attendre fetch ('https: // exemple.com / data '); const Data = attendre la réponse.JSON (); retourner les données; catch (error) lancez une nouvelle erreur (erreur); fetchData () .alors (data => console.journal (données)) .Catch (erreur => console.erreur (erreur));| 12345678910111213 | fonction async fetchData () try const const ° réponse = attendre fetch ('https: // exemple.com / data '); const Data = attendre la réponse.JSON (); retourner les données; catch (error) lancez une nouvelle erreur (erreur); fetchData () .alors (data => console.journal (données)) .Catch (erreur => console.erreur (erreur)); |
Dans l'exemple ci-dessus, la fonction FetchData est déclarée avec le mot-clé async et utilise le mot-clé Await pour attendre la valeur résolue des promesses renvoyées par la fetch et la réponse.Méthodes JSON. Toutes les erreurs sont capturées à l'aide d'un bloc d'essai / catch.
8. Générateurs
Les générateurs sont une fonctionnalité puissante en JavaScript qui vous permet de faire une pause et de reprendre l'exécution d'une fonction, tout en maintenant son état interne. Cela peut être utile pour une variété d'applications, de la programmation asynchrone pour construire des itérateurs.
Voici un exemple de la façon dont vous pourriez utiliser un générateur pour construire un itérateur qui génère une séquence infinie de numéros de Fibonacci:
fonction * fibonacci () let [prev, curr] = [0, 1]; tandis que (true) rendement curr; [prev, curr] = [curr, prev + curr]; const fib = fibonacci (); console.journal (fib.suivant().valeur); // Console des journaux 1.journal (fib.suivant().valeur); // Console des journaux 1.journal (fib.suivant().valeur); // Console des journaux 2.journal (fib.suivant().valeur); // Console Logs 3.journal (fib.suivant().valeur); // Logs 5| 123456789101112131415 | fonction * fibonacci () let [prev, curr] = [0, 1]; tandis que (true) rendement curr; [prev, curr] = [curr, prev + curr]; const fib = fibonacci (); console.journal (fib.suivant().valeur); // Logs 1Console.journal (fib.suivant().valeur); // Logs 1Console.journal (fib.suivant().valeur); // Journaux 2Console.journal (fib.suivant().valeur); // Logs 3Console.journal (fib.suivant().valeur); // Logs 5 |
Dans cet exemple, la fonction Fibonacci est déclarée comme une fonction de générateur en utilisant la syntaxe de fonction *. La fonction utilise une boucle while pour générer une séquence infinie de nombres de Fibonacci, qui sont cédés à un moment à l'aide du mot clé de rendement. La variable FIB est ensuite initialisée comme un objet Iterator en utilisant la fonction fibonacci (), et chaque appel ultérieur à la méthode suivante () génère le numéro suivant dans la séquence.
9. Opérateur de propagation
L'opérateur de diffusion, désigné par trois points (…), est une fonctionnalité puissante en JavaScript qui vous permet d'étendre un objet itérable (comme un tableau ou une chaîne) en éléments individuels. Cela peut être utilisé pour simplifier et rationaliser votre code de plusieurs façons.
Voici un exemple de la façon dont vous pourriez utiliser l'opérateur de propagation pour concaténer deux tableaux:
const Arr1 = [1, 2, 3]; const Arr2 = [4, 5, 6]; const Arr3 = [… arr1,… arr2]; console.log (arr3); // Logs [1, 2, 3, 4, 5, 6]| 12345 | const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const Arr3 = [...Arr1, ...arr2]; console.log (arr3); // Logs [1, 2, 3, 4, 5, 6] |
Dans cet exemple, l'opérateur de diffusion est utilisé pour concaténer ARR1 et ARR2 dans un nouveau tableau Arr3. La syntaxe… ARR1 étend le tableau ARR1 en éléments individuels, qui sont ensuite concaténés avec la syntaxe… ARR2.
dix. Fonctions d'ordre supérieur
Une fonction d'ordre supérieur est une fonction qui prend une autre fonction comme un argument ou renvoie une fonction en conséquence. Cela peut être utile pour créer un code réutilisable qui peut être personnalisé pour s'adapter à différents cas d'utilisation.
fonction multiplyby (facteur) return function (nombre) return numéro * facteur; ; const double = multiplyby (2); const triple = multiplyby (3); console.journal (double (5)); // Console des journaux 10.Log (triple (5)); // Logs 15| 1234567891011 | fonction multiplyby (facteur) return function (nombre) return numéro * facteur; ; const double = multiplyby (2); const triple = multiplyby (3); console.journal (double (5)); // Journaux 10Console.Log (triple (5)); // Logs 15 |
Dans cet exemple, la fonction multiplyby renvoie une autre fonction qui multiplie un nombre donné par un facteur spécifié. La fonction renvoyée peut être utilisée pour créer d'autres fonctions qui se multiplient par différents facteurs.
11. Destructeur
La destructeur est un moyen d'extraire les valeurs des objets ou des tableaux de manière plus concise. Cela peut être particulièrement utile lorsque vous traitez des structures de données complexes, car elle vous permet d'extraire rapidement et facilement les valeurs dont vous avez besoin.
const Person = name: 'John', Âge: 30, adresse: Street: '123 Main st', ville: 'Anytown', État: 'Ca', zip: '12345'; const nom, âge, adresse: city = personne; console.log (nom); // Console «John».journal (âge); // console 30.journal (ville); // 'Anywown'| 12345678910111213141516 | const Person = name: 'John', Âge: 30, adresse: Street: '123 Main st', ville: 'Anytown', État: 'Ca', zip: '12345'; const nom, âge, adresse: city = personne; console.log (nom); // 'John'console.journal (âge); // 30Console.journal (ville); // 'Anywown' |
Dans cet exemple, nous détruisons l'objet de la personne pour extraire le nom, l'âge et les propriétés de la ville et les attribuer à des variables.
12. Délégation d'événements
La délégation d'événements est une technique pour gérer les événements dans lesquels un seul gestionnaire d'événements est attaché à un élément parent, plutôt qu'à chaque élément enfant individuel. Cela peut être utile pour améliorer les performances de la gestion des événements, ainsi que pour la gestion des événements sur du contenu généré dynamiquement.
- Objet 1
- Article 2
- Article 3
| 123456789101112131415 |
|
Dans cet exemple, nous attachons un écouteur d'événement de clic à l'élément UL, puis en utilisons l'événement.propriété cible pour déterminer quel élément Li a été cliqué. Ceci est utile pour gérer les événements sur un contenu dynamique qui peut être ajouté ou supprimé de la page.
13. Utilisation du support bouclé
En JavaScript, les supports bouclés sont utilisés pour délimiter les blocs de code. Cependant, ils peuvent également être utilisés d'une manière plus concise pour créer des objets ou de détruire les objets. Cela peut être particulièrement utile lorsque vous travaillez avec des structures de données complexes.
fonction myFunction () const x = 1; const y = 2; si (x < y) console.log('x is less than y'); else console.log('x is greater than or equal to y');| 12345678910 | fonction myFunction () const x = 1; const y = 2; si (x < y) console.log('x is less than y'); else console.log('x is greater than or equal to y'); |
Dans cet exemple, nous utilisons des supports bouclés pour définir le corps de la fonction de myfonctionnement et l'instruction if.
14. Modules javascript
Les modules JavaScript sont un moyen d'organiser le code en unités réutilisables et autonomes. Ils peuvent être utilisés pour encapsuler les fonctionnalités et créer un code plus maintenable.
// module 1.JS Fonction d'exportation add (a, b) return a + b; // module2.js import add de './module 1.JS '; const sum = add (2, 3); console.log (sum); // 5| 1234567891011 | // module 1.Fonction jSExport Add (a, b) return a + b; // module2.JSIMPORT add de './module 1.JS '; const sum = add (2, 3); console.log (sum); // 5 |
Dans cet exemple, nous exportons la fonction ADD à partir du module1.js puis l'importer dans le module2.js en utilisant l'instruction IMPORT. Cela nous permet de réutiliser la fonction ADD dans différentes parties de notre code.
15. Fonctions flèches
Les fonctions de flèche sont un moyen concis de définir les fonctions en javascript. Ils sont particulièrement utiles pour créer des fonctions anonymes, ainsi que pour créer des fonctions qui prennent un seul argument.
Nombres const = [1, 2, 3, 4, 5]; const mènenumbers = nombres.filtre (num => num% 2 === 0); console.journal (uniformes); // [2, 4]| 12345 | Nombres const = [1, 2, 3, 4, 5]; const mènenumbers = nombres.filtre (num => num% 2 === 0); console.journal (uniformes); // [2, 4] |
Dans cet exemple, nous utilisons une fonction Arrow pour filtrer le tableau des nombres et retourner uniquement les nombres pair. La syntaxe de la fonction Arrow est plus courte et plus concise que la syntaxe de fonction traditionnelle.
Conclusion
En conclusion, ces 15 techniques avancées JavaScript sont essentielles pour que tout développeur cherche à faire passer ses compétences au niveau supérieur. Que vous travailliez sur un petit projet ou une grande application, ces techniques peuvent vous aider à écrire un code plus efficace et maintenable. Alors, commencez à pratiquer et voyez comment ces techniques peuvent vous aider à faire passer vos compétences en JavaScript au niveau supérieur!