Vous écrivez JavaScript et réalisez soudainement avec horreur et crainte que vous avez écrit une énorme fonction. C’est arrivé aux meilleurs d’entre nous. Vient maintenant l’envie presque imparable de séparer la fonction en petits morceaux.
Les grandes fonctions signifient beaucoup de responsabilités au même endroit et, éventuellement, une odeur de code aussi, c’est donc une bonne idée en soi. Mais vous voulez diviser la fonction de telle sorte qu’elle ne perde pas son sens ou son contexte. Pour ce faire, vous devez penser au chaînage de méthodes – également appelé chaînage de fonctions. Cet article expliquera ce que je veux dire par là.
Prérequis
Avant de commencer, voici quelques concepts JavaScript que vous devez déjà connaître:
- Fonctions de flèche
- Méthodes de tableau
- Fonctions asynchrones
Les développeurs les plus expérimentés auront une certaine expérience avec les méthodes Array, telles que map, reduce et filter. Vous avez probablement déjà rencontré quelque chose comme ça:
const food = ;// This type of usage is very commonfood .map(item => item.type) .reduce((result, fruit) => { result.push(fruit); return ; }, );// result: Le chaînage de méthodes se produit lorsque vous souhaitez appeler plusieurs fonctions en utilisant le même objet et sa référence. Dans l’exemple ci-dessus, la méthode de tableau map renvoie un Array, qui a un nombre formidable de méthodes.
Parce que vous renvoyez une référence pointant vers un Array, vous aurez accès à toutes les propriétés de Array. C’est le même principe que vous utilisez pour votre propre enchaînement de méthodes.
Mieux comprendre cela
Je ne couvrirai pas toutes les nuances de this, mais il est bon de comprendre pourquoi this fonctionne comme il le fait. Peu importe votre expérience, le mot-clé cela peut être difficile à comprendre. C’est souvent la raison pour laquelle les choses ne fonctionnent pas comme vous l’attendez 😅.
Voici l’essentiel: this pointera toujours vers la scope ou l’instance actuelle d’où il est appelé. Un exemple:
const dog = { is: null, log: () => console.log(this.is), bark() { this.is = "woofing"; this.log(); return this; }, walk() { this.is = "walking"; this.log(); return this; }, eat() { this.is = "eating"; this.log(); return this; }};dog .bark() .eat() .walk(); Lorsque vous écrivez une fonction comme celle-ci (sans jeu de mots), vous voudrez peut-être enchaîner des méthodes liées à l’objet. L’objet dog a 3 méthodes : walk, bark et eat. Chaque fois que j’appelle l’une de ses fonctions, une console devrait montrer la représentation de ce que le chien fait à ce moment précis.
Mais il y a un problème avec cela. Si vous l’exécutez dans le navigateur, vous vous rendrez compte qu’il ne fonctionne pas comme prévu. En effet, les fonctions de flèche utilisent la portée lexicale, où this fait référence à sa portée environnante – dans ce cas window, pas à l’objet lui-même.
Pour résoudre cela, nous devons utiliser un appel de fonction anonyme pour représenter la propriété log:
// instead of this: log: () => console.log(this.is),// use this: log() { console.log(this.is); } Maintenant, la portée this du chien va être accessible à l’intérieur de la fonction.
En utilisant la classe
Vous pouvez obtenir le même résultat en utilisant des classes:
class Dog { is = null; log() { console.log(this.is); } bark() { this.is = "woofing"; this.log(); return this; } walk() { this.is = "walking"; this.log(); return this; } eat() { this.is = "eating"; this.log(); return this; }}const dog = new Dog();dog .bark() .eat() .walk();Utiliser Prototype
Si vous devez utiliser prototype, procédez de cette façon:
function Dog() {}Dog.prototype.is = null;Dog.prototype.log = function() { console.log(this.is);};Dog.prototype.bark = function() { this.is = "woofing"; this.log(); return this;};Dog.prototype.walk = function() { this.is = "walking"; this.log(); return this;};Dog.prototype.eat = function() { this.is = "eating"; this.log(); return this;};const dog = new Dog();dog .bark() .eat() .walk();Qu’En Est-Il Des Fonctions Asynchrones?
async les fonctions sont du sucre synthétique pour les promesses et les générateurs. Lorsque vous déclarez une fonction async, vous savez qu’elle retournera une promesse. Pour cette raison, vous aurez également accès à toutes les méthodes de la promesse.
const requests = { user: null, action: null, log(something) { console.log(this); }, async getUser() { this.user = await new Promise(resolve => { setTimeout(() => { resolve("Douglas Pires"); }, 1000); }); this.log("user"); return this; }, async registerAction() { this.action = await new Promise(resolve => { setTimeout(() => { resolve("programming stuff"); }, 1000); }); this.log("action"); return this; }};requests.getUser().then(() => requests.registerAction()); Cependant, ce n’est pas une bonne idée d’enchaîner un tas de promesses ensemble. Je recommande d’utiliser un tas de mots clés await à la place. C’est plus facile et cela rendra votre code beaucoup plus lisible.
await requests.getUser(); // Douglas Piresawait requests.registerAction(); // programmingEt vous aurez accès aux mêmes propriétés ici:
console.log(requests.user); // Douglas Piresconsole.log(requests.action); // programmingEn conclusion
Les fonctions de chaînage sont utiles lorsque vous devez manipuler un objet. C’est aussi un moyen pratique d’améliorer la lisibilité de votre code. Cependant, comme vous l’avez vu ci-dessus, vous devez enchaîner judicieusement.
Dans cet article, nous avons parlé des fonctions this, des classes, des prototypes et async dans le contexte du chaînage de méthodes JavaScript. J’espère que vous avez pris quelques conseils utiles et que vous êtes maintenant mieux informé sur le sujet. Vous pouvez trouver mon référentiel avec tout le code sur le chaînage de méthodes JavaScript ici. Rendez-vous dans le prochain post !
Vous avez aimé lire cet article? N’hésitez pas à partager sur les réseaux sociaux en utilisant les boutons ci-dessous. Alternativement, j’ai également écrit sur la façon dont vous pouvez créer un générateur de palette de couleurs en utilisant Nuxt et Vuetify. Allez voir!
