不要只是複製和貼上程式碼，要使其可重複使用

背景

從網路上複製貼上程式碼是完全正常的。事實上，我們面臨的大多數程式設計問題——無論是錯誤、樣式挑戰，還是對純 CSS 中的流暢頁面載入器的需求——通常都可以在線上找到解決方案。我們尋找答案，網路提供了大量的程式碼片段和指南。當然，過濾和驗證這些解決方案以確保它們非常適合我們的需求是非常重要的。

編寫程式碼時，很容易被複製和貼上程式碼的便利性所吸引。但隨著時間的推移，我們可能會開始注意到我們的程式碼變得混亂且難以維護。模式通常是這樣的：

1. 我們遇到了問題。
2. 線上搜尋解決方案。
3. 複製我們找到的程式碼。
4. 將其貼到我們的程式碼庫中。
5. 繼續前進。

如前所述，我們最終很有可能再次面臨同樣的問題。這個循環不斷重複，我們最終會重新審視和重新複製解決方案，而沒有真正整合或理解它們（其他人面臨的挑戰現在已經成為我們自己的挑戰？）。因此，我們回到第 1 步：遇到問題——然後循環繼續。

解決方案

為了避免這個地獄循環，DRY 原則可能是解決方案。 DRY 原則代表“Don’t Repeat Yourself”，是一種軟體開發原則，旨在減少程式碼重複和重複模式。將 DRY 原則應用於您的程式碼將以模組化和可引用的程式碼取代重複的程式碼和邏輯。或者在本文中，避免您因同樣的問題再次從步驟 5 回到步驟 1。

讓我們來看看這些範例：

使用函數避免重複

解重複程式碼的函數。如果你寫了一個函數，但你的程式碼庫中仍然留下了重複的程式碼，那絕對是錯的。

如果您發現類似的邏輯區塊重複，請將它們重構為可重複使用的函數。

// Before

function calculateAreaRectangle(width: number, height: number): number {
    return width * height;
}

function calculateAreaTriangle(base: number, height: number): number {
    return 0.5 * base * height;
}

建立一個用於面積計算的通用函數。

// after

function calculateArea(shape: "rectangle" | "triangle", dimension1: number, dimension2: number): number {
    if (shape === "rectangle") return dimension1 * dimension2;
    if (shape === "triangle") return 0.5 * dimension1 * dimension2;
    throw new Error("Invalid shape");
}

// Usage
const rectangleArea = calculateArea("rectangle", 5, 10);
const triangleArea = calculateArea("triangle", 5, 10);

建立實用函數

我仍然在談論函數：建立實用函數是實現乾淨程式碼的方法之一。例如，如果程式碼的多個部分將字串轉換為標題大小寫，請將其提取到實用函數中。

// before

let title1 = "hello world".split(' ').map(word => word[0].toUpperCase() + word.slice(1)).join(' ');
let title2 = "good morning".split(' ').map(word => word[0].toUpperCase() + word.slice(1)).join(' ');

考慮建立一個函數來處理這個問題。

// after
function toTitleCase(input: string): string {
    return input.split(' ').map(word => word[0].toUpperCase() + word.slice(1)).join(' ');
}

let title1 = toTitleCase("hello world");
let title2 = toTitleCase("good morning");

共同值的常數

您呼叫具有相同端點的 API 多少次？我相信，不只一次。

如果在您的應用程式中使用了某些值（例如 URL 或設定選項），請將它們定義為常數。

// Before

function calculateAreaRectangle(width: number, height: number): number {
    return width * height;
}

function calculateAreaTriangle(base: number, height: number): number {
    return 0.5 * base * height;
}

如果後端改變了URL怎麼辦？如果你仍然像上面的例子一樣編寫這段程式碼，你將更改所有包含該URL的程式碼。如果您將端點移至一個常數，您可以更改它一次，並且所有 API 呼叫仍然有效，這是明智的，因為它們遵循您所做的常數。

// after

function calculateArea(shape: "rectangle" | "triangle", dimension1: number, dimension2: number): number {
    if (shape === "rectangle") return dimension1 * dimension2;
    if (shape === "triangle") return 0.5 * dimension1 * dimension2;
    throw new Error("Invalid shape");
}

// Usage
const rectangleArea = calculateArea("rectangle", 5, 10);
const triangleArea = calculateArea("triangle", 5, 10);

還有其他想法嗎？

這些例子只是一點點地描述了保持我們的程式碼指向而不是一遍又一遍地保留重複程式碼的重要性。歡迎在下方留言區分享你的想法。

概括

DRY（不要重複自己）原則是一種基本的編碼實踐，它鼓勵開發人員盡可能重複使用程式碼來避免冗餘。應用 DRY 原則可以顯著增強整個程式碼庫的可維護性、可讀性和效率，因為它可以最大限度地減少需要更新時需要進行更改的位置的數量。 DRY 原則是關於創建可重複使用、可維護的程式碼。透過利用 TypeScript 的功能（例如函數、泛型、介面和枚舉），您可以保持程式碼庫整潔並減少冗餘。

以上是不要只是複製和貼上程式碼，要使其可重複使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！