Grundlegende JavaScript-Refactoring-Techniken für saubereren und effizienteren Code

Als Bestsellerautor lade ich Sie ein, meine Bücher auf Amazon zu erkunden. Vergessen Sie nicht, mir auf Medium zu folgen und Ihre Unterstützung zu zeigen. Danke schön! Ihre Unterstützung bedeutet die Welt!

JavaScript-Refactoring ist eine entscheidende Fähigkeit für Entwickler, die die Qualität und Wartbarkeit ihres Codes verbessern möchten. Da ich im Laufe der Jahre an zahlreichen Projekten gearbeitet habe, habe ich festgestellt, dass die konsequente Implementierung dieser Techniken zu robusteren und effizienteren Codebasen führt.

Die Code-Geruchserkennung ist oft der erste Schritt im Refactoring-Prozess. Ich verlasse mich auf Tools wie ESLint und SonarQube, um potenzielle Probleme in meinem Code zu identifizieren. Diese Tools helfen mir, Probleme wie ungenutzte Variablen, komplexe Funktionen und inkonsistentes Styling zu erkennen. Hier ist ein Beispiel dafür, wie ich ESLint in meinen Projekten eingerichtet habe:

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: ['eslint:recommended', 'plugin:react/recommended'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {
    // Custom rules
    'no-unused-vars': 'error',
    'max-len': ['error', { code: 100 }],
    'complexity': ['error', 10],
  },
};

Sobald ich potenzielle Probleme identifiziert habe, gehe ich zu spezifischen Refactoring-Techniken über. Die Extraktionsmethode ist eine der gebräuchlichsten und effektivsten Techniken, die ich verwende. Dabei werden große, komplexe Funktionen in kleinere, fokussiertere Funktionen zerlegt. Dies verbessert nicht nur die Lesbarkeit, sondern macht den Code auch wiederverwendbar und einfacher zu testen.

Betrachten Sie dieses Beispiel einer Funktion, die den Gesamtpreis von Artikeln in einem Warenkorb berechnet:

function calculateTotalPrice(items) {
  let total = 0;
  for (let item of items) {
    let price = item.price;
    if (item.onSale) {
      price *= 0.9;
    }
    if (item.quantity > 5) {
      price *= 0.95;
    }
    total += price * item.quantity;
  }
  return total;
}

Wir können dies mithilfe der Extraktionsmethode umgestalten:

function calculateTotalPrice(items) {
  return items.reduce((total, item) => total + calculateItemPrice(item), 0);
}

function calculateItemPrice(item) {
  let price = applyDiscounts(item.price, item);
  return price * item.quantity;
}

function applyDiscounts(price, item) {
  if (item.onSale) price *= 0.9;
  if (item.quantity > 5) price *= 0.95;
  return price;
}

Diese überarbeitete Version ist besser lesbar und ermöglicht ein einfacheres Testen einzelner Komponenten.

Eine weitere leistungsstarke Technik, die ich häufig verwende, ist das Ersetzen von Bedingungen durch Polymorphismus. Dieser Ansatz ist besonders nützlich, wenn es um komplexe bedingte Logik geht, die je nach Objekttyp variiert. Anstatt if-else-Anweisungen oder Switch-Fälle zu verwenden, können wir objektorientierte Prinzipien verwenden, um eine flexiblere und erweiterbare Lösung zu schaffen.

Hier ist ein Beispiel dafür, wie ich eine Funktion umgestalten könnte, die die Versandkosten basierend auf der Art des Produkts berechnet:

// Before refactoring
function calculateShippingCost(product) {
  if (product.type === 'book') {
    return product.weight * 0.5;
  } else if (product.type === 'electronics') {
    return product.weight * 0.8 + 2;
  } else if (product.type === 'clothing') {
    return product.weight * 0.3;
  }
  return product.weight * 0.6; // Default shipping cost
}

// After refactoring
class Product {
  constructor(weight) {
    this.weight = weight;
  }

  calculateShippingCost() {
    return this.weight * 0.6;
  }
}

class Book extends Product {
  calculateShippingCost() {
    return this.weight * 0.5;
  }
}

class Electronics extends Product {
  calculateShippingCost() {
    return this.weight * 0.8 + 2;
  }
}

class Clothing extends Product {
  calculateShippingCost() {
    return this.weight * 0.3;
  }
}

// Usage
const book = new Book(2);
console.log(book.calculateShippingCost()); // 1

const electronics = new Electronics(3);
console.log(electronics.calculateShippingCost()); // 4.4

Dieser polymorphe Ansatz erleichtert das Hinzufügen neuer Produkttypen ohne Änderung des vorhandenen Codes unter Einhaltung des Offen/Geschlossen-Prinzips.

