Clean Code in PHP und JavaScript: 11 praktische Regeln

Clean Code in PHP und JavaScript: 11 praktische Regeln für bessere Webentwicklung

Stellen Sie sich vor, Sie betreten eine Küche, in der die Gewürze durcheinandergewürfelt sind, die Messer stumpf und die Arbeitsflächen mit Essensresten übersät sind. Das Kochen wäre eine mühsame und frustrierende Erfahrung, richtig? Genauso verhält es sich mit Code, der nicht „clean“ ist. Unübersichtlicher, schwer verständlicher Code ist wie eine schlecht organisierte Küche für Entwickler. Er macht die Wartung zu einer Qual, die Fehlersuche zu einem Albtraum und das Hinzufügen neuer Funktionen zu einem Projekt, das zum Scheitern verurteilt ist. Aber keine Sorge, wir sind , um das zu ändern! Mit „Clean Code“, also sauberem und gut strukturiertem Code, verwandeln wir Ihre Entwicklungsumgebung in eine perfekt organisierte Gourmetküche, in der jede Zeile Code ihren Zweck erfüllt und leicht verständlich ist.

In der Welt der Webentwicklung, wo sich die Anforderungen ständig ändern und die Zusammenarbeit im Team unerlässlich ist, ist die Fähigkeit, sauberen Code zu schreiben, mehr als nur eine nette Option – sie ist eine Notwendigkeit. Ob Sie nun mit PHP auf der Serverseite arbeiten, um dynamische Inhalte zu generieren und Datenbanken zu verwalten, oder mit JavaScript im Frontend, um interaktive und ansprechende Benutzererlebnisse zu schaffen, die Prinzipien des Clean Code bleiben universell. Sie führen zu robusterer Software, geringeren Entwicklungskosten und glücklicheren Entwicklern. Denken Sie daran, dass Code nicht nur für den Computer bestimmt ist, sondern vor allem auch für andere Menschen – und nicht zuletzt für Ihr zukünftiges Ich.

In diesem ausführlichen Artikel tauchen wir tief in die Welt des Clean Code ein und präsentieren Ihnen 11 praktische Regeln, die Sie sofort in Ihren PHP- und JavaScript-Projekten anwenden können. Wir werden nicht nur theoretische Konzepte durchgehen, sondern auch konkrete Beispiele liefern, die Ihnen helfen, diese Prinzipien zu verinnerlichen. Von aussagekräftigen Namen bis hin zur Vermeidung von Seiteneffekten – wir decken die wichtigsten Aspekte ab, die Ihren Code von chaotisch zu klar, von schwerfällig zu effizient verwandeln. Machen Sie sich bereit, Ihre Entwicklungsgewohnheiten zu revolutionieren und Code zu schreiben, der Freude bereitet!

Die Investition in Clean Code zahlt sich langfristig immer aus. Ein sauberes Projekt ist leichter zu verstehen, zu testen und zu erweitern. Dies bedeutet weniger Zeit, die mit dem Entwirren von mysteriösem Code verbracht wird, und mehr Zeit, die für die tatsächliche Innovation und das Erreichen von Geschäftszielen genutzt werden kann. Stellen Sie sich vor, wie viel schneller Sie auf neue Anforderungen reagieren könnten, wenn der bestehende Code wie ein offenes Buch vor Ihnen liegt. Dieser Artikel ist Ihr Leitfaden zu dieser Effizienz und Klarheit.

Wir möchten betonen, dass die Konzepte des Clean Code universell sind und sowohl für die serverseitige PHP-Entwicklung als auch für die clientseitige JavaScript-Entwicklung gelten. Viele der Prinzipien lassen sich direkt übertragen, und wo Unterschiede bestehen, werden wir diese hervorheben. Unser Ziel ist es, Ihnen ein umfassendes Verständnis zu vermitteln, das Ihre Fähigkeiten als Webentwickler auf ein neues Level hebt. Machen Sie sich bereit, Ihr Code-Spiel zu verbessern!

