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

Clean Code verstehen: Funktionen ⚡

WBOYOriginal: 2024-08-16 06:11:36646Durchsuche

Understanding Clean Code: Functions ⚡

In der Softwareentwicklung sind Funktionen die Bausteine jeder Anwendung. Sie sind die wichtigste Art und Weise, wie wir unsere Logik strukturieren, Verhalten kapseln und komplexe Aufgaben in überschaubare Teile unterteilen.

Allerdings sind nicht alle Funktionen gleich. In Kapitel 3 von Clean Code liegt der Schwerpunkt auf dem Schreiben von Aufgaben, die klein und fokussiert sind und eine Sache gut erledigen.

In diesem Artikel befassen wir uns mit diesen Prinzipien und untersuchen, wie man sie in JavaScript anwendet.

?1. Kleine Funktionen: Weniger ist mehr

Ein zentraler Grundsatz von Clean Code ist, dass Funktionen klein sein sollten.

Aber was bedeutet „klein“ in diesem Zusammenhang? Der Autor plädiert für Funktionen, die typischerweise nur wenige Zeilen lang sind.

Die Idee ist, dass eine kleine Funktion leichter zu verstehen, zu testen und zu warten ist.

Sehen wir uns ein Beispiel in JavaScript an:

// Bad Example: A large, unfocused function
function processOrder(order) {
    applyDiscount(order);
    calculateShipping(order);
    calculateTax(order);
    generateInvoice(order);
    sendConfirmationEmail(order);
    updateInventory(order);
}

Diese Funktion scheint zwar unkompliziert zu sein, macht aber zu viel. Jede dieser Aufgaben könnte und sollte in eine eigene Funktion unterteilt werden.

// Good Example: Small, focused functions
function processOrder(order) {
    applyDiscount(order);
    calculateShipping(order);
    calculateTax(order);
    generateInvoice(order);
    sendConfirmationEmail(order);
    updateInventory(order);
}

function applyDiscount(order) {
    // Discount logic
}

function calculateShipping(order) {
    // Shipping calculation logic
}

function calculateTax(order) {
    // Tax calculation logic
}

function generateInvoice(order) {
    // Invoice generation logic
}

function sendConfirmationEmail(order) {
    // Email sending logic
}

function updateInventory(order) {
    // Inventory update logic
}

Im überarbeiteten Beispiel führt jede Funktion eine Aufgabe durch, wodurch der Code einfacher zu lesen und zu warten ist.

Die Funktion „processOrder“ dient jetzt als übergeordneter Orchestrator, während kleinere, fokussiertere Funktionen die Details verwalten.

?2. Eine Sache tun

Eine Funktion sollte eine Sache tun und zwar gut. Wenn Sie feststellen, dass Sie eine Funktion schreiben, die mehrere Aufgaben ausführt, ist das ein Zeichen dafür, dass Sie sie in kleinere Funktionen umgestalten sollten.

Hier ist ein Beispiel:

// Bad Example: A function doing multiple things
function formatAndSendEmail(email, subject, message) {
    const formattedMessage = `<html><body>${message}</body></html>`;
    sendEmail(email, subject, formattedMessage);
}

Obwohl diese Funktion prägnant erscheint, erledigt sie zwei Dinge: die Formatierung der Nachricht und das Senden der E-Mail. Teilen Sie es stattdessen auf:

// Good Example: Functions doing one thing
function formatMessage(message) {
    return `<html><body>${message}</body></html>`;
}

function sendFormattedEmail(email, subject, message) {
    const formattedMessage = formatMessage(message);
    sendEmail(email, subject, formattedMessage);
}

Jetzt hat jede Funktion eine einzige Verantwortung, was das Testen und Wiederverwenden des Codes erleichtert.

Die formatMessage-Funktion kann unabhängig von der E-Mail-Versandlogik getestet werden.

?3. Vermeiden Sie Nebenwirkungen

Funktionen sollten Nebenwirkungen minimieren, das heißt, sie sollten den Zustand des Systems nicht auf unerwartete Weise verändern. Funktionen mit Nebenwirkungen können schwieriger zu debuggen und zu überdenken sein.

Hier ist ein Beispiel:

// Bad Example: A function with a side effect
let globalCounter = 0;

function incrementCounter() {
    globalCounter++;
}

Die incrementCounter-Funktion ändert den globalen Status, was bei unsachgemäßer Verwaltung zu Fehlern führen kann.

Ein besserer Ansatz besteht darin, einen neuen Wert zurückzugeben und den Aufrufer entscheiden zu lassen, was damit geschehen soll:

// Good Example: Avoiding side effects
function incrementCounter(counter) {
    return counter + 1;
}

globalCounter = incrementCounter(globalCounter);

Indem Sie Nebenwirkungen vermeiden, machen Sie Ihre Funktionen vorhersehbarer und einfacher zu handhaben.

?4. Einzelne Abstraktionsebene

Funktionen sollten auf einer einzigen Abstraktionsebene arbeiten. Das Mischen verschiedener Detailebenen innerhalb derselben Funktion kann das Verständnis erschweren.

Zum Beispiel:

// Bad Example: Mixed levels of abstraction
function getUserData(userId) {
    const user = database.fetchUserById(userId); // Low-level
    return `${user.firstName} ${user.lastName} (${user.email})`; // High-level
}

Hier mischt die Funktion den Low-Level-Datenbankabruf mit der High-Level-Formatierung der Benutzerdaten.

Es ist besser, diese Bedenken zu trennen:

// Good Example: Single level of abstraction
function getUser(userId) {
    return database.fetchUserById(userId);
}

function formatUserData(user) {
    return `${user.firstName} ${user.lastName} (${user.email})`;
}

const user = getUser(userId);
const formattedUserData = formatUserData(user);

Jetzt arbeitet jede Funktion auf einer einzigen Abstraktionsebene, wodurch der Code klarer und einfacher zu warten ist.

Fazit ⚡

Das Schreiben sauberer Funktionen ist ein Eckpfeiler beim Schreiben von wartbarem Code.

Indem Sie die Funktionen klein halten, sicherstellen, dass sie eine Aufgabe erfüllen, Nebenwirkungen vermeiden und eine einzige Abstraktionsebene beibehalten, können Sie Code erstellen, der einfacher zu lesen, zu verstehen und zu warten ist.

Behalten Sie beim weiteren Verfeinern Ihrer JavaScript-Kenntnisse diese Prinzipien von Clean Code im Hinterkopf, um Funktionen zu schreiben, die wirklich die Kunst der Einfachheit und Klarheit verkörpern.

Das obige ist der detaillierte Inhalt vonClean Code verstehen: Funktionen ⚡. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript less if for while break continue function this idea database

Stellungnahme：

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

Vorheriger Artikel：Sie möchten also Webentwickler werden? Das müssen Sie wissen!Nächster Artikel：Sie möchten also Webentwickler werden? Das müssen Sie wissen!

In Verbindung stehende Artikel

Mehr sehen