Heim > Web-Frontend > js-Tutorial > Hauptteil

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

青灯夜游
Freigeben: 2022-08-16 13:03:19
nach vorne
1568 Leute haben es durchsucht

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;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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 {
    // ...
  }
}
Nach dem Login kopieren

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) => {
  // ...
}
Nach dem Login kopieren

3. Kapseln Sie mehrere Bedingungen

Wir schreiben Code oft wie folgt:

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

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) {
  // ...
}
Nach dem Login kopieren

oder

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

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)) {
  // ...
}
Nach dem Login kopieren

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)) {
  // ...
}
Nach dem Login kopieren

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){
    //...
}
Nach dem Login kopieren
Umgeschrieben in Kartenschreiben:

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

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;
}
Nach dem Login kopieren

In ein Array umgeschrieben:

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

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!

Verwandte Etiketten:
Quelle:juejin.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!