透過簡單的編碼範例了解 SOLID 設計原則

本文對 SOLID 設計原則進行了清晰簡潔的概述，並附有簡單的程式碼範例，可幫助您輕鬆掌握每個概念。

SOLID 是一組五個設計原則，旨在使軟體設計更易於理解、靈活和可維護。

目錄

• S — 單一職責原則 (SRP)
• O — 開閉原則 (OCP)
• L — 里氏替換原理 (LSP)
• I — 介面隔離原則 (ISP)
• D — 依賴倒置原則 (DIP)

---

這些原則在物件導向設計中特別有用，並且通常應用於前端和後端開發。以下是每個 SOLID 原則的簡要概述以及 TypeScript 程式碼範例：

S－單一職責原則（SRP）

一個類別應該有且僅有一個改變的理由，這意味著它應該只有一項工作或職責。

這個原則鼓勵採用集中的方法，確保 UI 某一方面的變更或更新不會無意中影響不相關的部分。

// UserProfile.tsx
import React from 'react';

interface UserProfileProps {
  username: string;
  email: string;
}

const UserProfile: React.FC<UserProfileProps> = ({ username, email }) => {
  return (
    <div>
      <h2>{username}</h2>
      <p>{email}</p>
    </div>
  );
};

export default UserProfile;

這裡UserProfile只負責顯示使用者資訊。

---

O－開閉原則（OCP）

軟體實體應該對擴充開放，但對修改關閉。

此方法可確保核心組件保持穩定且不變，從而降低新增功能時出現意外副作用的風險。

// Alert.tsx
import React from 'react';

interface AlertProps {
  message: string;
}

const Alert: React.FC<AlertProps> = ({ message }) => {
  return <div className="alert">{message}</div>;
};

export default Alert;

// SuccessAlert.tsx
import React from 'react';
import Alert from './Alert';

const SuccessAlert: React.FC<{ message: string }> = ({ message }) => {
  return <Alert message={`Success: ${message}`} />;
};

export default SuccessAlert;

Alert 可以透過 SuccessAlert 進行擴展，無需修改原有的 Alert 組件。

---

L——里氏替換原理（LSP）

超類別的物件應該可以用其子類別的物件替換，而不會影響程式的正確性。

簡單來說，如果您有基礎元件或模組，則任何衍生元件都應該可以用來代替基礎元件，而不會導致意外問題。

// BaseButton.tsx
import React from 'react';

interface BaseButtonProps {
  onClick: () => void;
  label: string;
}

const BaseButton: React.FC<BaseButtonProps> = ({ onClick, label }) => {
  return <button onClick={onClick}>{label}</button>;
};

export default BaseButton;

// IconButton.tsx
import React from 'react';
import BaseButton from './BaseButton';

interface IconButtonProps extends BaseButtonProps {
  icon: string;
}

const IconButton: React.FC<IconButtonProps> = ({ onClick, label, icon }) => {
  return (
    <BaseButton onClick={onClick} label={<span><i className={icon}></i> {label}</span>} />
  );
};

export default IconButton;

IconButton 可以在 BaseButton 的任何地方使用，而不會影響應用的正確性。

---

I — 介面隔離原則 (ISP)

任何客戶端都不應該被迫依賴它不使用的方法。這意味著為特定需求建立特定介面。

換句話說，與其創建單個大型介面，不如將其分解為針對各個組件量身定制的較小的、集中的介面。

// interfaces.ts
export interface Flyable {
  fly(): void;
}

export interface Swimmable {
  swim(): void;
}

// Bird.ts
import { Flyable } from './interfaces';

class Bird implements Flyable {
  fly() {
    console.log('Bird is flying');
  }
}

// Fish.ts
import { Swimmable } from './interfaces';

class Fish implements Swimmable {
  swim() {
    console.log('Fish is swimming');
  }
}

建立單獨的 Flyable 和 Swimmable 接口，以確保類別僅實現它們所需的內容。

---

D－依賴倒置原則（DIP）

高層模組不應該依賴低層模組，而應該依賴抽象。兩者都應該依賴抽象。

簡單來說，元件不是直接相互依賴，而是依賴介面或抽象類，使得程式碼更能適應變化。

// Logger.ts
export interface Logger {
  log(message: string): void;
}

export class ConsoleLogger implements Logger {
  log(message: string) {
    console.log(message);
  }
}

// UserService.ts
import { Logger } from './Logger';

class UserService {
  constructor(private logger: Logger) {}

  createUser(username: string) {
    this.logger.log(`User created: ${username}`);
  }
}

// App.ts
import { UserService } from './UserService';
import { ConsoleLogger } from './Logger';

const logger = new ConsoleLogger();
const userService = new UserService(logger);

userService.createUser('JohnDoe');

這裡，UserService 依賴 Logger 抽象，因此可以在不改變 UserService 的情況下靈活地變更日誌記錄機制。

---

這些 SOLID 原則有助於創建易於維護、擴展和重構的軟體，這對於開發強大的前端和後端應用程式至關重要。

以上是透過簡單的編碼範例了解 SOLID 設計原則的詳細內容。更多資訊請關注PHP中文網其他相關文章！