Heim  >  Artikel  >  Web-Frontend  >  Wie schreibe ich sauberen JS-Code? 5 Schreibtipps zum Teilen

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

青灯夜游
青灯夜游nach vorne
2022-08-15 20:16:051544Durchsuche

Wie schreibe ich sauberen JS-Code? In diesem Artikel teile ich Ihnen 5 Tipps zum Schreiben von sauberem JavaScript mit. Ich hoffe, dass es Ihnen hilfreich sein wird!

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 als 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 Zahlen gibt, führt das leicht zu größerer Verwirrung.

Schreiben Sie sauberes JavaScript: Definieren Sie Zahlen als Konstanten

, um dieses Problem klar zu lösen:

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

Jetzt können wir durch die Deklaration des Namens der Konstante 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 Schreibweise, die leicht zu Codeverwirrung führen kann.

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

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 von Funktionen, also:

Schreiben Sie sauberes JavaScript: Vermeiden Sie boolesche Werte als Funktionsparameter

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

3. Kapseln Sie mehrere Bedingungen

Wir schreiben Code oft wie folgt:

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

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

Schreiben Sie sauberes JavaScript: Kapseln Sie mehrere Bedingungen

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

oder

const isSimon = (person) => {
  return (
    person.getAge() > 30 &&
    person.getName() === "simon" &&
    person.getOrigin() === "sweden"
  );
};
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 Urteilsbedingungen

Beim bedingten Urteil führt die Verwendung eines negativen Urteils zu einer zusätzlichen Belastung des Denkens.

Im folgenden Code ist die Bedingung beispielsweise eine doppelte Verneinung, was die Lesbarkeit etwas erschwert.
const isCreatureNotHuman = (creature) => {
  // ...
}

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

Schreiben Sie sauberes JavaScript: Vermeiden Sie negative Beurteilungsbedingungen.

!isCreatureNotHuman(creature)Schreiben Sie es in die folgenden Schreibregeln um, um das Lesen zu erleichtern. Befolgen Sie diesen jedoch an vielen Stellen in einer großen Menge an Codelogik Grundsätze werden auf jeden Fall hilfreich sein.

Wenn ich Code lese, kann ich es oft nicht mehr ertragen, wenn ich eine „schreckliche“ Schrift sehe, und die Böschung von tausend Meilen wird in einer Ameise zusammenbrechen Nest.

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

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

Dieser Punkt wurde von mir 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 in Kartenschreiben:

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

Ein 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;
}

In ein Array umgeschrieben:

const isMammal = (creature) => {
  const mammals = ["human", "dog", "cat", /* ... */];
  return mammals.includes(creature);
}

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

Also, wenn es viele if... gibt sonst... im Code, mehr Denken Sie darüber nach und prüfen Sie, ob Sie einige Änderungen vornehmen können, damit der Code „sauberer“ aussieht.

Zusammenfassung: Die oben genannten Tipps 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 einen positiven Effekt haben, sogar über alle Vorstellungskraft hinaus .

【Verwandte Empfehlungen:

Javascript-Lern-Tutorial


Das obige ist der detaillierte Inhalt vonWie schreibe ich sauberen JS-Code? 5 Schreibtipps zum Teilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:juejin.cn. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen