Wie schreibe ich sauberen JS-Code? 5 Schreibtipps zum Teilen

Reduzieren Sie den Leseaufwand, regen Sie kreatives Denken an und erlernen Sie ganz einfach JavaScript-Kenntnisse.

1. Definieren Sie Zahlen als Konstanten

, wie zum Beispiel den folgenden Code:

const isOldEnough = (person) => {
  return person.getAge() >= 100;
}

Wer weiß, worauf sich diese 100 konkret bezieht? Normalerweise müssen wir den Funktionskontext kombinieren, um zu spekulieren und zu beurteilen, welchen Wert diese 100 konkret darstellen könnte.

Wenn es mehrere solcher Nummern gibt, führt dies leicht zu größerer Verwirrung.

Schreiben Sie sauberes JavaScript: Die Definition der Zahl als Konstante

löst dieses Problem eindeutig:

const AGE_REQUIREMENT = 100;
const isOldEnough = (person) => {
  return person.getAge() >= AGE_REQUIREMENT;
}

Wenn wir nun den Namen der Konstante deklarieren, können wir sofort verstehen, dass 100 „Altersanforderung“ bedeutet. Beim Ändern können Sie es schnell finden, an einer Stelle ändern und an mehreren Stellen wirksam werden.

2. Vermeiden Sie die Verwendung boolescher Werte als Funktionsparameter.

Die Übergabe boolescher Werte an Funktionen als Parameter ist eine gängige Schreibmethode, die leicht zu Codeverwirrung führt.

const validateCreature = (creature, isHuman) => {
  if (isHuman) {
    // ...
  } anders {
    // ...
  }
}

Der als Parameter an die Funktion übergebene boolesche Wert kann keine klare Bedeutung ausdrücken. Er kann dem Leser nur sagen, dass diese Funktion ein Urteil fällen und zwei oder mehr Situationen erzeugen wird.

Wir befürworten jedoch das Single-Responsibility-Prinzip für Funktionen, also:

Schreiben Sie sauberes JavaScript: Vermeiden Sie boolesche Werte als Funktionsparameter

const validatePerson = (person) => {
  // ...
}
constvalidateCreature = (creature) => {
  // ...
}

3. Um mehrere Bedingungen zu kapseln,

schreiben wir oft Code wie diesen:

if (
  person.getAge() > 30 &&
  person.getName() === "simon" &&
  person.getOrigin() === „Schweden“
) {
  // ...
}

Es ist nicht unmöglich, aber nach langer Zeit werden Sie plötzlich nicht mehr verstehen, wozu diese Urteile dienen. Daher empfiehlt es sich, diese Bedingungen mit Variablen oder Funktionen zu kapseln.

Schreiben Sie sauberes JavaScript: Mehrere Bedingungen kapseln

const isSimon =
  person.getAge() > 30 &&
  person.getName() === "simon" &&
  person.getOrigin() === "Schweden";
if (isSimon) {
  // ...
}

oder

const isSimon = (person) => {
  zurückkehren (
    person.getAge() > 30 &&
    person.getName() === "simon" &&
    person.getOrigin() === „Schweden“
  );
};
if (isSimon(person)) {
  // ...
}

Oh, es stellt sich heraus, dass diese Bedingungen dazu dienen, festzustellen, ob diese Person Simon ist ~

Diese Art von Code ist Code im deklarativen Stil, der besser lesbar ist.

4. Vermeiden Sie negative Urteile.

Bei bedingten Urteilen führt die Verwendung negativer Urteile zu einer zusätzlichen Belastung des Denkens.

Im folgenden Code ist beispielsweise die Bedingung !isCreatureNotHuman(creature) doppelt negativ, was die Lesbarkeit etwas erschwert.

const isCreatureNotHuman = (Kreatur) => {
  // ...
}

if (!isCreatureNotHuman(creature)) {
  // ...
}

Schreiben Sie sauberes JavaScript: Vermeiden Sie negative Beurteilungsbedingungen,

indem Sie es in die folgenden Schreibregeln umschreiben, um das Lesen zu erleichtern. Obwohl dies nur ein kleiner Trick ist, ist die Befolgung dieses Prinzips an vielen Stellen definitiv sehr hilfreich nützlich.

Wenn ich Code lese, lese ich oft einfach weiter, wenn ich eine „schlechte“ Schreibmethode sehe.

const isCreatureHuman = (Kreatur) => {
  // ...
}
if (isCreatureHuman(creature)) {
  // ...
}

5. Vermeiden Sie viele if...else...

Dieser Punkt wurde von Bengua immer betont:

Zum Beispiel der folgende Code:

if(x===a){
   res=A
}else if(x===b){
   res=B
}else if(x===c){
   res=C
}else if(x===d){
    //......
}

Umgeschrieben als Karte:

let mapRes={
    a:A,
    b:B,
    c:C,
    //......
}
res=mapRes[x]

Ein weiteres Beispiel ist der folgende Code:

const isMammal = (creature) => {
  if (creature === "human") {
    return true;
  } else if (creature === "dog") {
    return true;
  } else if (creature === "cat") {
    return true;
  }
  // ...
return false;
}

Als Array umgeschrieben:

const isMammal = (creature) => {
  const Säugetiere = ["Mensch", "Hund", "Katze", /* ... */];
  return Säugetiere.includes(creature);
}

Schreiben Sie sauberes JavaScript: Vermeiden Sie viele if...else...

Wenn sich also viele if...else... im Code befinden, denken Sie über einen weiteren Schritt nach und prüfen Sie, ob Sie eine kleine Änderung vornehmen können um den Code „sauberer“ aussehen zu lassen.

Zusammenfassung: Die oben genannten Techniken scheinen in Beispielen nicht erwähnenswert zu sein, aber in tatsächlichen Projekten, wenn die Geschäftslogik komplex und die Menge an Code groß wird, werden diese Tipps definitiv positive Auswirkungen haben und sogar unvorstellbar hilfreich sein.

Wie schreibe ich sauberen JS-Code? 5 Schreibtipps werden im Detail geteilt. Weitere Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!