Ne vous contentez pas de copier et coller du code, rendez-le réutilisable

Arrière-plan

Il est tout à fait normal de copier et coller du code depuis Internet. En fait, la plupart des problèmes de codage auxquels nous sommes confrontés, qu'il s'agisse de bugs, de problèmes de style ou de la nécessité d'un chargeur de page élégant en CSS simple, ont souvent des solutions disponibles en ligne. Nous recherchons des réponses et Internet offre une multitude d’extraits de code et de guides. Bien entendu, il est essentiel de filtrer et de vérifier ces solutions pour s’assurer qu’elles correspondent bien à nos besoins.

Lors de l’écriture de code, il est facile de se laisser emporter par la commodité du copier-coller de code. Cependant, au fil du temps, nous pourrions commencer à remarquer que notre code est devenu compliqué et difficile à maintenir. Le modèle ressemble souvent à ceci :

1. Nous rencontrons un problème.
2. Recherchez une solution en ligne.
3. Copiez le code que nous trouvons.
4. Collez-le dans notre base de code.
5. Continuez.

Comme mentionné précédemment, il y a de fortes chances que nous soyons à nouveau confrontés aux mêmes problèmes. Ce cycle se répète, et nous finissons par revisiter et recopier les solutions sans véritablement les intégrer ou les comprendre (les défis auxquels les autres ont été confrontés sont désormais devenus les nôtres ?). Nous revenons donc à l'Étape 1 : Rencontrer un problème—et le cycle continue.

Solution

Pour éviter ce cercle infernal, le principe DRY pourrait être la solution. Le principe DRY, qui signifie « Don't Repeat Yourself », est un principe de développement logiciel qui vise à réduire la duplication de code et les modèles répétitifs. L'application du principe DRY à votre code remplacera le code et la logique répétitifs par un code modulaire et référençable. Ou dans cet article, pour vous éviter de revenir de l'étape 5 à l'étape 1 pour le même problème.

Jetons un coup d'œil à ces exemples :

Utiliser des fonctions pour éviter les répétitions

Fonction venue résoudre le code répétitif. C'est définitivement faux si vous écrivez une fonction mais que vous avez quand même laissé du code répétitif dans votre base de code.

Si vous trouvez des blocs logiques similaires répétés, refactorisez-les dans une fonction réutilisable.

// Before

function calculateAreaRectangle(width: number, height: number): number {
    return width * height;
}

function calculateAreaTriangle(base: number, height: number): number {
    return 0.5 * base * height;
}

Créez une fonction à usage général pour le calcul de la surface.

// after

function calculateArea(shape: "rectangle" | "triangle", dimension1: number, dimension2: number): number {
    if (shape === "rectangle") return dimension1 * dimension2;
    if (shape === "triangle") return 0.5 * dimension1 * dimension2;
    throw new Error("Invalid shape");
}

// Usage
const rectangleArea = calculateArea("rectangle", 5, 10);
const triangleArea = calculateArea("triangle", 5, 10);

Création de fonctions utilitaires

Je parle toujours de fonction : créer une fonction utilitaire est l'un des moyens d'obtenir du code propre. Exemple, si plusieurs parties de votre code convertissent une chaîne en casse de titre, extrayez-la dans une fonction utilitaire.

// before

let title1 = "hello world".split(' ').map(word => word[0].toUpperCase() + word.slice(1)).join(' ');
let title2 = "good morning".split(' ').map(word => word[0].toUpperCase() + word.slice(1)).join(' ');

Envisagez de créer une fonction pour gérer ce problème.

// after
function toTitleCase(input: string): string {
    return input.split(' ').map(word => word[0].toUpperCase() + word.slice(1)).join(' ');
}

let title1 = toTitleCase("hello world");
let title2 = toTitleCase("good morning");

Constantes pour des valeurs communes

Combien de fois appelez-vous une API qui a le même point de terminaison ? Je crois que c'est plus d'une fois.

Si certaines valeurs telles que les URL ou les options de configuration sont utilisées dans votre application, définissez-les une fois comme constantes.

// Before

function calculateAreaRectangle(width: number, height: number): number {
    return width * height;
}

function calculateAreaTriangle(base: number, height: number): number {
    return 0.5 * base * height;
}

Et si le backend modifiait l'URL ? Si vous écrivez toujours ce code comme dans l'exemple ci-dessus, vous modifierez tous les codes qui contiennent l'URL. Il est judicieux, si vous déplacez le point de terminaison vers une constante, de pouvoir le modifier une fois et tous les appels d'API fonctionnent toujours car ils suivent la constante que vous avez créée.

// after

function calculateArea(shape: "rectangle" | "triangle", dimension1: number, dimension2: number): number {
    if (shape === "rectangle") return dimension1 * dimension2;
    if (shape === "triangle") return 0.5 * dimension1 * dimension2;
    throw new Error("Invalid shape");
}

// Usage
const rectangleArea = calculateArea("rectangle", 5, 10);
const triangleArea = calculateArea("triangle", 5, 10);

Vous avez une autre idée ?

Ces exemples ne sont que quelques exemples pour décrire à quel point il est important de garder notre code précis et de ne pas garder le code répétitif encore et encore. N'hésitez pas à partager votre réflexion dans la zone de commentaire ci-dessous.

Résumé

Le principe DRY (Don't Repeat Yourself) est une pratique de codage fondamentale qui encourage les développeurs à éviter la redondance en réutilisant le code autant que possible. L'application des principes DRY peut améliorer considérablement la maintenabilité, la lisibilité et l'efficacité d'une base de code, car elle minimise le nombre d'endroits où des modifications doivent être apportées lorsque des mises à jour sont requises. Le principe DRY consiste à créer du code réutilisable et maintenable. En tirant parti des fonctionnalités de TypeScript, telles que les fonctions, les génériques, les interfaces et les énumérations, vous pouvez garder votre base de code propre et réduire la redondance.

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!