Maison >interface Web >js tutoriel >Composition de la fonction: blocs de construction du code maintenable

Composition de la fonction: blocs de construction du code maintenable

Christopher Nolan
Christopher Nolanoriginal
2025-02-17 11:19:09748parcourir

Function Composition: Building Blocks for Maintainable Code

combinaison de fonctions javascript: construire un code plus maintenable

La composition de la fonction JavaScript est une technique de combinaison de plusieurs fonctions simples en une seule fonction plus complexe qui effectue des opérations de sous-fonction sur une donnée donnée dans un ordre logique. L'ordre dans lequel les fonctions sont appliquées produit des résultats différents.

Pour écrire du code maintenable, il est crucial de comprendre le type de retour de chaque fonction combinée pour s'assurer que la fonction suivante peut le gérer correctement. JavaScript n'empêche pas la combinaison de retourner les fonctions de types inappropriés, donc cette partie de la responsabilité incombe au programmeur.

Pour ceux qui ne connaissent pas le paradigme de programmation fonctionnelle, la combinaison de fonctions peut rendre le code compliqué. Cependant, avec l'avènement de la syntaxe ES2015, en utilisant des fonctions flèches, il est possible de créer des fonctions de combinaison simples dans une ligne de code sans avoir besoin de méthodes de combinaison spéciales.

Les fonctions combinées doivent être des fonctions pures, ce qui signifie que chaque fois qu'une valeur spécifique est transmise à une fonction, la fonction doit renvoyer le même résultat et que la fonction ne doit pas avoir d'effets secondaires de la modification de ses propres valeurs externes. Cela produira un code plus propre et plus lisible.

Cet article a été examiné par Jeff Mott, Dan Prince et Sebastian Seitz. Merci à tous les pair de sitepoint pour avoir obtenu le contenu de sitepoint à son meilleur!

Function Composition: Building Blocks for Maintainable Code

L'un des avantages de la pensée fonctionnelle est la capacité de créer des fonctions complexes en utilisant de petites fonctions uniques et faciles à comprendre. Mais parfois, cela nécessite de penser au problème en sens inverse, pas positivement, afin de comprendre comment créer la solution la plus élégante. Dans cet article, je vais adopter une approche étape par étape pour vérifier la combinaison des fonctions en JavaScript et démontrer comment elle produit du code plus facile à comprendre et qui a moins d'erreurs.

fonctions imbriquées

La composition est une technique qui vous permet de combiner deux ou plusieurs fonctions simples dans une fonction plus complexe qui exécute chaque sous-fonction sur toutes les données transmises dans l'ordre logique. Pour obtenir ce résultat, vous devez nicher une fonction dans une autre et répéter les opérations de la fonction externe sur le résultat de la fonction interne jusqu'à ce que le résultat soit produit. Et les résultats peuvent varier en fonction de l'ordre dans lequel la fonction est appliquée. Cela peut être facilement démontré en utilisant des techniques de programmation que nous connaissons déjà en JavaScript en passant un appel de fonction comme paramètre à une autre fonction:

<code class="language-javascript">function addOne(x) {
  return x + 1;
}
function timesTwo(x) {
  return x * 2;
}
console.log(addOne(timesTwo(3))); //7
console.log(timesTwo(addOne(3))); //8</code>

Dans ce cas, nous définissons une fonction addOne () pour ajouter 1 à une valeur, et une fonction timestwo () pour multiplier une valeur par 2. En passant les résultats d'une fonction comme un argument à un autre, nous pouvons voir comment les nicher l'un d'eux dans l'autre produit des résultats différents, même si les valeurs initiales sont les mêmes. La fonction intérieure est en premier exécutée et le résultat est transmis à la fonction extérieure.

combinaison impérative

Si vous souhaitez répéter la même séquence d'opérations, il peut être pratique de définir une nouvelle fonction pour appliquer automatiquement la première et deuxième fonction. Cela pourrait ressembler à ceci:

<code class="language-javascript">function addOne(x) {
  return x + 1;
}
function timesTwo(x) {
  return x * 2;
}
console.log(addOne(timesTwo(3))); //7
console.log(timesTwo(addOne(3))); //8</code>

Dans ce cas, nous combinons manuellement les deux fonctions ensemble dans un ordre spécifique. Nous créons une nouvelle fonction qui attribue d'abord la valeur passée à la variable Holder, puis met à jour la valeur de cette variable en exécutant la première fonction, suivie de la deuxième fonction, et renvoie enfin la valeur de ce support. (Notez que nous utilisons une variable appelée Holder pour maintenir temporairement la valeur que nous avons transmise. Pour une fonction aussi simple, les variables locales supplémentaires semblent redondantes, mais même en JavaScript impératif, les arguments de la fonction seront adoptés en elle également un Bonne habitude de traiter les valeurs comme des constantes. Au contraire de l'ordre d'appliquer ces deux fonctions plus petites, nous pouvons effectuer ce qui suit:

