Dieser Artikel bietet einen klaren und prägnanten Überblick über die SOLID-Designprinzipien, begleitet von einfachen Codebeispielen, die Ihnen helfen, jedes Konzept leicht zu verstehen.
SOLID ist eine Reihe von fünf Designprinzipien, die Softwaredesigns verständlicher, flexibler und wartbarer machen sollen.
Die Prinzipien sind besonders nützlich im objektorientierten Design und werden häufig in der Front-End- und Back-End-Entwicklung angewendet. Hier ist ein kurzer Überblick über jedes SOLID-Prinzip mit einem Codebeispiel in TypeScript:
Eine Klasse sollte einen und nur einen Grund haben, sich zu ändern, das heißt, sie sollte nur eine Aufgabe oder Verantwortung haben.
Dieses Prinzip fördert einen zielgerichteten Ansatz und stellt sicher, dass Änderungen oder Aktualisierungen an einem Aspekt Ihrer Benutzeroberfläche sich nicht unbeabsichtigt auf nicht verwandte Teile auswirken.
// 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;
Hier ist UserProfile nur für die Anzeige von Benutzerinformationen verantwortlich.
Software-Entitäten sollten zur Erweiterung geöffnet, aber zur Änderung geschlossen sein.
Dieser Ansatz stellt sicher, dass die Kernkomponenten stabil und unverändert bleiben, wodurch das Risiko unbeabsichtigter Nebenwirkungen beim Hinzufügen neuer Funktionalitäten verringert wird.
// 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 kann durch SuccessAlert erweitert werden, ohne die ursprüngliche Alert-Komponente zu ändern.
Objekte einer Oberklasse sollten durch Objekte ihrer Unterklassen ersetzbar sein, ohne die Korrektheit des Programms zu beeinträchtigen.
Einfacher ausgedrückt: Wenn Sie über eine Basiskomponente oder ein Basismodul verfügen, sollten alle abgeleiteten Komponenten anstelle der Basiskomponente verwendet werden können, ohne dass es zu unerwarteten Problemen kommt.
// 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 kann überall in BaseButton verwendet werden, ohne die Richtigkeit der Anwendung zu beeinträchtigen.
Kein Kunde sollte gezwungen werden, sich auf Methoden zu verlassen, die er nicht verwendet. Das bedeutet, spezifische Schnittstellen für spezifische Anforderungen zu erstellen.
Mit anderen Worten: Anstatt eine einzelne große Schnittstelle zu erstellen, teilen Sie diese in kleinere, fokussierte Schnittstellen auf, die auf einzelne Komponenten zugeschnitten sind.
// 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');
}
}
Es werden separate Schnittstellen Flyable und Swimmable erstellt, um sicherzustellen, dass Klassen nur das implementieren, was sie benötigen.
High-Level-Module sollten nicht von Low-Level-Modulen abhängen, sondern von Abstraktionen. Beide sollten von Abstraktionen abhängen.
Einfacher ausgedrückt: Anstelle von Komponenten, die direkt voneinander abhängig sind, stützen sie sich auf Schnittstellen oder abstrakte Klassen, wodurch der Code besser an Änderungen angepasst werden kann.
// 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');
Hier hängt UserService von der Logger-Abstraktion ab, wodurch es flexibel ist, den Protokollierungsmechanismus zu ändern, ohne den UserService zu ändern.
Diese SOLID-Prinzipien helfen bei der Erstellung von Software, die einfach zu warten, zu erweitern und umzugestalten ist, was für die Entwicklung robuster Front-End- und Back-End-Anwendungen unerlässlich ist.
Das obige ist der detaillierte Inhalt vonVerstehen Sie die SOLID-Designprinzipien anhand einfacher Codierungsbeispiele. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
