Maison > Article > interface Web > Guide essentiel de refactorisation du code pour une conception plus propre et soignée
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 !
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')); }
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); }
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`); } }
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`); } }
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}`); }
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}`); }
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; }
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; }
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; }
Après la refactorisation :
function calculateTotalCost(baseCost: number, additionalFees: number): number { const totalCost = baseCost + additionalFees; return totalCost; }
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!