1. Aussagekräftige und konsistente Benennung

Die Wahl der richtigen Namen für Variablen, Funktionen, Klassen und Dateien ist vielleicht der wichtigste Aspekt des Clean Code. Ein aussagekräftiger sollte sofort verraten, wofür ein Element da ist, was es tut oder welche Daten es repräsentiert. Vermeiden Sie kryptische Abkürzungen oder generische Namen wie `data`, `temp` oder `obj`. Stattdessen sollten Sie beschreibende Namen wählen, die den Zweck des Elements klar kommunizieren. Dies macht Ihren Code nicht nur für andere lesbar, sondern auch für Ihr zukünftiges Ich, das sich vielleicht nicht mehr genau an die ursprüngliche Intention erinnert. Konsistenz in der Benennung über das gesamte Projekt hinweg ist ebenfalls entscheidend, um Verwirrung zu vermeiden.

In PHP könnte eine Variable, die die Anzahl der Benutzer speichert, `userCount` oder `numberOfUsers` genannt werden, anstatt nur `n` oder `uc`. Eine Funktion, die Daten von einer API abruft, sollte `fetchUserData` oder `getUserDataFromApi` heißen, nicht nur `getData` oder `process`. Denken Sie darüber nach, wie Sie Code lesen, den jemand anderes geschrieben hat. Wenn Sie sofort verstehen, was passiert, dann hat der Autor gute Arbeit geleistet. Das Ziel ist, dass der Code sich selbst erklärt, ohne dass zusätzliche Kommentare nötig sind, die oft veralten.

Für JavaScript gilt dasselbe Prinzip. Eine Funktion, die ein Element auf der Webseite versteckt, sollte `hideElement` oder `displayNone` genannt werden, nicht `h` oder `dis`. Eine Variable, die die aktuelle Seite im Paginierungsprozess speichert, wäre `currentPage` oder `pageNumber` anstelle von `p` oder `num`. Die Konsistenz sollte sich auch auf die Schreibweise beziehen, zum die Verwendung von Camel Case (`myVariableName`) oder Snake Case (`my_variable_name`), je nach den Konventionen des Projekts oder der Sprache. Die offizielle Dokumentation für beide Sprachen gibt oft Empfehlungen zur Benennung, die als guter Ausgangspunkt dienen können.

Denken Sie bei der Benennung auch an die „sprechende“ Natur. Ein wie `calculateOrderTotal` sagt viel mehr aus als `calc_total`. Wenn Sie eine Funktion haben, die einen bestimmten Wert prüft, sollten Sie sich überlegen, ob sie einen booleschen Wert zurückgibt und dementsprechend mit Präfixen wie `is` oder `has` beginnen, z.B. `isValid` oder `hasPermission`. Dies macht die Absicht klar und vereinfacht die Lesbarkeit, insbesondere in bedingten Anweisungen.

H3: Klare Unterscheidung von Variablen und Funktionen

Es ist wichtig, dass der eines Elements sofort verrät, ob es sich um eine Variable handelt, die einen Wert speichert, oder um eine Funktion, die eine Aktion ausführt. Variablen sollten meist Substantive oder Substantivphrasen sein, die etwas darstellen, wie `userName`, `orderList` oder `configSettings`. Funktionen hingegen sollten oft Verben oder Verbphrasen sein, die eine Aktion beschreiben, wie `saveUser`, `renderPage` oder `validateInput`.

In PHP könnte eine Variable `$userProfile` heißen, während die Funktion, die dieses Profil lädt, `loadUserProfile()` heißen würde. Für JavaScript ist es ähnlich: Eine Variable könnte `userData` sein, und eine Funktion, die diese Daten verarbeitet, könnte `processUserData()` heißen. Diese klare Trennung im Namen hilft Entwicklern, die Struktur des Codes schnell zu erfassen und zu verstehen, ob sie mit einem Wert interagieren oder eine Operation ausführen müssen.

Wenn eine Funktion einen Wert zurückgibt, kann der dies implizieren. Eine Funktion, die eine Liste von Produkten abruft, könnte `getProducts()` heißen. Wenn sie jedoch nur prüft, ob ein Produkt verfügbar ist, wäre `isProductAvailable()` ein besserer . Diese Konventionen erleichtern das Verständnis, auch ohne die Implementierung der Funktion selbst zu sehen.

Die Verwendung von Präfixen oder Suffixen kann ebenfalls helfen, die Art eines Elements zu kennzeichnen, besonders wenn die Konventionen des Teams dies erfordern. Zum könnten Konstanten in PHP oft mit `APP_` beginnen oder in Großbuchstaben geschrieben sein (`MAX_ITEMS`). Ähnliche Konventionen existieren auch für JavaScript-Frameworks oder Bibliotheken. Wichtig ist die konsequente Anwendung der gewählten Konvention.

2. Funktionen sollten klein und fokussiert sein

Eine der effektivsten Methoden, um Code verständlich und wartbar zu machen, ist die Zerlegung großer Funktionen in kleinere, spezialisierte Einheiten. Eine Funktion sollte im Idealfall nur eine einzige Sache tun und das gut. Wenn eine Funktion zu viele Aufgaben übernimmt, wird sie schnell unübersichtlich, schwer zu testen und zu verstehen. Kleine Funktionen sind wie LEGO-Bausteine: Sie können leicht ausgetauscht, wiederverwendet und kombiniert werden, um komplexere Funktionalitäten zu erstellen.

Stellen Sie sich eine Funktion vor, die nicht nur Benutzerdaten abruft, sondern diese auch validiert, formatiert und dann in die Datenbank schreibt. Diese Funktion ist ein wahrer Monolith! Wenn wir sie in kleinere Funktionen aufteilen – z.B. `fetchUserData`, `validateUserData`, `formatUserData` und `saveUserData` –, wird jede einzelne Einheit leicht verständlich und isoliert testbar. Dies reduziert die Komplexität erheblich und macht es einfacher, Fehler zu finden und zu beheben, da die Fehlerquelle oft auf eine einzige, kleine Funktion eingegrenzt werden kann.

In PHP könnte eine Funktion, die eine E-Mail versendet, viele Schritte beinhalten: Empfängeradresse ermitteln, Betreff erstellen, Nachrichtentext formatieren, Anhänge hinzufügen und schließlich den Versand über einen Mail-Server auslösen. Diese könnten alle in separate, kleinere Funktionen aufgeteilt werden, wie `getRecipientAddress()`, `buildEmailSubject()`, `formatEmailBody()`, `attachFiles()` und `sendEmail()`. Dies verbessert die Lesbarkeit und ermöglicht eine einfachere Wiederverwendung einzelner Teile, z.B. des Formatierungsteils für andere Kommunikationsmethoden.

Für JavaScript gilt das Gleiche. Eine Funktion, die ein Formular verarbeitet, könnte: die Eingabewerte sammeln, diese auf Gültigkeit prüfen, die Daten an einen Server senden und eine Erfolgs- oder Fehlermeldung anzeigen. Diese Schritte können in separate Funktionen extrahiert werden: `getFormData()`, `validateFormInputs()`, `submitFormDataToServer()` und `displayFormResult()`. Dies macht die Hauptfunktion, die diese kleineren Funktionen aufruft, zu einer klaren Orchestrierung von Schritten, deren einzelne Logik leicht zugänglich ist.

Die Beibehaltung von Funktionen auf einer kleinen Größe ist ein fortlaufender Prozess. Wenn Sie feststellen, dass eine Funktion immer länger wird oder mehr als eine Aufgabe zu erfüllen scheint, ist dies ein starkes Signal, dass sie refaktorisiert werden sollte. Die Reduzierung der Funktionsgröße ist ein Kernprinzip, das die Gesamtqualität und Wartbarkeit Ihres Codes drastisch verbessert.

H3: Parameterzahl minimieren

