Best Practices in modernem JavaScript – Teil 1

JavaScript ist ohne Zweifel die am häufigsten verwendete Programmiersprache der Welt und hat einen enormen Einfluss auf eine der wichtigsten Technologien in unserem täglichen Leben: das Internet. Mit dieser Leistung geht eine große Verantwortung einher, und das JavaScript-Ökosystem hat sich rasant weiterentwickelt, was es schwierig macht, mit den Best Practices Schritt zu halten.

In diesem Artikel werden wir einige der besten Best Practices im modernen JavaScript untersuchen, um saubereren, wartbaren und effizienten Code zu schreiben.

1. Projektregeln sind das Wichtigste

Jedes Projekt kann spezifische Regeln haben, um die Codekonsistenz aufrechtzuerhalten. Diese Regeln haben stets Vorrang vor allen externen Empfehlungen, auch denen in diesem Artikel. Bevor Sie eine Praxis in einem Projekt implementieren, stellen Sie sicher, dass sie mit den festgelegten Regeln übereinstimmt und dass alle Teammitglieder damit einverstanden sind.

2. Verwenden Sie aktualisiertes JavaScript

JavaScript hat sich seit seiner Einführung im Jahr 1995 enorm weiterentwickelt. Viele alte Praktiken, die Sie im Internet finden, sind möglicherweise veraltet. Überprüfen Sie vor der Implementierung einer Technik, ob sie mit der aktuellen Version der Sprache kompatibel ist.

3. Verwenden Sie let und const anstelle von var

Obwohl var immer noch gültig ist, gilt seine Verwendung als veraltet und kann in vielen Fällen zu Fehlern führen, die aufgrund seines Funktionsumfangs schwer zu verfolgen sind. Andererseits geben uns let und const einen vorhersehbareren und sichereren Geltungsbereich, da sie auf den Block beschränkt sind, in dem sie deklariert werden.

Wann sollte man let und wann const verwenden?

• Verwenden Sie const immer dann, wenn eine Variable ihre Referenz oder ihren Wert nicht ändert. Dies macht Ihren Code verständlicher und reduziert Fehler durch den Schutz unveränderlicher Werte.
• Verwenden Sie let, wenn Sie den Wert der Variablen in Zukunft neu zuweisen müssen, aber nur in den Fällen, in denen dies notwendig ist.

Goldene Regel: Standardmäßig const verwenden. Wenn Sie den Wert später ändern müssen, wechseln Sie zu let.

Praxisbeispiele

1. const für konstante Werte:

const PI = 3.14159;
console.log(PI); // 3.14159

PI = 3; // TypeError: Assignment to constant variable.

1. lassen für sich ändernde Werte:

let count = 0;

for (let i = 1; i <= 3; i++) {
  count += i; 
}
console.log(count); // 6

1. Umfangsvergleich (let vs var):

if (true) {
  let blockScoped = "Solo dentro del bloque";
  var functionScoped = "Disponible fuera también";
}

console.log(functionScoped); // "Disponible fuera también"
console.log(blockScoped); // ReferenceError: blockScoped is not defined

1. Probleme mit Schleifen und Rückrufen vermeiden:

Mit var kann es zu unerwartetem Verhalten in Schleifen kommen, insbesondere in asynchronen Funktionen:

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 3, 3, 3
}

Während let dieses Problem behebt:

const PI = 3.14159;
console.log(PI); // 3.14159

PI = 3; // TypeError: Assignment to constant variable.

Das Ersetzen von var durch let und const ist nicht nur eine gute Vorgehensweise, sondern trägt auch dazu bei, Ihren Code sicherer, lesbarer und einfacher zu debuggen zu machen. Machen Sie die Zukunft danken Ihnen.

4. Entscheiden Sie sich für Klassen: Einfachheit in JavaScript

