Warum ist JavaScript kein Chaos?

Es entmutigt mich immer...

Es ärgert mich zu hören, dass die Frontend-Entwicklung ein Chaos ist, insbesondere die Aussage, dass JavaScript „alles akzeptiert“ und auf jede Art und Weise geschrieben werden kann, ohne das Endergebnis zu beeinträchtigen.

Eigentlich ist es nicht ganz falsch. Es stimmt, dass JavaScript mehrere Ansätze ermöglicht, um dasselbe Ziel zu erreichen.

Das Problem liegt im Fehlen von Designmustern, die so gut definiert sind wie im Backend. Im Frontend sind Best Practices verstreut, was zu Meinungsvielfalt und mangelnder Einheitlichkeit führt. Diese Streuung erschwert die Entwicklung und das Verständnis, insbesondere für Anfänger. Auch wer das schreibt, hat seine eigene Meinung.

---

Der entscheidende Punkt…

Abgesehen von der Frustration möchte ich betonen, dass der Mangel an Beweisen für gute Praktiken nicht bedeutet, dass es sie nicht gibt. Es ist wichtig, sich Wissen anzueignen und zumindest die Grundlagen von Entwurfsmustern anzuwenden. In JavaScript gibt es viele Ressourcen mit etablierten Implementierungen und Mustern. Es braucht nur Zeit, den Zweck und die ordnungsgemäße Verwendung zu lesen und zu verstehen. Beispiel: Mozilla-Dokumentation für JavaScript.

---

Ein praktisches Beispiel…

Der folgende Code stammt aus einem echten Projekt in der Produktion. Obwohl es korrekt funktioniert, könnte seine Implementierung hinsichtlich Lesbarkeit und Leistung verbessert werden.

Wir werden einige Teile anpassen, um sie an die Empfehlungen in der JavaScript-Dokumentation anzupassen und effizientere Methoden und Funktionen zu verwenden. Wir konzentrieren uns auf ein Grundkonzept: die Manipulation von Arrays und Objekten. Der Code ist zu Bildungszwecken vereinfacht.

Beginnen wir mit einem Objekt, das von einer Backend-API empfangene Daten darstellt:

<code class="language-javascript">const storesList = [{
  activeStories: [
    {
      name: 'Starbucks',
      code: 1
    },
    {
      name: 'Duck Duck Coffe',
      code: 2
    }
  ],
  inactiveStories: [
    {
      name: 'Mac Coffe',
      code: 3
    }
  ]
}]</code>

Wir müssen ein „Label“-Feld mit dem Präfix „Geöffnet“ gefolgt vom Namen des Geschäfts hinzufügen.

Sehen wir uns zunächst eine „weniger ideale“ Implementierung an, die nicht die besten JavaScript-Tools verwendet:

<code class="language-javascript">storesList.reduce((previous, current) => {
  current.activeStories.forEach(store => {
    previous.push({
      ...store,
      label: `Opened ${store.name}`
    })
  })

  return previous
}, [])

// resultado:
[
    {
        "name": "Starbucks",
        "code": 1,
        "label": "Opened Starbucks"
    },
    {
        "name": "Duck Duck Coffe",
        "code": 2,
        "label": "Opened Duck Duck Coffe"
    }
]</code>

Wir schauen uns .reduce, .forEach und .push an, nur um eine Liste zu rekonstruieren. Die mangelnde Verwendung von .flatMap und .map ist offensichtlich. Die Syntax ist verwirrend und ausführlich.

Sehen wir uns eine verbesserte Implementierung an:

<code class="language-javascript">storesList.flatMap((item) => {
  return item.activeStories
}).map((item) => {
  return {
    ...item,
    label: `Opened ${item.name}`
  }
})</code>

Einfacher, oder?

.flatMap „Reduziert“ das Array von Objekten auf eine einzige Ebene:

<code class="language-javascript">[
    {
        "name": "Starbucks",
        "code": 1
    },
    {
        "name": "Duck Duck Coffe",
        "code": 2
    }
]</code>

Dann .map wird das Array „neu zugeordnet“ und die Eigenschaft „label“ hinzugefügt:

<code class="language-javascript">[
    {
        "name": "Starbucks",
        "code": 1,
        "label": "Opened Starbucks"
    },
    {
        "name": "Duck Duck Coffe",
        "code": 2,
        "label": "Opened Duck Duck Coffe"
    }
]</code>

---

Fazit…

JavaScript bietet die Tools zum Schreiben von Qualitätscode. Das Wichtigste ist, es zu studieren und die Konzepte richtig anzuwenden, und nicht nur um des Programmierens willen zu programmieren.

---

Leseempfehlungen:

• [PT-BR] - https://www.php.cn/link/729404b28f3bd32761c667a668453f4c
• [DE] - https://www.php.cn/link/f5c80b20fdee4e645ff315a56f12a716

Das obige ist der detaillierte Inhalt vonWarum ist JavaScript kein Chaos?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!