Eine Funktion mit zu vielen Parametern ist oft ein Indikator dafür, dass sie mehr als eine Aufgabe erfüllt oder dass die Parameter selbst nicht gut strukturiert sind. Jede zusätzliche Parametererhöhung macht eine Funktion komplexer und schwieriger zu benutzen. Wenn eine Funktion fünf oder mehr Parameter hat, sollten Sie ernsthaft darüber nachdenken, diese zu gruppieren oder die Funktion in kleinere Einheiten aufzuteilen, die weniger Parameter benötigen. Ein guter Richtwert ist, dass Funktionen idealerweise nur null, ein oder zwei Parameter haben sollten.

Stellen Sie sich eine Funktion vor, die einen Benutzer erstellt und dabei `firstName`, `lastName`, `email`, `password`, `street`, `city`, `zipCode`, `country`, `phoneNumber`, `birthDate` als einzelne Parameter entgegennimmt. Das ist ein Albtraum! Besser wäre es, die Adressinformationen in einem separaten Objekt zu bündeln, wie z.B. `address` mit Feldern `street`, `city` etc. So würde die Funktion nur noch `firstName`, `lastName`, `email`, `password` und das `address`-Objekt benötigen. Dies reduziert die Anzahl der direkten Parameter und verbessert die Organisation der Daten.

In PHP könnte dies bedeuten, dass eine Funktion, die einen Bestellvorgang abwickelt, statt vieler einzelner Parameter für Versandadresse, Zahlungsdetails, Artikel etc., ein einziges `Order` oder `CheckoutData` Objekt entgegennimmt, das all diese Informationen strukturiert enthält. Die offizielle PHP-Dokumentation zu Objekten und Klassen ist eine hervorragende Ressource, um zu verstehen, wie Datenobjekte effektiv genutzt werden können. PHP Objektorientierte Programmierung

Für JavaScript ist das Prinzip dasselbe. Eine Funktion, die ein UI-Element aktualisiert, könnte viele Konfigurationsparameter erhalten. Besser ist es, ein Konfigurationsobjekt zu verwenden, das alle relevanten Einstellungen enthält, wie z.B. „. Die Funktion würde dann nur dieses eine Objekt als Parameter erhalten. Die Verwendung von Objekten als Parameter ist eine mächtige Technik, um die Lesbarkeit und Flexibilität von Funktionen zu erhöhen, wie auch in den offiziellen Dokumentationen zu JavaScript-Funktionen beschrieben. JavaScript Arrow Functions und Parameter

Wenn eine Funktion viele boolesche Flags als Parameter benötigt, um ihr Verhalten zu steuern, ist das oft ein Zeichen dafür, dass die Funktion zu viele verschiedene Pfade hat. Es wäre besser, die Logik in separate, kleinere Funktionen aufzuteilen, die jeweils nur eine spezifische Aufgabe erfüllen und keine Flags benötigen.

H3: Vermeidung von Seiteneffekten

Eine Funktion, die außer dem Zurückgeben eines Wertes noch andere Dinge tut – wie das Ändern einer globalen Variable, das Schreiben in eine Datei, das Ändern eines Objekts, das ihr nicht gehört, oder das Ausgeben von etwas auf die Konsole –, hat Seiteneffekte. Funktionen mit Seiteneffekten sind schwerer zu verstehen, zu testen und zu debuggen, da ihr Verhalten nicht nur vom Input abhängt, sondern auch vom aktuellen Zustand des Systems. Der ideale Fall ist, dass eine Funktion nur einen Zweck hat: einen Wert zurückzugeben, der von ihrem Input abhängt.

Betrachten Sie eine Funktion `updateCounter()`, die eine globale Variable `counter` erhöht. Wenn Sie diese Funktion in verschiedenen Teilen Ihres Programms aufrufen, ändern Sie unbemerkt den Zustand des gesamten Programms. Dies kann zu unerwartetem Verhalten führen. Eine bessere Herangehensweise wäre, die Funktion so zu gestalten, dass sie den aktuellen Zählerwert als Parameter erhält und den neuen Wert zurückgibt, z.B. `newCounter = updateCounter(currentCounter)`. Dies macht den Datenfluss explizit und vermeidet unerwünschte Änderungen am globalen Zustand.