<code class="language-javascript">// ...来自上面的先前函数定义
function addOneTimesTwo(x) {
  var holder = x;
  holder = addOne(holder);
  holder = timesTwo(holder);
  return holder;
}
console.log(addOneTimesTwo(3)); //8
console.log(addOneTimesTwo(4)); //10</code>

Bien sûr, ce code commence à être très répétitif. Nos deux nouvelles fonctions combinées sont presque identiques, sauf que les deux fonctions plus petites qu'ils appellent ont des ordres d'exécution différents. Nous devons le simplifier (comme ne pas nous répéter). De plus, l'utilisation de variables temporaires qui modifient leur valeur comme celle-ci n'est pas très fonctionnelle, même si elle est cachée à l'intérieur de la fonction combinatoire que nous créons. Conclusion: nous pouvons faire mieux.

Créer des combinaisons fonctionnelles

Créons une fonction combinatoire qui prend les fonctions existantes et les combinait dans l'ordre que nous voulons. Afin de le faire de manière cohérente sans avoir à gérer les détails internes à chaque fois, nous devons décider de l'ordre dans lequel nous voulons passer les fonctions comme paramètres. Nous avons deux options. Les paramètres seront respectivement des fonctions qui peuvent être exécutées de gauche à droite ou de droite à gauche. Autrement dit, en utilisant la nouvelle fonction que nous avons proposée, Compose (Timestwo, AddOne) peut représenter Timestwo (addOne ()) pour lire les paramètres de droite à gauche, ou addone (timestwo ()) pour lire les paramètres de gauche à droite. L'avantage de l'exécution de paramètres de gauche à droite est qu'ils seront lus de la même manière en anglais, ce qui est très similaire à la façon dont nous avons nommé la fonction combinée TimestwoAddone () pour impliquer que la multiplication devrait se produire avant l'addition. Nous connaissons tous l'importance de la dénomination logique pour un code concis et facile à lire. L'inconvénient de l'exécution des paramètres de gauche à droite est que la valeur à utiliser doit être placée à l'avant. Cependant, mettre la valeur à l'avant rend moins pratique de combiner les fonctions résultantes avec d'autres fonctions à l'avenir. Pour expliquer bien la pensée derrière cette logique, vous ne pouvez pas aller au-delà de la vidéo classique de Brian Lonsdorf Hey souligne, vous vous trompez. (Bien qu'il soit à noter que le soulignement a maintenant une option FP qui peut aider à résoudre le problème de programmation fonctionnelle dont Brian discute lors de l'utilisation de soulignements avec des bibliothèques de programmation fonctionnelle telles que Lodash-FP ou Ramda.) Quoi qu'il en soit, nous voulons vraiment ce que vous voulez faire est d'abord passer dans toutes les données de configuration, puis passer enfin la valeur sur laquelle vous souhaitez fonctionner. Par conséquent, il est très logique de définir nos fonctions combinées comme lisant leurs paramètres et les appliquant de droite à gauche. Nous pouvons donc créer une fonction de combinaison de base qui ressemble à ceci:

<code class="language-javascript">function addOne(x) {
  return x + 1;
}
function timesTwo(x) {
  return x * 2;
}
console.log(addOne(timesTwo(3))); //7
console.log(timesTwo(addOne(3))); //8</code>

En utilisant cette fonction de combinaison très simple, nous pouvons construire plus simplement nos deux fonctions complexes précédentes et voir le même résultat:

<code class="language-javascript">// ...来自上面的先前函数定义
function addOneTimesTwo(x) {
  var holder = x;
  holder = addOne(holder);
  holder = timesTwo(holder);
  return holder;
}
console.log(addOneTimesTwo(3)); //8
console.log(addOneTimesTwo(4)); //10</code>

Bien que cette fonction combinatoire simple fonctionne, elle ne tient pas compte de nombreux problèmes qui limitent sa flexibilité et son applicabilité. Par exemple, nous pourrions vouloir combiner plus de deux fonctions. De plus, nous perdons ces informations dans le processus. Nous pouvons résoudre ces problèmes, mais il n'est pas nécessaire de maîtriser le fonctionnement de la combinaison. Plutôt que de l'écrire vous-même, héritant d'une combinaison plus puissante à partir de bibliothèques fonctionnelles existantes telles que Ramda, par défaut, il prend en compte l'ordre des paramètres de droite à gauche.

Le type est votre responsabilité

Il est important de se rappeler qu'il est de la responsabilité du programmeur de connaître le type de retour de chaque fonction combinée afin que la fonction suivante puisse le gérer correctement. Contrairement aux langages de programmation fonctionnelle purs qui effectuent une vérification de type stricte, JavaScript ne vous empêche pas d'essayer de combiner des fonctions qui renvoient les valeurs de types inappropriés. Vous n'êtes pas limité à passer des nombres, mais pas à garder le même type de variable d'une fonction à l'autre. Mais vous êtes responsable de vous assurer que la fonction que vous combinez est prête à traiter toute valeur renvoyée par la fonction précédente.