Die Technik „Introduce Parameter Object“ ist besonders nützlich, wenn es um Funktionen geht, die viele Parameter benötigen. Durch die Gruppierung verwandter Parameter in einem einzigen Objekt können wir Funktionssignaturen vereinfachen und unseren Code wartbarer machen.

Hier ist ein Beispiel dafür, wie ich eine Funktion umgestalten könnte, die ein Benutzerkonto erstellt:

// Before refactoring
function createUser(firstName, lastName, email, password, birthDate, country, city, zipCode) {
  // User creation logic
}

// After refactoring
function createUser(userDetails, address) {
  // User creation logic
}

// Usage
createUser(
  { firstName: 'John', lastName: 'Doe', email: 'john@example.com', password: 'securepass', birthDate: '1990-01-01' },
  { country: 'USA', city: 'New York', zipCode: '10001' }
);

Diese überarbeitete Version ist nicht nur besser lesbar, sondern auch flexibler, da es einfacher ist, Felder hinzuzufügen oder zu entfernen, ohne die Funktionssignatur zu ändern.

Das Entfernen von doppeltem Code ist ein wichtiger Aspekt des Refactorings, den ich immer im Hinterkopf habe. Doppelter Code kann zu Inkonsistenzen führen und die Wartung erschweren. Ich extrahiere häufig gemeinsame Funktionen in gemeinsame Funktionen oder Module.

Hier ist ein Beispiel dafür, wie ich duplizierten Code in einer React-Komponente umgestalten könnte:

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: ['eslint:recommended', 'plugin:react/recommended'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {
    // Custom rules
    'no-unused-vars': 'error',
    'max-len': ['error', { code: 100 }],
    'complexity': ['error', 10],
  },
};

Dieses Refactoring eliminiert Duplikate und macht den Code wartbarer und konsistenter.

Das Umbenennen von Variablen und Funktionen ist eine einfache, aber leistungsstarke Technik, die ich häufig verwende. Klare, beschreibende Namen können das Codeverständnis erheblich verbessern und als Form der Selbstdokumentation dienen. Ich bemühe mich immer, Namen zu verwenden, die den Zweck oder das Verhalten der Variablen oder Funktion genau beschreiben.

Zum Beispiel statt:

function calculateTotalPrice(items) {
  let total = 0;
  for (let item of items) {
    let price = item.price;
    if (item.onSale) {
      price *= 0.9;
    }
    if (item.quantity > 5) {
      price *= 0.95;
    }
    total += price * item.quantity;
  }
  return total;
}

Ich würde umgestalten zu:

function calculateTotalPrice(items) {
  return items.reduce((total, item) => total + calculateItemPrice(item), 0);
}

function calculateItemPrice(item) {
  let price = applyDiscounts(item.price, item);
  return price * item.quantity;
}

function applyDiscounts(price, item) {
  if (item.onSale) price *= 0.9;
  if (item.quantity > 5) price *= 0.95;
  return price;
}

Diese einfache Änderung macht den Zweck der Funktion sofort klar, ohne dass zusätzliche Kommentare erforderlich sind.

Schließlich ist die Vereinfachung komplexer Ausdrücke eine Technik, die ich verwende, um meinen Code lesbarer und wartbarer zu machen. Das Zerlegen komplexer logischer Ausdrücke in kleinere, besser verwaltbare Teile mithilfe von Zwischenvariablen oder -funktionen kann die Klarheit des Codes erheblich verbessern.

Hier ist ein Beispiel dafür, wie ich eine komplexe Bedingung umgestalten könnte:

// Before refactoring
function calculateShippingCost(product) {
  if (product.type === 'book') {
    return product.weight * 0.5;
  } else if (product.type === 'electronics') {
    return product.weight * 0.8 + 2;
  } else if (product.type === 'clothing') {
    return product.weight * 0.3;
  }
  return product.weight * 0.6; // Default shipping cost
}

// After refactoring
class Product {
  constructor(weight) {
    this.weight = weight;
  }

  calculateShippingCost() {
    return this.weight * 0.6;
  }
}

class Book extends Product {
  calculateShippingCost() {
    return this.weight * 0.5;
  }
}

class Electronics extends Product {
  calculateShippingCost() {
    return this.weight * 0.8 + 2;
  }
}

class Clothing extends Product {
  calculateShippingCost() {
    return this.weight * 0.3;
  }
}

// Usage
const book = new Book(2);
console.log(book.calculateShippingCost()); // 1

const electronics = new Electronics(3);
console.log(electronics.calculateShippingCost()); // 4.4

Diese überarbeitete Version ist viel einfacher zu lesen und zu verstehen, und jede Bedingung kann unabhängig getestet werden.

