Maison > interface Web > js tutoriel > le corps du texte

Guide essentiel de refactorisation du code pour une conception plus propre et soignée

DDD
Libérer: 2024-09-13 08:16:04
original
324 Les gens l'ont consulté

Essential Guide to Refactoring Code for a Cleaner and Polished Design

Dans le monde trépidant du développement logiciel, écrire du code propre et maintenable est essentiel. Inspirés par le « Clean Code » d'Oncle Bob, nous aborderons cinq principes de refactoring cruciaux pour améliorer votre base de code. Chaque principe est accompagné d'exemples de code TypeScript démontrant comment mettre en œuvre ces améliorations. Affinons notre code ensemble !

1️⃣ Dites non aux grandes fonctions

Explication : Oncle Bob conseille de garder les fonctions concises, idéalement sous 20 lignes. Les grandes fonctions peuvent être difficiles à comprendre, tester et maintenir. En divisant les fonctions en éléments plus petits et plus faciles à gérer, vous améliorez la lisibilité et réduisez la complexité.

Avant le refactoring :

import fs from 'fs';

function processData(data: string[]): void {
    // Step 1: Validate data
    if (!Array.isArray(data)) {
        throw new Error("Input must be an array");
    }

    // Step 2: Clean data
    const cleanedData = data.map(item => item.trim()).filter(item => item !== '');

    // Step 3: Process data
    const result: string[] = [];
    for (const item of cleanedData) {
        if (item.length > 5) {
            result.push(item.toUpperCase());
        } else {
            result.push(item.toLowerCase());
        }
    }

    // Step 4: Save results
    fs.writeFileSync('results.txt', result.join('\n'));
}
Copier après la connexion

Après la refactorisation :

import fs from 'fs';

function validateData(data: any): void {
    if (!Array.isArray(data)) {
        throw new Error("Input must be an array");
    }
}

function cleanData(data: string[]): string[] {
    return data.map(item => item.trim()).filter(item => item !== '');
}

function processItem(item: string): string {
    return item.length > 5 ? item.toUpperCase() : item.toLowerCase();
}

function saveResults(results: string[], filename: string = 'results.txt'): void {
    fs.writeFileSync(filename, results.join('\n'));
}

function processData(data: string[]): void {
    validateData(data);
    const cleanedData = cleanData(data);
    const results = cleanedData.map(processItem);
    saveResults(results);
}
Copier après la connexion

2️⃣ Adoptez la responsabilité unique

Explication : Chaque classe ou méthode doit avoir une seule responsabilité. Cela signifie que chaque classe ou méthode doit faire une chose et bien la faire. Adhérer à ce principe rend votre code plus modulaire, plus facile à tester et plus flexible à modifier.

Avant le refactoring :

class User {
    constructor(public username: string, public email: string) {}

    sendEmail(message: string): void {
        // Code to send an email
        console.log(`Sending email to ${this.email}: ${message}`);
    }

    saveToDatabase(): void {
        // Code to save user to the database
        console.log(`Saving ${this.username} to the database`);
    }
}
Copier après la connexion

Après la refactorisation :

class User {
    constructor(public username: string, public email: string) {}
}

class EmailService {
    sendEmail(email: string, message: string): void {
        // Code to send an email
        console.log(`Sending email to ${email}: ${message}`);
    }
}

class UserRepository {
    save(user: User): void {
        // Code to save user to the database
        console.log(`Saving ${user.username} to the database`);
    }
}
Copier après la connexion

3️⃣ Simplifiez le passage des paramètres

Explication : Limiter le nombre de paramètres qu'une fonction accepte la rend plus facile à comprendre et à utiliser. Les fonctions complexes comportant de nombreux paramètres peuvent prêter à confusion et être sujettes à des erreurs. En utilisant des objets ou des structures de données, vous pouvez regrouper les paramètres associés.

Avant le refactoring :

function createUser(username: string, email: string, password: string, age: number, address: string): void {
    // Code to create a user
    console.log(`Creating user: ${username}, ${email}, ${password}, ${age}, ${address}`);
}
Copier après la connexion

Après la refactorisation :

interface User {
    username: string;
    email: string;
    password: string;
    age: number;
    address: string;
}

function createUser(user: User): void {
    // Code to create a user
    console.log(`Creating user: ${user.username}, ${user.email}, ${user.password}, ${user.age}, ${user.address}`);
}
Copier après la connexion

4️⃣ Évitez les nombres magiques

Explication : Les nombres magiques sont des nombres littéraux utilisés directement dans le code sans explication. Ils peuvent rendre le code plus difficile à comprendre et à maintenir. Remplacer les nombres magiques par des constantes nommées améliore la lisibilité et facilite les modifications futures.

Avant le refactoring :

function calculateDiscountedPrice(price: number): number {
    // Apply a discount of 15%
    return price * 0.85;
}

function calculateShippingCost(weight: number): number {
    // Shipping cost per kilogram
    return weight * 5;
}
Copier après la connexion

Après la refactorisation :

const DISCOUNT_RATE = 0.15;
const SHIPPING_COST_PER_KG = 5;

function calculateDiscountedPrice(price: number): number {
    // Apply a discount
    return price * (1 - DISCOUNT_RATE);
}

function calculateShippingCost(weight: number): number {
    // Shipping cost per kilogram
    return weight * SHIPPING_COST_PER_KG;
}
Copier après la connexion

5️⃣ Nommer les variables avec une signification

Explication : L'utilisation de noms de variables significatifs rend votre code auto-documenté et plus facile à comprendre. Évitez les noms à une seule lettre ou énigmatiques ; choisissez plutôt des noms qui traduisent clairement le but et l'utilisation de la variable.

Avant le refactoring :

function calculate(u: number, v: number): number {
    const r = u + v;
    const p = r * 2;
    return p;
}
Copier après la connexion

Après la refactorisation :

function calculateTotalCost(baseCost: number, additionalFees: number): number {
    const totalCost = baseCost + additionalFees;
    return totalCost;
}
Copier après la connexion

Conclusion

L'application de ces principes de refactoring à votre code TypeScript améliorera considérablement sa clarté, sa maintenabilité et sa qualité globale. Des pratiques de code propres sont essentielles pour un développement et une collaboration efficaces.

Quelles stratégies de refactoring ont le mieux fonctionné pour vous ? Partagez vos expériences ou les défis que vous avez rencontrés ci-dessous ! ?

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!

source:dev.to
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal