乾淨程式碼的藝術：撰寫可維護 JavaScript 的實用指南。

介紹：

編寫乾淨的程式碼不僅僅是一種美觀的選擇，它是減少錯誤、增強協作並確保軟體專案的長期可維護性的基本實踐。本指南探討了編寫乾淨 JavaScript 程式碼的原則、實作和實用方法。

核心原則

1. 可讀性第一

程式碼的閱讀次數遠多於寫次數。好的程式碼會講述一個其他開發人員（包括未來的你）可以輕鬆理解的故事。

壞的：

const x = y + z / 3.14;

好的：

const radius = diameter / Math.PI;

2. 可維護性很重要

可維護的程式碼是模組化的，遵循 SOLID 原則，並最大限度地減少依賴性。

壞的：

function calculateArea(radius) {
    // ...lots of nested logic...
    // ...complex calculations...
    // ...multiple responsibilities...
    return result;
}

好的：

function calculateArea(radius) {
    return Math.PI * radius * radius;
}

3.可測試性

乾淨的程式碼本質上是可測試的。將複雜的操作分解為更小的、可驗證的單元。

壞的：

function getRandomNumber() {
    return Math.random();
}

好的：

function getRandomNumber(randomGenerator = Math.random) {
    return randomGenerator();
}

4. 可擴展性

乾淨的程式碼會隨著您的專案而優雅地成長。

壞的：

function handleUserData(data) {
    if (data.type === 'admin') {
        // 50 lines of admin logic
    } else if (data.type === 'user') {
        // 50 lines of user logic
    } else if (data.type === 'guest') {
        // 50 lines of guest logic
    }
}

好的：

const userHandlers = {
    admin: handleAdminData,
    user: handleUserData,
    guest: handleGuestData
};

function handleUserData(data) {
    return userHandlers[data.type](data);
}

常見陷阱及解決方案：

1. 命名困境

名稱應揭示意圖和上下文。

壞的：

function calc(a, b) {
    return a * b + TAX;
}

好的：

function calculatePriceWithTax(basePrice, taxRate) {
    const TAX_MULTIPLIER = 1;
    return basePrice * taxRate + TAX_MULTIPLIER;
}

2. 避免回調地獄

用現代非同步模式取代巢狀回呼。

壞的：

getUserData(userId, function(user) {
    getOrders(user.id, function(orders) {
        processOrders(orders, function(result) {
            // More nesting...
        });
    });
});

好的：

async function processUserOrders(userId) {
    try {
        const user = await getUserData(userId);
        const orders = await getOrders(user.id);
        return await processOrders(orders);
    } catch (error) {
        handleError(error);
    }
}

3. 管理配置

建立配置值的單一真實來源。

壞的：

// Scattered across multiple files
const API_KEY = 'abc123';
const API_ENDPOINT = 'https://api.example.com';

好的：

// config.js
export const config = {
    api: {
        key: process.env.API_KEY,
        endpoint: process.env.API_ENDPOINT
    }
};

務實的權衡：

效能與可讀性

平衡可讀性與效能需求：

// More readable, slightly less performant
const doubledNumbers = numbers.map(n => n * 2);

// Less readable, more performant (when performance is critical)
for (let i = 0; i < numbers.length; i++) numbers[i] *= 2;

純函數與副作用

雖然純函數是理想的，但實際應用程式需要副作用。仔細隔離和管理它們：

// Pure function
function calculateTotal(items) {
    return items.reduce((sum, item) => sum + item.price, 0);
}

// Necessary side effect, clearly isolated
async function saveOrderToDatabase(order) {
    await database.orders.save(order);
    logOrderCreation(order);
}

最佳實踐：

1.使用有意義的名字

• 變數應表明其用途

• 函數應該要描述它們的動作

• 類別應該代表它們的實體

2. 保持函數較小

• 每個功能都應該做好一件事

• 每個函數的目標是不超過 20 行

• 將複雜的邏輯提取到單獨的函數中

3. 避免使用幻數

• 對所有數值使用命名常數

• 配置物件中的群組相關常數

4. 優雅地處理錯誤

• 適當使用 try/catch 區塊

• 提供有意義的錯誤訊息

• 考慮錯誤恢復策略

結論：

乾淨的程式碼是一個旅程，而不是目的地。雖然完美的整潔可能是無法實現的，但透過一致的實踐和務實的權衡來爭取乾淨的程式碼可以帶來更可維護、更可靠和更具協作性的程式碼庫。請記住，上下文很重要——在一種情況下乾淨的東西在另一種情況下可能就不那麼乾淨了。關鍵是找到滿足您的特定需求的適當平衡，同時維護其他人（包括未來的您）將感謝您編寫的程式碼。

🔗 在 LinkedIn 上與我聯絡：

讓我們一起深入了解軟體工程的世界吧！我定期分享 JavaScript、TypeScript、Node.js、React、Next.js、資料結構、演算法、Web 開發等方面的見解。無論您是想提高自己的技能還是在令人興奮的主題上合作，我都樂意與您聯繫並與您一起成長。

跟我來： Nozibul Islam

原文出處：https://dev.to/nozibul_islam_113b1d5334f/the-art-of-clean-code-a-practical-guide-to-writing-maintainable-javascript-1eb9