Meiner Erfahrung nach führt die konsequente Anwendung dieser Refactoring-Techniken zu erheblichen Verbesserungen der Codequalität. Das Ergebnis ist Code, der einfacher zu verstehen, zu warten und zu erweitern ist. Es ist jedoch wichtig zu bedenken, dass Refactoring ein fortlaufender Prozess ist. Wenn sich Anforderungen ändern und neue Funktionen hinzugefügt werden, müssen wir unseren Code kontinuierlich überprüfen und umgestalten, um ihn sauber und effizient zu halten.

Einer der Hauptvorteile, die ich beim regelmäßigen Refactoring festgestellt habe, ist, dass es das Hinzufügen neuer Funktionen oder das Beheben von Fehlern viel einfacher macht. Wenn der Code gut strukturiert und leicht verständlich ist, ist es viel schneller, den Bereich zu finden, der geändert werden muss, und die notwendigen Änderungen vorzunehmen, ohne dass neue Fehler entstehen.

Darüber hinaus führt Refactoring häufig zu Leistungsverbesserungen. Durch die Vereinfachung komplexer Logik und die Beseitigung von Redundanzen können wir häufig dafür sorgen, dass unser Code schneller ausgeführt wird und weniger Ressourcen verbraucht. Dies ist besonders wichtig bei JavaScript, wo die Leistung einen erheblichen Einfluss auf die Benutzererfahrung haben kann, insbesondere in Browserumgebungen.

Ein weiterer Aspekt des Refactorings, den ich besonders wertvoll finde, ist die Art und Weise, wie es den Wissensaustausch innerhalb eines Teams erleichtert. Wenn der Code sauber und gut strukturiert ist, ist er für andere Entwickler einfacher zu verstehen und damit zu arbeiten. Dies führt zu einer besseren Zusammenarbeit und kann den Zeitaufwand für die Einarbeitung neuer Teammitglieder erheblich verkürzen.

Es ist auch erwähnenswert, dass diese Techniken zwar wirkungsvoll sind, aber mit Bedacht angewendet werden sollten. Over-Engineering kann genauso problematisch sein wie Under-Engineering. Das Ziel besteht darin, die richtige Balance zu finden – den Code so einfach und klar wie möglich zu machen, aber nicht einfacher.

Zusammenfassend lässt sich sagen, dass die Beherrschung dieser JavaScript-Refactoring-Techniken in meiner Karriere als Entwickler von unschätzbarem Wert war. Sie haben mir geholfen, besseren Code zu schreiben, effizienter zu arbeiten und effektiver mit meinen Teams zusammenzuarbeiten. Auch wenn es manchmal verlockend sein kann, die Entwicklung zu überstürzen, um Fristen einzuhalten, habe ich festgestellt, dass es sich auf lange Sicht auszahlt, sich die Zeit für regelmäßige Umgestaltungen zu nehmen. Dies führt zu robusteren, wartbareren Codebasen, die sich an sich ändernde Anforderungen anpassen und mit dem Wachstum von Projekten skalieren können. Da wir die Grenzen dessen, was mit JavaScript möglich ist, immer weiter ausdehnen, werden diese Refactoring-Techniken weiterhin unverzichtbare Werkzeuge im Toolkit jedes Entwicklers bleiben.

---

101 Bücher

101 Books ist ein KI-gesteuerter Verlag, der vom Autor Aarav Joshi mitbegründet wurde. Durch den Einsatz fortschrittlicher KI-Technologie halten wir unsere Veröffentlichungskosten unglaublich niedrig – einige Bücher kosten nur 4$ – und machen so hochwertiges Wissen für jedermann zugänglich.

Schauen Sie sich unser Buch Golang Clean Code an, das bei Amazon erhältlich ist.

Bleiben Sie gespannt auf Updates und spannende Neuigkeiten. Wenn Sie Bücher kaufen, suchen Sie nach Aarav Joshi, um weitere unserer Titel zu finden. Nutzen Sie den bereitgestellten Link, um von Spezialrabatten zu profitieren!

Unsere Kreationen

Schauen Sie sich unbedingt unsere Kreationen an:

Investor Central | Investor Zentralspanisch | Investor Mitteldeutsch | Intelligentes Leben | Epochen & Echos | Rätselhafte Geheimnisse | Hindutva | Elite-Entwickler | JS-Schulen

---

Wir sind auf Medium

Tech Koala Insights | Epochs & Echoes World | Investor Central Medium | Puzzling Mysteries Medium | Wissenschaft & Epochen Medium | Modernes Hindutva

Das obige ist der detaillierte Inhalt vonGrundlegende JavaScript-Refactoring-Techniken für saubereren und effizienteren Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!