FR
RU
EN
ES
ZH
DE
PT
AR
HI
Votre code fonctionne — mais cela ne signifie pas qu'il est bon
\n\nVous avez écrit un script. Il s'exécute. Les clients sont satisfaits. Mais un mois passe, et vous regardez avec horreur cette même fonction qui a gonflé jusqu'à 200 lignes. Elle mélange des requêtes API, des manipulations du DOM et une certaine magie avec les dates. Cela vous dit quelque chose ?
\n\nBienvenue dans le monde où le réusinage de code JavaScript n'est pas un caprice de perfectionniste, mais une nécessité vitale. Si vous voulez que votre projet vive longtemps et ne s'effondre pas à la première modification, cet article est pour vous.
\n\nQu'est-ce que le réusinage et ce qu'il n'est pas
\n\nCommençons par l'essentiel. Le réusinage de code JavaScript est le processus de modification de la structure interne d'un programme sans modifier son comportement externe. Vous n'ajoutez pas de nouvelles fonctionnalités, vous ne corrigez pas de bugs. Vous rendez simplement le code plus propre, plus compréhensible et plus facile à maintenir.
\n\nBeaucoup confondent réusinage et réécriture. Ce sont des choses différentes. La réécriture, c'est quand vous jetez l'ancien code et en écrivez un nouveau à partir de zéro. Le réusinage est une évolution, pas une révolution. Vous modifiez le code par petites étapes, en vérifiant à chaque fois que rien n'est cassé.
\n\nQuand faut-il effectuer un réusinage JavaScript ?
\n\nVoici plusieurs signes certains que votre code crie à l'aide :
\n\n- \n
- La règle de trois. Si vous copiez le même morceau de code pour la troisième fois — il est temps de l'extraire dans une fonction séparée. \n
- La fonction monstre. Une fonction de plus de 30 à 40 lignes, impossible à lire d'un seul coup d'œil. \n
- Les « nombres magiques ». Des nombres comme
86400000ou42éparpillés dans le code sans commentaires ni constantes. \n - Les variables globales. Si vous avez peur de modifier une variable parce que vous ne savez pas où elle est utilisée ailleurs. \n
- Les tests. Si vous avez peur d'apporter des modifications parce qu'il n'y a pas de tests automatisés — c'est le premier signal d'alarme. \n
Mais il y a aussi des situations où le réusinage n'est pas nécessaire : avant une échéance, en production sans tests, ou lorsque le code a été écrit à la va-vite pour un prototype qui sera jeté demain.
\n\nTechniques de réusinage JavaScript : du simple au complexe
\n\n1. Extraction de fonction (Extract Function)
\n\nLa technique la plus populaire et la plus sûre. Vous trouvez un fragment de code qui peut être regroupé, et vous l'extrayez dans une fonction séparée.
\n\n// AVANT le réusinage\nfunction calculateInvoice(items) {\n let total = 0;\n for (let item of items) {\n total += item.price * item.quantity;\n }\n let discount = 0;\n if (total > 1000) {\n discount = total * 0.1;\n }\n return total - discount;\n}\n\n// APRÈS le réusinage\nfunction calculateSubtotal(items) {\n return items.reduce((sum, item) => sum + item.price * item.quantity, 0);\n}\n\nfunction calculateDiscount(total) {\n return total > 1000 ? total * 0.1 : 0;\n}\n\nfunction calculateInvoice(items) {\n const subtotal = calculateSubtotal(items);\n const discount = calculateDiscount(subtotal);\n return subtotal - discount;\n}\nQu'est-ce qui a changé ? Maintenant, chaque fonction est responsable d'une seule action. Vous pouvez réutiliser calculateSubtotal ailleurs, et calculateDiscount est facile à tester séparément.
2. Remplacement des nombres magiques par des constantes
\n\nN'utilisez jamais de nombres « nus » dans le code. Dans un mois, vous ne vous souviendrez même pas ce que signifie 86400000.
// MAUVAIS\nif (Date.now() - lastLogin > 86400000) {\n // demander une reconnexion\n}\n\n// BON\nconst MILLISECONDS_IN_A_DAY = 24 * 60 * 60 * 1000;\nconst ONE_DAY_MS = 86400000; // ou simplement une constante lisible\n\nif (Date.now() - lastLogin > ONE_DAY_MS) {\n // demander une reconnexion\n}\n3. Simplification des structures conditionnelles
\n\nLes if-else imbriqués complexes sont le principal ennemi de la lisibilité. Utilisez le retour anticipé (early return) et les opérateurs ternaires.
<
