首頁 > web前端 > js教程 > 主體

重構程式碼以實現更簡潔和完善的設計的基本指南

DDD
發布: 2024-09-13 08:16:04
原創
276 人瀏覽過

Essential Guide to Refactoring Code for a Cleaner and Polished Design

在快節奏的軟體開發世界中,編寫乾淨且可維護的程式碼至關重要。受到鮑伯叔叔的「乾淨程式碼」的啟發,我們將深入研究五個關鍵的重構原則來增強您的程式碼庫。每個原則都附有 TypeScript 程式碼範例,示範如何實現這些改進。讓我們一起完善我們的程式碼!

1️⃣ 對大功能說不

說明:Bob 叔叔建議保持函數簡潔,最好在 20 行以內。大型函數可能難以理解、測試和維護。透過將函數分解為更小、更易於管理的部分,您可以提高可讀性並降低複雜性。

重構前:

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'));
}
登入後複製

重構後:

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);
}
登入後複製

2️⃣ 擁抱單一責任

解釋:每個類別或方法都應該有一個職責。這意味著每個類別或方法應該做一件事並且做好它。堅持這個原則會讓你的程式碼更加模組化、更容易測試、更靈活地改變。

重構前:

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`);
    }
}
登入後複製

重構後:

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`);
    }
}
登入後複製

3️⃣ 簡化參數傳遞

說明:限制函數接受的參數數量可以使其更易於理解和使用。具有許多參數的複雜函數可能會令人困惑且容易出錯。透過使用物件或資料結構,您可以將相關參數分組在一起。

重構前:

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}`);
}
登入後複製

重構後:

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}`);
}
登入後複製

4️⃣ 避免神奇數字

解釋:幻數是直接在程式碼中使用的文字數字,無需解釋。它們會使程式碼更難理解和維護。用命名常數取代幻數可以提高可讀性並使將來的更改更容易。

重構前:

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;
}
登入後複製

重構後:

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;
}
登入後複製

5️⃣ 有意義的命名變數

說明:使用有意義的變數名稱可以使您的程式碼自記錄並且更易於理解。避免使用單字母或神秘的名稱;相反,選擇能夠清楚傳達變數目的和用途的名稱。

重構前:

function calculate(u: number, v: number): number {
    const r = u + v;
    const p = r * 2;
    return p;
}
登入後複製

重構後:

function calculateTotalCost(baseCost: number, additionalFees: number): number {
    const totalCost = baseCost + additionalFees;
    return totalCost;
}
登入後複製

結論

將這些重構原則應用於您的 TypeScript 程式碼將顯著提高其清晰度、可維護性和整體品質。乾淨的程式碼實踐對於有效的開發和協作至關重要。

哪些重構策略最適合您?在下面分享您的經驗或遇到的任何挑戰! ?

以上是重構程式碼以實現更簡潔和完善的設計的基本指南的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!