Warum ist JavaScript nicht chaotisch?

Es irritiert mich zutiefst zu hören, dass die Frontend-Entwicklung chaotisch ist, insbesondere die Behauptung, dass JavaScript „alles akzeptiert“ und unorganisierten Code zulässt, da mehrere Ansätze zum gleichen Ergebnis führen.

Tatsächlich ist diese Kritik berechtigt. Es ist möglich, JavaScript auf unterschiedliche Weise zu schreiben und so das gleiche Ziel zu erreichen.

Der Hauptunterschied zwischen Frontend (JavaScript) und Backend liegt in der Definition von Designmustern. Im Backend sind Frameworks und Konventionen weit verbreitet. Im Frontend sind bewährte Praktiken und Standards verstreut, was zu Abweichungen führt und das Verständnis insbesondere für Anfänger erschwert. Sogar ich, der Autor, habe meine eigene Meinung.

---

Der Knackpunkt

Trotz dieses offensichtlichen Mangels an Struktur bedeutet dies nicht, dass es keine Muster gibt oder dass man nicht nach ihnen suchen sollte. JavaScript verfügt über zahlreiche klar definierte Ressourcen und Standards, die auf verschiedenen Websites und in Dokumentationen verfügbar sind (z. B. Mozilla Docs JS). Der Schlüssel liegt darin, sich Zeit zu nehmen, um diese Konzepte zu erlernen und richtig anzuwenden.

---

Praxisbeispiel

Der folgende Code stammt aus einem Produktionsprojekt und funktioniert, sein Ansatz kann jedoch für eine bessere Lesbarkeit und Leistung optimiert werden. Lassen Sie es uns umgestalten und dabei grundlegende JavaScript-Funktionen (Arrays und Objekte) verwenden, um die Verbesserung zu veranschaulichen.

Das folgende Objekt, das von einer API empfangene Daten darstellt, benötigt ein neues „Label“-Feld (Präfix „Geöffneter“ Geschäftsname):

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

Diese erste Implementierung mit reduce, forEach und push ist weniger effizient:

<code>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>

Beachten Sie die unnötige Komplexität. Die folgende Lösung mit flatMap und map ist prägnanter und effizienter:

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

flatMap „glättet“ das Array und map fügt jedem Element das Feld „Beschriftung“ hinzu:

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

---

Fazit

JavaScript bietet leistungsstarke Tools für Qualitätscode. Das Geheimnis liegt im Studium und der richtigen Anwendung dieser Ressourcen, um übereilte und ungeplante Entwicklungen zu vermeiden.

---

Lesevorschläge:

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

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