Memahami prinsip reka bentuk SOLID dengan contoh pengekodan yang mudah

Artikel ini memberikan gambaran keseluruhan yang jelas dan padat tentang prinsip reka bentuk SOLID, disertai dengan contoh kod yang mudah untuk membantu anda memahami setiap konsep dengan mudah.

SOLID ialah satu set lima prinsip reka bentuk yang bertujuan untuk menjadikan reka bentuk perisian lebih mudah difahami, fleksibel dan boleh diselenggara.

Jadual Kandungan

• S — Prinsip Tanggungjawab Tunggal (SRP)
• O — Prinsip Tertutup-Terbuka (OCP)
• L — Prinsip Penggantian Liskov (LSP)
• I — Prinsip Pengasingan Antara Muka (ISP)
• D — Prinsip Penyongsangan Ketergantungan (DIP)

Prinsip ini amat berguna dalam reka bentuk berorientasikan objek dan lazimnya digunakan dalam pembangunan bahagian hadapan dan belakang. Berikut ialah gambaran ringkas bagi setiap prinsip SOLID dengan contoh kod dalam TypeScript:

S — Prinsip Tanggungjawab Tunggal (SRP)

Sesebuah kelas harus mempunyai satu dan hanya satu sebab untuk berubah, bermakna ia harus mempunyai hanya satu pekerjaan atau tanggungjawab.

Prinsip ini menggalakkan pendekatan berfokus, memastikan perubahan atau kemas kini pada satu aspek UI anda tidak akan menjejaskan bahagian yang tidak berkaitan secara tidak sengaja.

// 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;

Di sini, UserProfile hanya bertanggungjawab untuk memaparkan maklumat pengguna.

O — Prinsip Terbuka-Tertutup (OCP)

Entiti perisian harus dibuka untuk sambungan tetapi ditutup untuk pengubahsuaian.

Pendekatan ini memastikan komponen teras kekal stabil dan tidak berubah, mengurangkan risiko kesan sampingan yang tidak diingini apabila menambah fungsi baharu.

// 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;

Amaran boleh dilanjutkan oleh SuccessAlert tanpa mengubah suai komponen Amaran asal.

L — Prinsip Penggantian Liskov (LSP)

Objek kelas super harus diganti dengan objek subkelasnya tanpa menjejaskan ketepatan program.

Dalam istilah yang lebih mudah, jika anda mempunyai komponen asas atau modul, mana-mana komponen terbitan harus boleh digunakan sebagai ganti komponen asas tanpa menyebabkan isu yang tidak dijangka.

// 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 boleh digunakan di mana-mana sahaja BaseButton tanpa menjejaskan ketepatan aplikasi.

I — Prinsip Pengasingan Antara Muka (ISP)

Tiada pelanggan harus dipaksa untuk bergantung pada kaedah yang tidak digunakan. Ini bermakna mencipta antara muka khusus untuk keperluan khusus.

Dalam erti kata lain, daripada mencipta satu antara muka yang besar, pecahkannya kepada antara muka yang lebih kecil dan fokus yang disesuaikan dengan komponen individu.

// 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');
  }
}

Antara muka berasingan Boleh Terbang dan Boleh Renang dicipta untuk memastikan kelas hanya melaksanakan perkara yang mereka perlukan.

D — Prinsip Penyongsangan Ketergantungan (DIP)

Modul peringkat tinggi tidak seharusnya bergantung pada modul peringkat rendah tetapi pada abstraksi. Kedua-duanya harus bergantung pada abstraksi.

Dalam istilah yang lebih mudah, bukannya komponen bergantung secara langsung antara satu sama lain, ia bergantung pada antara muka atau kelas abstrak, menjadikan kod lebih mudah disesuaikan dengan perubahan.

// 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');

Di sini, UserService bergantung pada abstraksi Logger, menjadikannya fleksibel untuk menukar mekanisme pengelogan tanpa mengubah UserService.

Prinsip SOLID ini membantu dalam mencipta perisian yang mudah diselenggara, dilanjutkan dan pemfaktoran semula, yang penting untuk membangunkan aplikasi bahagian hadapan dan bahagian belakang yang teguh.

Atas ialah kandungan terperinci Memahami prinsip reka bentuk SOLID dengan contoh pengekodan yang mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!