Einer der wichtigsten Schritte bei der Entwicklung eines Projekts ist es, sauberen Code zu schreiben. Er wird nicht nur leicht zu lesen sein, sondern auch eine schöne Struktur haben, so dass Ihr Code für jeden verständlich ist, der ihn sich ansieht. Wie können wir das erreichen? Es gibt verschiedene Richtlinien und Syntaxen, die Ihnen dabei helfen, weniger Code zu schreiben, wie z.B. die D.R.Y.-Regel, d.h. die Entwicklung von wiederverwendbarem Code und das Vermeiden von doppelten Codeblöcken, die nicht unbedingt notwendig sind. Dies ist das wichtigste Prinzip, denn es hilft Ihnen, die Art und Weise, wie Sie Ihren Code schreiben, zu überdenken und bei der Bereitstellung Ihres Codes für die Produktion einige zusätzliche Zeilen und KB einzusparen. Die Leistung ist entscheidend, und Sie wollen jedes bisschen verfügbaren Speicherplatz sparen. Eine weitere Empfehlung ist die Verwendung der ES6-Syntax, um die Menge des von Ihnen geschriebenen Codes durch die Vereinfachung einiger Syntaxen zu reduzieren. Die am häufigsten verwendeten sind genau die, über die wir in diesem Artikel sprechen werden. Pfeilfunktionen, die es Ihnen ermöglichen, JavaScript-Funktionen kompakter zu schreiben und gleichzeitig die Schwierigkeit des Zugriffs auf diese Eigenschaft über Callbacks zu lösen. Eine einfache Pfeilfunktion sieht wie folgt aus: const myFunction = (param1, param2) => {} Wenn Sie etwas zurückgeben, ist das Schlüsselwort „return“ optional, und die geschweiften Klammern können zu Klammern werden, wenn Sie viele Zeilen zurückgeben, oder sie können verschwinden, wenn Sie nur einen Wert zurückgeben, je nachdem, was Sie zurückgeben: const myFunction = (param1, param2) => param1 + param2 Die Klammern, die die Variablen umgeben, können ebenfalls optional sein, wenn Sie nur einen Parameter haben: const myFunction = param1 => param1 Dann gibt es noch die Objektdestrukturierung, die es Ihnen ermöglicht, bestimmte Felder eines Objekts schnell einer Variablen zuzuweisen und so die Menge des für die Deklarationen verwendeten Codes zu reduzieren: const user = {firstName: “John”, lastName: “Doe”}; Destrukturierung: const {firstName, lastName} = user; Nicht destrukturieren:
const firstName = user.firstName;
const lastName = user.lastName; Ein weiterer Trick ist die Verwendung von Backticks (‚) zur Trennung von Template-Literalen bei der Erstellung von mehrzeiligen Strings und der Durchführung von String-Interpolationen: const x = “Var”;const example = `Something ${x} something`; Anstelle von const example = “Something” + x + “something”; Eine weitere wichtige ES6-Syntax ist die Shorthand-Methode, die die if else-Syntax aufhebt und es uns ermöglicht, weniger und besser lesbaren Code zu schreiben: condition ? doThisIfTrue : doThisIfFalse Statt If (condition) { Versuchen Sie, Rückrufe und verschachtelte Rückrufe nach Möglichkeit zu vermeiden und stattdessen Versprechen und async / await zu verwenden, um asynchrone Funktionen zu handhaben. Natürlich gibt es viele ES6-Methoden, die verwendet werden können, aber diese sind die am häufigsten verwendeten. Sie können hier mehr darüber erfahren, wenn Sie möchten. Ein weiterer wichtiger Punkt, den Sie sich merken sollten, ist die Datenknappheit. Das bedeutet, dass Sie keine Daten übertragen sollten, die Sie nicht benötigen. Anstatt ein ganzes Objekt zu übergeben, wenn Sie nur eine Variable benötigen, ordnen Sie Ihre Daten neu an und senden Sie nur das, was für die Funktionalität erforderlich ist. Wenn Sie mehrere API-Aufrufe zu tätigen haben, ist dies eine gute Möglichkeit, die Menge der zu übertragenden Daten zu begrenzen. Wenn Ihr Code größer wird, ist es eine gute Idee, ihn in mehrere Dateien aufzuteilen, um große Datenmengen zu vermeiden, die schwer zu verstehen und zu verwalten sind. Die Aufteilung des Codes in Dateien und Module ist eine gute Idee, denn sie hilft, Ihr Projekt zu organisieren und verbessert die Lesbarkeit.
doThisIfTrue
} else {
doThisIfFalse
}