Die Verwendung von Function.prototype für die objektorientierte Programmierung in JavaScript ist ein älterer und oft fehleranfälliger Ansatz. Im Gegenteil, die in ES6 eingeführten Klassen bieten eine intuitivere Syntax, die anderen objektorientierten Sprachen näher kommt und die Lesbarkeit und Wartung des Codes erleichtert.

Beispiel mit Klassen (modern und übersichtlich):

let count = 0;

for (let i = 1; i <= 3; i++) {
  count += i; 
}
console.log(count); // 6

Vergleich mit Function.prototype (kompliziert und weniger intuitiv):

if (true) {
  let blockScoped = "Solo dentro del bloque";
  var functionScoped = "Disponible fuera también";
}

console.log(functionScoped); // "Disponible fuera también"
console.log(blockScoped); // ReferenceError: blockScoped is not defined

Wie Sie sehen, erfordert der prototypbasierte Ansatz mehr Schritte zum Definieren von Methoden und kann für weniger erfahrene Entwickler verwirrender sein. Klassen sind nicht nur einfacher zu lesen, sondern fördern auch einen saubereren, modulareren Code.

Warum Klassen verwenden?

• Besser lesbar und weniger fehleranfällig.
• Sie erleichtern die Vererbung mit Extends und die Verwendung von Super.
• Besser kompatibel mit modernen Tools und ES6-Standards.

5. Verwenden Sie echte private Felder in JavaScript

JavaScript-Entwickler verwendeten lange Zeit Konventionen wie einen Unterstrich (_), um private Felder in Klassen zu simulieren. Dies war jedoch nur eine visuelle Konvention, da die Eigenschaften weiterhin von außerhalb der Klasse zugänglich waren. Dank echten Privatfeldern können wir nun garantieren, dass bestimmte Grundstücke von außen völlig unzugänglich sind.

⚠️ Achtung: Diese Funktion ist in der Konsole einiger Browser möglicherweise nicht verfügbar.

Warum echte private Felder verwenden?

1. Authentische Kapselung: Schützen Sie Ihre Daten und stellen Sie sicher, dass außerhalb des Klassenkontexts nicht auf sie zugegriffen oder sie geändert werden können.
2. Lesbarkeit: Die Verwendung des #-Präfixes macht deutlich, welche Eigenschaften privat sind, und verbessert so das Verständnis des Codes.
3. Datensicherheit: Verhindern Sie versehentliche Fehler oder unbeabsichtigten Zugriff auf interne Eigenschaften.

Einfaches Beispiel:

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 3, 3, 3
}

Erweitertes Beispiel: Geschützte Zähler

Stellen Sie sich vor, Sie möchten eine Klasse erstellen, die die Anzahl der Besuche auf einer Seite aufzeichnet, aber Sie möchten nicht, dass jemand diesen Zähler direkt manipulieren kann.

const PI = 3.14159;
console.log(PI); // 3.14159

PI = 3; // TypeError: Assignment to constant variable.

In diesem Fall ist der #Besuche-Zähler vollständig vor Zugriffen von außen geschützt, was garantiert, dass sein Wert nicht missbräuchlich manipuliert wird.

Überlegungen

• Auf private Felder kann nicht einmal von Unterklassen zugegriffen werden.
• Wenn Sie in Vererbungen mit privaten Daten interagieren müssen, sollten Sie die Verwendung geschützter Methoden anstelle privater Felder in Betracht ziehen.

6. Verwenden Sie Pfeilfunktionen

Pfeilfunktionen sind eine moderne und elegante Möglichkeit, Funktionen in JavaScript zu schreiben. Sie bieten eine kürzere Syntax und erben im Gegensatz zu herkömmlichen Funktionen automatisch den Kontext davon, wodurch häufige Probleme bei der objektorientierten Programmierung vermieden werden.

Sie sind besonders nützlich bei Funktionen höherer Ordnung wie Map, Filter und Reduce, bei denen wir Funktionen als Argumente übergeben müssen.

Warum Pfeilfunktionen verwenden?

