Verbessern Sie die Lesbarkeit und Wartbarkeit Ihres JavaScript-Codes, indem Sie diese Namenskonventionen befolgen.
Für die Verwaltung komplexer JavaScript-Projekte ist es wichtig, dass Ihr Code einfach, lesbar und wartungsfreundlich ist. Die konsequente Einhaltung von Namenskonventionen ist der Schlüssel zum Erreichen dieses Ziels.
Variablen, boolesche Werte, Funktionen, Konstanten, Klassen, Komponenten, Methoden, private Funktionen, globale Variablen und Dateien gehören zu den JavaScript-Elementen, die konsistente Namenskonventionen erfordern. Sie können die Organisation und das Verständnis des Codes verbessern, indem Sie standardisierte Namenskonventionen für alle diese Komponenten implementieren und so auf lange Sicht Zeit und Aufwand sparen.
1. Benennen von Variablen
In JavaScript werden Daten in Variablen gespeichert. Es ist wichtig, beschreibende Namen für Variablen zu wählen, die ihre Funktion genau widerspiegeln. Sie könnten zum Beispiel ersetzen Nutzername oder Gesamtpreis für den Namen einer Variablen statt X.
Eine gute Möglichkeit, Variablen zu benennen, ist wie folgt:
lassen Gesamtpreis = 100;
lassen Benutzername = "John";Eine verbesserte Lesbarkeit des Codes kann durch die Verwendung beschreibender Variablennamen erreicht werden
2. Boolesche Benennung
Variablen, die nur zwei Werte haben können, d. h. entweder WAHR oder FALSCHwerden als Boolean bezeichnet. Es ist wichtig, geeignete Namen für boolesche Variablen zu wählen, die ihren Zweck zum Ausdruck bringen.
Zur Veranschaulichung: Anstatt sich für einen Variablennamen zu entscheiden, z ist wahr, sollten Sie lieber mitgehen ist gültig oder hasValue.
Betrachten Sie diesen Fall:
lassen isValid = WAHR;
lassen hasValue = FALSCH;In diesem Beispiel machen beschreibende boolesche Variablennamen deutlich, was sie darstellen.
3. Benennungsfunktionen
Eine Funktion in JavaScript bezieht sich auf eine in sich geschlossene Codeeinheit, die eine bestimmte Aufgabe ausführen soll. Es handelt sich um einen Codeblock, der von anderen Teilen des Codes aufgerufen oder aufgerufen werden kann und als unabhängige Einheit fungiert.
Um Funktionen effektiv zu benennen, verwenden Sie beschreibende Namen, die ihren Zweck verdeutlichen. Zum Beispiel statt Erstellen einer Funktionfoo, entscheiden Sie sich für anschaulichere Namen wie validierenBenutzereingabe oder Gesamtpreis berechnen.
Zum Beispiel:
FunktionGesamtpreis berechnen(Preis, Menge) {
zurückkehren Preis * Menge;
}
FunktionvalidierenBenutzereingabe(Eingang) {
zurückkehren Eingabe !== nicht definiert && Eingabe !== Null;
}
4. Konstanten benennen
Konstanten sind Variablen, die nicht neu zugewiesen werden können. Bei der Benennung von Konstanten ist es wichtig, ausschließlich Großbuchstaben und Unterstriche zur Trennung von Wörtern zu verwenden.
Zum Beispiel:
const MAX_PRICE = 1000;
const MIN_PRICE = 0;In diesem Beispiel wurden ausschließlich Großbuchstaben und Unterstriche verwendet, um Wörter in den Konstantennamen zu trennen.
5. Benennen von Klassen
In JavaScript können Objekte mithilfe von Blaupausen, sogenannten Klassen, erstellt werden. Um einwandfreie Benennungspraktiken zu erreichen, ist es von größter Bedeutung, PascalCase auszuführen, eine Namenskonvention, die die Großschreibung des ersten Buchstabens jedes Wortes vorschreibt.
Nimm zum Beispiel:
KlasseEinkaufswagen{
Konstrukteur(Marke, Modell) {
Das.make = machen;
Das.model = Modell;
}
}
In diesem Beispiel die Klasse Einkaufswagen wurde mit PascalCase benannt, was bedeutet, dass der erste Buchstabe jedes Wortes im Klassennamen großgeschrieben wurde und zwischen den Wörtern keine Leerzeichen oder Unterstriche stehen.
6. Benennen von Komponenten
Komponenten sind wesentliche Bausteine in der modernen Softwareentwicklung, insbesondere in Frameworks wie React, bei denen wiederverwendbarer Code im Vordergrund steht.
Indem Sie eine komplexe Benutzeroberfläche oder Anwendung in kleinere, überschaubare Teile zerlegen, können Sie etwas erstellen Komponenten, die in verschiedenen Projekten wiederverwendet werden können, wodurch die Entwicklungszeit verkürzt und der Code erhöht wird Effizienz.
Auch hier empfehlen wir dringend die Verwendung der PascalCase-Namenskonvention für die Benennung von Komponenten. Dies bedeutet, dass der erste Buchstabe jedes Wortes im Komponentennamen groß geschrieben wird.
Eine solche Konvention hilft Ihnen dabei, Komponenten von anderen Codesegmenten zu unterscheiden und vereinfacht so die Identifizierung und Manipulation.
FunktionTaste(Requisiten) {
zurückkehren<Taste>{props.label}Taste>;
}In diesem Beispiel wurde die PascalCase-Namenskonvention zur Benennung der Komponente verwendet Taste.
7. Benennungsmethoden
Bei der Benennung von Methoden ist es wichtig, beschreibende Namen zu verwenden, die erfolgreich vermitteln, was die Methode leistet, da es sich bei Methoden um Funktionen handelt, die sich auf ein Objekt beziehen.
Zum Beispiel:
KlasseAuto{
Konstrukteur(Marke, Modell) {
Das.make = machen;
Das.model = Modell;
}
starte den Motor() {
// Code zum Starten der Engine
}
stopEngine() {
// Code zum Stoppen der Engine
}
}
}
Beschreibende Namen (starte den Motor, Stoppen Sie den Motor) werden für die Methoden in diesem Beispiel verwendet, um sicherzustellen, dass ihr beabsichtigter Zweck leicht verständlich ist.
8. Benennen privater Funktionen
Als privat definierte Funktionen sind auf den Zugriff nur innerhalb des Objekts beschränkt, in dem sie definiert sind. Es ist wichtig, einen führenden Unterstrich (_) hinzuzufügen, um anzuzeigen, dass die Funktionen privat sind.
Hier ist ein Beispiel:
KlasseAuto{
Konstrukteur(Marke, Modell) {
Das.make = machen;
Das.model = Modell;
}
_starte den Motor() {
// Code zum Starten der Engine
}
_stopEngine() {
// Code zum Stoppen der Engine
}
}
Durch die Verwendung eines führenden Unterstrichs in diesem Beispiel wird angezeigt, dass die Funktionen privat sind.
9. Benennen globaler Variablen
Auf Variablen, die als global klassifiziert sind, kann von jedem Teil der Codebasis aus zugegriffen werden. Bei der Benennung solcher globaler Variablen ist es wichtig, klare und beschreibende Namen zu verwenden, die ihren beabsichtigten Zweck effektiv vermitteln.
Zum Beispiel:
const MAX_PRICE = 1000;
const MIN_PRICE = 0;
FunktionPreis überprüfen(Preis) {
Wenn (Preis > MAX_PRICE) {
// Code zur Bewältigung hoher Preise
} andersWenn (Preis < MIN_PRICE) {
// Code zur Handhabung niedriger Preise
}
}
10. Benennen von Dateien
Eine effiziente Dateiorganisation ist ein entscheidender Aspekt eines erfolgreichen JavaScript-Projektmanagements. Um schlanke und konsistente Namenskonventionen zu gewährleisten, ist es wichtig, Wörter in Dateinamen durch Kleinbuchstaben und Bindestriche zu trennen.
Kleinbuchstaben werden bevorzugt, da JavaScript eine Sprache ist, bei der die Groß- und Kleinschreibung beachtet wird, was bedeutet, dass die Sprache Klein- und Großbuchstaben unterschiedlich behandelt. Die Verwendung von Kleinbuchstaben für Dateinamen sorgt für Konsistenz und vermeidet Verwirrung beim Verweisen auf Dateien im Code.
Zur Trennung von Wörtern in Dateinamen werden Bindestriche verwendet, da Leerzeichen in Dateinamen nicht zulässig sind. Es können auch andere Alternativen wie Unterstriche oder camelCase verwendet werden, aus Gründen der Lesbarkeit werden jedoch im Allgemeinen Bindestriche bevorzugt.
Durch die Verwendung von Bindestrichen werden Dateinamen auch für Benutzer mit Bildschirmleseprogrammen oder anderen Hilfstechnologien leichter zugänglich.
meine App/
├── src/
├── Komponenten/
├── button.js
├── input-field.js
├── Dienstprogramme/
├── string-utils.js
├── date-utils.js
├── app.js
├── index.jsIn diesem Beispiel werden Kleinbuchstaben und Bindestriche verwendet, um Wörter in den Dateinamen zu trennen.
Bedeutung der Einhaltung von Namenskonventionen in JavaScript
Das Befolgen guter Namenskonventionen ist ein wesentlicher Aspekt beim Schreiben von sauberem und wartbarem Code in JavaScript. Indem Sie diese Konventionen befolgen, können Sie Ihren Code, insbesondere in einigen Fällen, lesbarer und wartbarer machen JavaScript-Frameworks, bei denen Sie mit umfangreichem Code umgehen müssen, was Ihnen Zeit und Mühe sparen kann auf lange Sicht.