Tipps zum JavaScript-Refactoring

John Au-Yeung
Quelle: mittel
Übersetzer: Xiaozhi am vorderen Ende

Liken und erneut lesen, um eine Gewohnheit zu entwickeln

Dies ArtikelGitHub https://github.com/qq44924588... wurde hinzugefügt, weitere Kategorien früherer hochgelobter Artikel und viele meiner Dokumente und Tutorial-Materialien wurden ebenfalls zusammengestellt. Willkommen bei Star and Perfect. Sie können sich während des Interviews auf die Testpunkte beziehen. Ich hoffe, wir können gemeinsam etwas lernen.

JavaScript ist eine leicht zu erlernende Programmiersprache und es ist einfach, Programme zu schreiben, die ausgeführt werden und etwas tun. Allerdings ist es schwierig, sauberen JavaScript-Code zu schreiben.

In diesem Artikel stellen wir einige Rekonstruktionsideen im Zusammenhang mit der Optimierung bedingter Ausdrücke vor.

Bedingte Ausdrücke zerlegen

Wir können lange bedingte Ausdrücke in kurze und benannte bedingte Ausdrücke zerlegen, was sich positiv auf das Lesen auswirkt. Wir könnten zum Beispiel Code wie diesen schreiben:

let ieIEMac = navigator.userAgent.toLowerCase().includes("mac") && navigator.userAgent.toLowerCase().includes("ie")

Der obige Code ist zu lang und nicht lesbar. Wir können ihn in mehrere kurze und benannte bedingte Ausdrücke aufteilen, wie unten gezeigt:

let userAgent = navigator.userAgent.toLowerCase();
let isMac = userAgent.includes("mac");
let isIE = userAgent.toLowerCase().includes("ie");
let isMacIE = isMac && isIE;

Bedingte Ausdrücke kombinieren

Wenn Sie im Gegensatz zum oben Gesagten mehrere kurze bedingte Ausdrücke haben, können Sie diese zu einem zusammenführen. Wir könnten zum Beispiel Code wie diesen schreiben:

const x = 5;
const bigEnough = x > 5;
const smallEnough = x < 6;
const inRange = bigEnough && smallEnough;

Wir können ihn wie folgt kombinieren:

const x = 5;
const inRange = x > 5 && x < 6;

Da der Ausdruck sehr kurz ist, wird er selbst durch die Kombination nicht länger, also We kann das machen.

Doppelte bedingte Fragmente zusammenführen

Wenn wir doppelte Ausdrücke oder Anweisungen in bedingten Blöcken haben, können wir sie entfernen. Beispielsweise könnten wir Code wie diesen schreiben:

if (price > 100) {
  //...
  complete();
} else {
  //...
  complete();
}

Wir können den wiederholten Inhalt außerhalb des bedingten Ausdrucks verschieben, wie unten gezeigt:

if (price > 100) {
  //...  
} else {
  //...  
}
complete();

Auf diese Weise müssen wir nicht aufrufen complete

let done = false;
while (!done) {
  if (condition) {
    done = true;
  }
  //...
}

unnötig 🎜>Funktion.

Kontrollflag entfernen

Wenn wir das Kontrollflag in der Schleife verwenden, sollte der Code so aussehen:

let done = false;
while (!done) {
  if (condition) {
    break;
  }
  //...
}

Im obigen Code ist done das Steuerelement Flag: Wenn condition den Wert true hat, setzen Sie done auf true, um die while-Schleife zu stoppen.

Im Vergleich zu oben können wir break verwenden, um die Schleife zu stoppen, wie unten gezeigt:

const fn = () => {
  if (foo) {
    if (bar) {
      if (baz) {
        //...
      }
    }
  }
}

Verschachtelte Bedingungen durch Guard-Anweisungen ersetzen

Die Guard-Anweisung ist to Komplex kombinieren Der bedingte Ausdruck wird in mehrere bedingte Ausdrücke aufgeteilt. Beispielsweise wird ein sehr komplexer Ausdruck, der mit mehreren Ebenen von if-then-else-Anweisungen verschachtelt ist, in mehrere if-Anweisungen umgewandelt, um seine Logik zu implementieren Die Anweisung ist die Guard-Anweisung. if

Verschachtelte bedingte Anweisungen sind schwer zu lesen, daher können wir stattdessen

Schutzanweisungen verwenden. Beispielsweise könnten wir Code wie diesen schreiben:

  if (!foo) {
    return;
  }
  if (!bar) {
    return;
  }
  if (baz) {
    //...
  }
}

Wir können wie folgt optimieren:

if (!foo) {
  return;
}

Im obigen Code lauten die Schutzanweisungen:

if (!bar) {
  return;
}

und

class Animal {
  constructor(type) {
    this.type = type;
  }
  getBaseSpeed() {
    return 100;
  }
  getSpeed() {
    switch (this.type) {
      case ('cat'): {
        return getBaseSpeed() * 1.5
      }
      case ('dog'): {
        return getBaseSpeed() * 2
      }
      default: {
        return getBaseSpeed()
      }
    }
  }
}

Wenn diese Bedingungen falsch sind, geben sie die Funktion vorzeitig zurück, sodass wir nicht verschachteln müssen.

Bedingungen durch Polymorphismus ersetzen

Anstatt

-Anweisungen zu verwenden, um dasselbe für verschiedene Datentypen auszuführen, können wir die switch-Anweisung verwenden, um dieselbe Unterklasse für verschiedene Arten von Daten zu erstellen Datenoperationen ausführen und dann je nach Objekttyp unterschiedliche Methoden verwenden. switch

Zum Beispiel könnten wir Code wie diesen schreiben:

class Animal {
  constructor(type) {
    this.type = type;
  }
  getBaseSpeed() {
    return 100;
  }
}
class Cat extends Animal {
  getSpeed() {
    return super.getBaseSpeed() * 1.5;
  }
}
class Dog extends Animal {
  getSpeed() {
    return super.getBaseSpeed() * 2;
  }
}

Wir können ihn wie folgt umgestalten:

class Person {
  //...
}

Wenn die

-Anweisung sehr lang ist, sollte sie es auch sein verschiedene Arten von Objekten Angepasste switch Blöcke. case

nimmt ein leeres Objekt

Wenn wir wiederholt nach

oder null suchen, können wir eine Unterklasse definieren, die die undefined- oder null-Version der Klasse darstellt, und diese dann verwenden Das . undefined

Zum Beispiel könnten wir Code wie diesen schreiben:

class Person {
  //...
}
class NullPerson extends Person {
  //...
}

Wir können wie folgt umgestalten:

rrreee

Dann setzen wir

entweder auf Person oder null Objekteigenschaft, anstatt sie auf eine NullPerson-Instanz festzulegen. undefined

Dadurch entfällt die Notwendigkeit, Bedingungen zur Überprüfung dieser Werte zu verwenden.

---

Empfohlenes Tutorial: „

JS-Tutorial“

Das obige ist der detaillierte Inhalt vonTipps zum JavaScript-Refactoring. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!