1. Kürzere, sauberere Syntax:Ideal, um den Code besser lesbar zu halten.
2. Kontext dieser Automatik: Perfekt, um Fehler in Rückrufen oder Methoden zu vermeiden.
3. Ideale Verwendung in Inline-Funktionen: Wie diejenigen, die wir in Karten, Filtern oder Ereignissen verwenden.

Praxisbeispiele

1. Mit Karte zum Transformieren von Arrays

let count = 0;

for (let i = 1; i <= 3; i++) {
  count += i; 
}
console.log(count); // 6

2. Mit Filter zu Filterelementen

if (true) {
  let blockScoped = "Solo dentro del bloque";
  var functionScoped = "Disponible fuera también";
}

console.log(functionScoped); // "Disponible fuera también"
console.log(blockScoped); // ReferenceError: blockScoped is not defined

3. Mit Reduce Werte hinzufügen

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 3, 3, 3
}

4. Bei DOM-Ereignissen (seien Sie vorsichtig mit dem Kontext!)

Wenn wir Pfeilfunktionen in Ereignissen verwenden, ändert sich dieser Kontext nicht, was nützlich sein kann:

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 0, 1, 2
}

Tipp: Wann sollten Sie sie nicht verwenden?

Obwohl Pfeilfunktionen großartig sind, sind sie nicht für alles ideal. Vermeiden Sie sie in Fällen, in denen Sie auf den Funktionskontext selbst zugreifen müssen, z. B. in Funktionen, die dynamisches This verwenden, oder wenn Sie Methoden in Prototypen schreiben müssen.

Beispiel, bei dem eine normale Funktion besser ist:

class Persona {
  constructor(nombre) {
    this.nombre = nombre;
  }

  obtenerNombre() {
    return this.nombre;
  }
}

const persona = new Persona('Juan');
console.log(persona.obtenerNombre()); // 'Juan'

Wenn Sie print in eine Pfeilfunktion ändern würden, würden Sie den Kontext verlieren.

Lassen Sie uns diesen Abschnitt verbessern! Ich habe etwas Kontext, eine klarere Erklärung und einige zusätzliche Beispiele hinzugefügt, um es vollständiger und nützlicher zu machen.

7. Null-Koaleszenzoperator (??)

Der Nullkoaleszenzoperator (??) ist eine präzisere Alternative zum logischen Operator || Standardwerte zuzuweisen. Während || betrachtet als „falsch“ Werte wie 0, falsch oder „“, der Operator ?? Wertet nur null oder undefinierte Werte als „fehlende“ Werte aus. Dies macht es in vielen Fällen zu einer sichereren und spezifischeren Option.

Was ist der entscheidende Unterschied?

Mit || wird jeder „falsche“ Wert durch den Standardwert ersetzt.

Mit ?? ersetzt nur Werte, die null oder undefiniert sind. Dadurch können Sie „falsche“ Werte wie 0 oder „“ beibehalten, wenn sie in Ihrem Kontext gültig sind.

Einfaches Beispiel:

const PI = 3.14159;
console.log(PI); // 3.14159

PI = 3; // TypeError: Assignment to constant variable.

Andererseits mit ||:

let count = 0;

for (let i = 1; i <= 3; i++) {
  count += i; 
}
console.log(count); // 6

Praktische Fälle mit ??

• Standardwerte festlegen, ohne gültige Werte zu überschreiben:

if (true) {
  let blockScoped = "Solo dentro del bloque";
  var functionScoped = "Disponible fuera también";
}

console.log(functionScoped); // "Disponible fuera también"
console.log(blockScoped); // ReferenceError: blockScoped is not defined

• Optionale Konfiguration validieren:

Angenommen, Sie verfügen über ein System, mit dem Sie Optionen anpassen können:

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 3, 3, 3
}

• Fehler beim Arbeiten mit optionalen Eigenschaften vermeiden:

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 0, 1, 2
}

Das obige ist der detaillierte Inhalt vonBest Practices in modernem JavaScript – Teil 1. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!