Heim > Web-Frontend > js-Tutorial > Clean Code verstehen: Formatieren ⚡️

Clean Code verstehen: Formatieren ⚡️

王林
Freigeben: 2024-08-19 17:07:33
Original
291 Leute haben es durchsucht

Understanding Clean Code: Formatting ⚡️

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.


? Warum Formatierung wichtig ist

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.


? Schlüsselprinzipien der Codeformatierung

? 1. Vertikale Offenheit: Zusammengehöriger Code gruppieren

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);
}
Nach dem Login kopieren

In diesem Beispiel ist jeder Schritt in der Funktion „processOrder“ durch eine Leerzeile getrennt, wodurch die verschiedenen Phasen des Prozesses klar abgegrenzt werden.


? 2. Horizontale Offenheit: Code für Klarheit ausrichten

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;
Nach dem Login kopieren

Durch die Ausrichtung der Variablendeklarationen auf diese Weise ist es einfacher, auf einen Blick zu erkennen, was jede Variable darstellt.


? 3. Einrückung: Code hierarchisch strukturieren

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;
    }
}
Nach dem Login kopieren

Hier ist die if-else-Struktur eingerückt, um anzuzeigen, dass die Return-Anweisungen Teil der bedingten Logik sind.


? 4. Leitungslänge: Überschaubar halten

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}`;
Nach dem Login kopieren

Das Aufteilen der Zeichenfolge auf mehrere Zeilen erhöht die Lesbarkeit, insbesondere wenn die Zeichenfolge mehrere Variablen enthält.


? 5. Konsistente Verstrebung: Weniger Unordnung

Der Verstrebungsstil ist ein weiterer Bereich, in dem Konsistenz entscheidend ist. Die beiden gängigen Stile sind:

  • K&R-Stil:Öffnende geschweifte Klammer in derselben Zeile wie die Anweisung.
  • Allman-Stil:Öffnende geschweifte Klammer in einer neuen Zeile.

Beispiel für K&R-Stil:

function add(a, b) {
    return a + b;
}
Nach dem Login kopieren

Beispiel für den Allman-Stil:

function add(a, b) 
{
    return a + b;
}
Nach dem Login kopieren

Wählen Sie einen Stil und bleiben Sie in Ihrer gesamten Codebasis dabei. Konsistenz ist wichtiger als der spezifische Stil.


? 6. Vermeiden Sie dichten Code: Lassen Sie Raum zum Atmen

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();
}
Nach dem Login kopieren

Die zweite Version ist besser lesbar, da sich der Funktionsaufruf in einer separaten Zeile von der Bedingung befindet.



Fazit ✅

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!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage