Heim >Web-Frontend >js-Tutorial >Clean Code verstehen: Formatieren ⚡️
In der Softwareentwicklung ist Code nicht nur für Maschinen, sondern auch für Menschen gedacht.
Die richtige Codeformatierung ist entscheidend für die Lesbarkeit und Wartbarkeit.
In Kapitel 5 von Clean Code werden diese Prinzipien erörtert und der Schwerpunkt auf der Bedeutung der Formatierung für professionellen Code gelegt.
Bei der richtigen Formatierung geht es nicht nur um die Ästhetik; es geht um Klarheit. Gut formatierter Code:
Verbessert die Lesbarkeit: Andere Entwickler (oder Ihr zukünftiges Ich) können schnell verstehen, was der Code bewirkt.
Verbessert die Wartbarkeit: Sauber formatierter Code lässt sich einfacher aktualisieren, umgestalten und debuggen.
Fördert die Konsistenz:Konsistenter Code ist vorhersehbar und reduziert die kognitive Belastung für jeden, der ihn liest.
Vertikale Offenheit bezieht sich auf die Verwendung von Leerzeilen, um verschiedene Codeblöcke zu trennen und so die Unterscheidung verschiedener Abschnitte zu erleichtern.
Beispiel:
function processOrder(order) { // Validate the order if (!validateOrder(order)) { throw new Error("Invalid order"); } // Process payment const paymentResult = processPayment(order); // Update inventory updateInventory(order); // Notify customer notifyCustomer(order); }
In diesem Beispiel ist jeder Schritt in der Funktion „processOrder“ durch eine Leerzeile getrennt, wodurch die verschiedenen Phasen des Prozesses klar abgegrenzt werden.
Horizontale Offenheit bedeutet, den Code horizontal auszurichten, um ihn besser lesbar zu machen, insbesondere wenn es um ähnliche oder verwandte Aussagen geht.
Beispiel:
const productName = "Laptop"; const productPrice = 999.99; const productStock = 50;
Durch die Ausrichtung der Variablendeklarationen auf diese Weise ist es einfacher, auf einen Blick zu erkennen, was jede Variable darstellt.
Einrückungen sind der Schlüssel zur Darstellung der hierarchischen Struktur des Codes. Es hilft Lesern, zusammengehörige Codeblöcke wie Schleifen, Bedingungen und Funktionen schnell zu identifizieren.
Beispiel:
function calculateDiscount(price) { if (price > 100) { return price * 0.1; } else { return 0; } }
Hier ist die if-else-Struktur eingerückt, um anzuzeigen, dass die Return-Anweisungen Teil der bedingten Logik sind.
Lange Codezeilen können schwer zu lesen und zu verstehen sein. Als allgemeine Regel gilt, dass Zeilen weniger als 80–100 Zeichen lang sein sollten. Wenn eine Zeile zu lang ist, sollten Sie sie unterbrechen.
Beispiel:
// Instead of this: const orderSummary = `Order for ${customer.name}, Total: $${order.total}, Items: ${order.items.length}`; // Do this: const orderSummary = `Order for ${customer.name}, Total: $${order.total}, Items: ${order.items.length}`;
Das Aufteilen der Zeichenfolge auf mehrere Zeilen erhöht die Lesbarkeit, insbesondere wenn die Zeichenfolge mehrere Variablen enthält.
Der Verstrebungsstil ist ein weiterer Bereich, in dem Konsistenz entscheidend ist. Die beiden gängigen Stile sind:
Beispiel für K&R-Stil:
function add(a, b) { return a + b; }
Beispiel für den Allman-Stil:
function add(a, b) { return a + b; }
Wählen Sie einen Stil und bleiben Sie in Ihrer gesamten Codebasis dabei. Konsistenz ist wichtiger als der spezifische Stil.
Dichter Code, bei dem zu viele Vorgänge auf kleinem Raum untergebracht sind, kann schwer lesbar sein. Verbreiten Sie Ihren Code, um ihn zugänglicher zu machen.
Beispiel:
// Dense code if (user.isLoggedIn) { user.showDashboard(); } // Better if (user.isLoggedIn) { user.showDashboard(); }
Die zweite Version ist besser lesbar, da sich der Funktionsaufruf in einer separaten Zeile von der Bedingung befindet.
Formatierung ist wichtig für die Lesbarkeit und Wartbarkeit des Codes.
Wenn Sie den Grundsätzen von Clean Code folgen, können Sie Ihren JavaScript-Code professioneller und einfacher zu verstehen und zu bearbeiten machen.
Viel Spaß beim Programmieren!
Das obige ist der detaillierte Inhalt vonClean Code verstehen: Formatieren ⚡️. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!