In PHP sollten Sie Funktionen so gestalten, dass sie Datenmodelle oder Objekte nicht direkt verändern, es sei denn, dies ist explizit ihre Aufgabe (z.B. eine `save()` Methode eines Objekts). Wenn eine Funktion Daten aus einer Datenbank abruft, sollte sie diese Daten zurückgeben und nicht die ursprünglichen Daten in der Datenbank ändern. Für Änderungen sollten separate Funktionen oder Methoden zuständig sein. Dies unterstützt das Prinzip der „reinen Funktionen“, die in der funktionalen Programmierung hoch geschätzt werden und auch in objektorientierten Sprachen wie PHP Vorteile bringen. PHP Funktionen

Für JavaScript gilt dasselbe. Eine Funktion, die das DOM manipuliert und gleichzeitig einen Wert zurückgibt, kann zu unerwarteten Problemen führen. Wenn eine Funktion das DOM modifiziert, sollte dies ihre Hauptaufgabe sein und sie sollte idealerweise keinen Wert zurückgeben, der für andere Teile des Programms kritisch ist. Wenn ein Wert zurückgegeben werden muss, sollte die DOM-Manipulation ein Nebeneffekt sein, der sorgfältig dokumentiert ist und die Auswirkungen auf den Rest des Codes minimiert. Die offizielle MDN-Dokumentation bietet viele Beispiele für DOM-Manipulationen und wie man diese organisiert. MDN Web Docs: Document Object Model

Eine weitere Form von Seiteneffekten sind Fehler. Wenn eine Funktion Fehler wirft, sollten diese Fehler explizit behandelt werden. Eine Funktion, die ohne klare Fehlerbehandlung funktioniert, kann zu unerwarteten Programmabbrüchen führen. Das Prinzip ist , dass die Funktion entweder erfolgreich arbeitet und einen Wert zurückgibt, oder sie gibt einen Fehler zurück, der dann vom aufrufenden Code behandelt wird.

3. Kommentar-freie Programmierung (wo möglich)

Das Ziel von Clean Code ist, dass der Code so selbsterklärend ist, dass er Kommentare überflüssig macht. Kommentare sind oft ein Zeichen dafür, dass der Code nicht klar genug ist. Sie können außerdem veralten und widersprüchliche Informationen enthalten, was zu noch mehr Verwirrung führt. Wenn Sie das Gefühl haben, einen Kommentar schreiben zu müssen, um zu erklären, was eine Codezeile tut, ist das oft ein Hinweis darauf, dass die Codezeile selbst umgeschrieben werden sollte. Dies kann durch aussagekräftigere Namen oder die Aufteilung in kleinere, klarere Funktionen geschehen.

Anstatt einen Kommentar wie `// wird der Benutzername geholt und an die Variable user_name zugewiesen` zu schreiben, wäre es viel besser, die Variable einfach `userName` zu nennen und die Funktion `getUserName()`. Der Code würde sich selbst erklären: `userName = getUserName();`. Dies ist prägnanter und weniger fehleranfällig, da Kommentare leicht vergessen werden, wenn der Code geändert wird.

Es gibt jedoch Ausnahmen von dieser Regel. Kommentare sind nützlich, um die Absicht hinter komplexer Logik zu erläutern, die nicht einfach durch Benennung ausgedrückt werden kann, oder um auf potenzielle Fallstricke oder zukünftige Verbesserungen hinzuweisen. Diese Art von Kommentaren sollte jedoch sparsam und mit Bedacht eingesetzt werden. Sie sollten immer noch einen klaren Mehrwert bieten, der über das hinausgeht, was der Code selbst aussagt.

In PHP und JavaScript gibt es verschiedene Arten von Kommentaren, aber die Philosophie bleibt dieselbe: Wenn Sie den Code besser

Autorin

Laura Schneider

Content Creator @ Taurus Software

info@taurus-software.de