首页  >  文章  >  web前端  >  重构代码以实现更简洁和完善的设计的基本指南

重构代码以实现更简洁和完善的设计的基本指南

DDD
DDD原创
2024-09-13 08:16:04301浏览

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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn