Lernen Sie diese grundlegenden JavaScript-Konzepte in nur wenigen Minuten

Manchmal möchte man einfach schnell etwas lernen. Das Lesen umfassender Artikel, in denen bestimmte JavaScript-Konzepte beschrieben werden, kann zu einer kognitiven Überlastung führen. Der Zweck dieses Artikels ist es, einige gebräuchliche Konzepte so einfach wie möglich zu beschreiben mit:

  • Eine kurze Beschreibung
  • Warum es relevant ist
  • Ein praktisches Codebeispiel (ES5 / ES6 mit Pfeilfunktionen).

Es ist immer eine gute Idee, allgemeine Kenntnisse zu haben, wenn Sie mit dem JS-Ökosystem arbeiten. Sie werden wissen, wie Dinge funktionieren und interagieren, und können Dinge schneller lernen und verbessern.

Diese JS-Konzepte werden basierend auf der Popularität und Relevanz ausgewählt, die ich in der Community gesehen habe. Wenn Sie ein Konzept lernen möchten, das nicht Teil dieses Artikels ist, hinterlassen Sie einen Kommentar und ich werde ihn in naher Zukunft hinzufügen.

Wenn Sie ein besserer Webentwickler werden, ein eigenes Unternehmen gründen, andere unterrichten oder einfach Ihre Entwicklungsfähigkeiten verbessern möchten, werde ich wöchentlich Tipps und Tricks zu den neuesten Webentwicklungssprachen veröffentlichen.

Verbessern Sie Ihre JavaScript-Kenntnisse mit diesen hilfreichen JS-Methoden .

Die JS-Konzepte, die wir uns ansehen werden:

  1. Umfang
  2. IIFE
  3. MVC
  4. Async / warten
  5. Schließung
  6. Rückrufen

1. Geltungsbereich

Der Bereich ist einfach eine Box mit Grenzen. In JS gibt es zwei Arten von Grenzen: lokale und globale, auch als innere und äußere bezeichnet.

Lokal bedeutet, dass Sie Zugriff auf alles innerhalb der Grenzen (innerhalb der Box) haben, während global alles außerhalb der Grenzen (außerhalb der Box) ist.

Diese Begriffe werden häufig verwendet, wenn wir über Klassen, Funktionen und Methoden sprechen. Es bietet die Möglichkeit zu bestimmen, was für den aktuellen Kontext zugänglich (sichtbar) ist.

Warum ist das relevant?

  • Trennt die Logik
  • Verengt den Fokus
  • Verbessert die Lesbarkeit

Beispiel

Angenommen, Sie erstellen eine Funktion und möchten auf eine im globalen Bereich definierte Variable zugreifen.

ES5

ES6

Wie im obigen Beispiel gezeigt, hat die Funktion showName()Zugriff auf alles, was innerhalb ihrer Grenzen (lokal) und auch außerhalb (global) definiert ist. Denken Sie daran, dass der globale Bereich nicht auf Variablen zugreifen kann, die im lokalen Bereich definiert sind, da er von der Außenwelt eingeschlossen ist, es sei denn, Sie geben ihn zurück.

2. IIFE

IIFE (Sofort aufgerufener Funktionsausdruck) bedeutet, wie der Name schon sagt, dass die Funktion beim Erstellen sofort aufgerufen wird. Bevor ES6 ++ Klassen / Methoden zur Unterstützung des objektorientierten Programmierparadigmas (OOP) vorstellte, bestand die übliche Methode darin, IIFE als Klassennamen nachzuahmen und Funktionen als in einen returnTyp eingeschlossene Methoden aufzurufen .

Warum ist das relevant?

  • Führt sofort Code aus
  • Verhindert, dass der globale Geltungsbereich verschmutzt wird
  • Unterstützt asynchrone Struktur
  • Verbessert die Lesbarkeit (einige argumentieren möglicherweise das Gegenteil)

Beispiel

Die Technologie hat sich in den letzten Jahren stark verändert. Jetzt haben Sie zum Beispiel die Möglichkeit, die Farbe von fast allem zu ändern - wie Ihrem Auto. Sehen wir uns ein Codebeispiel an.

ES5

ES6

Im obigen Beispiel haben wir zwei Funktionen in den returnTyp ( changeColorToRed()& changeColorToBlack()) eingeschlossen. Auf diese Weise können wir auf mehrere Funktionen zugreifen und die gewünschte Methode aufrufen.

Kurz gesagt, wir rufen zuerst den car(Funktionsausdruck) auf, um auf das zuzugreifen, was sich darin befindet. Dann können wir die .Notation verwenden, um die innerhalb des returnTyps definierte Funktion aufzurufen . Dieser Ansatz ähnelt der Struktur von Klassen / Methoden, bei denen wir zuerst den Klassennamen aufrufen, bevor wir den Methodennamen aufrufen können. Auf diese Weise können Sie sauberen, wartbaren und wiederverwendbaren Code schreiben.

3. MVC

Model-View-Controller ist ein Design-Framework (* keine Programmiersprache), mit dem wir Verhalten in eine praktische reale Struktur unterteilen können. Fast 85% der webbasierten Anwendungen haben heute dieses zugrunde liegende Muster auf die eine oder andere Weise. Es gibt andere Arten von Design-Frameworks, aber dieses ist bei weitem das grundlegendste und leicht verständliche Muster.

Warum ist das relevant?

  • Langfristige Skalierbarkeit und Wartbarkeit
  • Einfach zu verbessern, zu aktualisieren und zu debuggen (basierend auf persönlichen Erfahrungen)
  • Einfach einzurichten
  • Bietet Struktur und Überblick

Beispiel

Schauen wir uns ein kurzes Beispiel für das MVC-Design-Framework an.

ES5

ES6

Wie im obigen Beispiel gezeigt, teilen wir normalerweise das view, modelund controllerin separate Ordner / Dateien in Bezug auf Best Practices. Um das Konzept zu veranschaulichen, haben wir alles in einer Datei zusammengefasst. Ziel des Design-Frameworks ist es, den Entwicklungsprozess zu vereinfachen und ein nachhaltiges kollaboratives Umfeld zu unterstützen.

4. Async / warten

Halten Sie an und warten Sie, bis etwas gelöst ist. Es bietet eine Möglichkeit, die asynchrone Verarbeitung synchroner aufrechtzuerhalten. Sie müssen beispielsweise überprüfen, ob das Kennwort eines Benutzers korrekt ist (im Vergleich zu dem auf dem Server vorhandenen Kennwort), bevor Sie dem Benutzer den Zugriff auf das System ermöglichen. Oder Sie haben eine REST-API-Anforderung ausgeführt und möchten, dass die Daten vollständig geladen werden, bevor sie in die Ansicht verschoben werden.

Warum ist das relevant?

  • Synchrone Funktionen
  • Steuert das Verhalten
  • Reduziert die "Rückrufhölle"

Beispiel

Angenommen, Sie möchten alle Benutzer von einer Rest-API abrufen und die Ergebnisse im JSON-Format anzeigen.

ES5

ES6

Um es zu verwenden await, müssen wir es in eine asyncFunktion einschließen, um JS zu benachrichtigen, dass wir mit Versprechungen arbeiten. Wie im Beispiel gezeigt, warten wir (a) auf zwei Dinge: responseund users. Bevor wir das responseJSON-Format konvertieren können , müssen wir sicherstellen, dass wir das responseabgerufene Format haben . Andernfalls können wir ein responsenoch nicht vorhandenes konvertieren , was höchstwahrscheinlich zu einem Fehler führen wird.

5. Schließung

Ein Verschluss ist einfach eine Funktion innerhalb einer anderen Funktion. Es wird verwendet, wenn Sie Verhalten wie Übergeben von Variablen, Methoden oder Arrays von einer äußeren Funktion auf eine innere Funktion erweitern möchten. Wir können auch von der inneren Funktion aus auf den in der äußeren Funktion definierten Kontext zugreifen, aber nicht umgekehrt (denken Sie an die oben erwähnten Scope-Prinzipien).

Warum ist das relevant?

  • Erweitert das Verhalten
  • Nützlich bei der Arbeit mit Ereignissen

Beispiel

Nehmen wir an, Sie arbeiten als Entwicklungsingenieur für Volvo und sie benötigen eine Funktion, die einfach den Namen des Autos druckt.

ES5

ES6

Die Funktion showName()ist eine Schließung, da sie das Verhalten der Funktion erweitert showInfo()und auch Zugriff auf die Variable hat carType.

6. Rückruf

Ein Rückruf ist eine Funktion, die ausgeführt wird, nachdem eine andere Funktion ausgeführt wurde. Es wird auch als Call-After bezeichnet. In der JavaScript-Welt wird eine Funktion, die darauf wartet, dass eine andere Funktion einen Wert (Array oder Objekt) ausführt oder zurückgibt, als Rückruf bezeichnet. Ein Rückruf ist eine Möglichkeit, asynchrone Vorgänge synchroner zu gestalten (sequentielle Reihenfolge).

Warum ist das relevant?

  • Wartet auf die Ausführung eines Ereignisses
  • Bietet synchrone Funktionen
  • Praktische Methode zum Verketten von Funktionen (Wenn A abgeschlossen ist, führen Sie B aus usw.)
  • Bietet Codestruktur und -steuerung
  • Seien Sie sich bewusst, dass Sie vielleicht schon von der Rückrufhölle gehört haben. Dies bedeutet im Grunde, dass Sie eine rekursive Struktur von Rückrufen haben (Rückrufe innerhalb von Rückrufen innerhalb von Rückrufen usw.). Das ist nicht praktisch.

Beispiel

Angenommen, Elon Musk von SpaceX benötigt eine Funktionalität, die die 27 Merlin-Triebwerke von Falcon Heavy (die um den Faktor zwei stärkste Rakete der Welt) startet, wenn ein Knopf gedrückt wird.

ES5

ES6

Beachten Sie, dass es auf das Eintreten eines Ereignisses wartet (Klicken auf eine Schaltfläche), bevor eine Aktion ausgeführt wird (Starten der Engines). Kurz gesagt, wir übergeben die fireUpEngines()Funktion als Argument (Rückruf) an die pressButton()Funktion. Wenn der Benutzer die Taste drückt, werden die Motoren gestartet.

Da haben Sie es also! Einige der beliebtesten JS-Konzepte werden einfach anhand von Beispielen erläutert. Ich hoffe, diese Konzepte haben Ihnen geholfen, JS ein bisschen besser zu verstehen und wie es funktioniert.

Sie finden mich auf Medium, wo ich wöchentlich veröffentliche. Oder Sie können mir auf Twitter folgen, wo ich relevante Tipps und Tricks zur Webentwicklung sowie persönliche Geschichten veröffentliche.

PS Wenn Ihnen dieser Artikel gefallen hat und Sie mehr davon möchten, klatschen Sie bitte share und teilen Sie ihn mit Freunden. Es ist gutes Karma