Considérez votre public

N'oubliez pas toujours que les autres peuvent avoir besoin d'utiliser ou de modifier votre code à l'avenir. L'utilisation de combinaisons dans le code JavaScript traditionnel peut être compliquée pour ceux qui ne connaissent pas le paradigme de programmation fonctionnelle. L'objectif est d'être plus simple, plus facile à lire et à maintenir le code. Cependant, avec l'avènement de la syntaxe ES2015, il est même possible de créer des fonctions de combinaison simples comme appels à une seule ligne à l'aide de fonctions flèches sans avoir besoin de méthodes de combinaison spéciales:

<code class="language-javascript">function addOne(x) {
  return x + 1;
}
function timesTwo(x) {
  return x * 2;
}
console.log(addOne(timesTwo(3))); //7
console.log(timesTwo(addOne(3))); //8</code>

Commençons à combiner aujourd'hui

Comme avec toutes les techniques de programmation fonctionnelle, il est important de se rappeler que vos fonctions combinées devraient être des fonctions pures. En bref, cela signifie que chaque fois qu'une valeur spécifique est transmise à une fonction, la fonction doit renvoyer le même résultat et que la fonction ne doit pas avoir les effets secondaires de la modification de ses propres valeurs externes. La nidification combinée est très pratique lorsque vous avez un ensemble de fonctions connexes que vous souhaitez appliquer à vos données, et vous pouvez diviser les composants de cette fonction en fonctions réutilisables et faciles à combiner. Comme pour toutes les techniques de programmation fonctionnelle, je recommande d'ajouter la combinaison à votre code existant avec prudence pour vous familiariser avec lui. Si vous le faites correctement, le résultat sera plus propre, plus sec et plus facile à lire le code. N'est-ce pas ce que nous voulons tous?

(Ce qui suit est la FAQ, qui a été ajustée et rationalisée en fonction du texte d'origine, et les informations en double sont évitées)

Des questions fréquemment posées sur la combinaison de fonctions et le code maintenable

  • Qu'est-ce qu'une combinaison de fonctions dans la programmation? La combinaison de fonctions est le concept de combinaison de fonctions simples en fonctions plus complexes. Vous pouvez créer des fonctions complexes et puissantes avec ces petites fonctions réutilisables, tout comme les blocs de construction. Cela permet de rendre le code plus lisible, plus facile à maintenir et plus évolutif.

  • Comment la combinaison des fonctions favorise-t-elle le code maintenable? Les combinaisons de fonctions favorisent la maintenabilité en encourageant l'utilisation de petites fonctions réutilisables. Ces fonctions sont plus faciles à comprendre, à tester et à déboguer. Lorsque ces petites fonctions sont combinées pour créer des fonctions plus complexes, il est plus facile de localiser et de résoudre les problèmes qui peuvent survenir. Cette approche modulaire facilite également la mise à jour ou la modification de certaines parties du code sans affecter l'ensemble du système.

  • Quelles sont les meilleures pratiques pour écrire du code maintenable? La rédaction du code maintenable implique un certain nombre de meilleures pratiques, notamment: garder les fonctions petites et se concentrer sur une seule tâche; structure.

  • Quelle est la relation entre la combinaison de fonctions et la programmation fonctionnelle? La combinaison de fonctions est un concept de base de la programmation fonctionnelle. La programmation fonctionnelle est un exemple de traitement des calculs comme une évaluation des fonctions mathématiques et d'éviter de changer les états et les données variables. Dans ce paradigme, les combinaisons de fonction jouent un rôle crucial dans la construction de fonctions plus complexes à partir de fonctions plus simples, améliorant ainsi la réutilisabilité et la maintenabilité du code.

  • Quels sont les défis de la mise en œuvre des combinaisons de fonctions? Les combinaisons de fonctions ont de nombreux avantages, mais ils peuvent également relever des défis. Un défi est que s'il n'est pas géré correctement, il peut conduire à du code difficile à lire, en particulier lors de la combinaison de plusieurs fonctions. Les erreurs de gestion et les exceptions dans une chaîne de fonctions combinées peuvent également être difficiles. Cependant, ces défis peuvent être atténués par de bonnes pratiques de codage et une utilisation correcte des combinaisons de fonctions.

  • Comment améliorer les tests de code avec les combinaisons de fonctions? Les combinaisons de fonctions peuvent rendre les tests de code plus faciles et plus efficaces. Étant donné qu'une fonction combinée est composée de fonctions plus petites et indépendantes, vous pouvez tester chaque petite fonction séparément. Cela facilite l'isolat et la correction des bogues. Il facilite également la pratique des tests unitaires, où chaque partie du logiciel est testée individuellement pour s'assurer qu'elle fonctionne correctement.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent:Redux sans réagirArticle suivant:Redux sans réagir