Eine kurze Diskussion über ereignisgesteuerte Entwicklung in JS und Nodejs

Eine kurze Diskussion über ereignisgesteuerte Entwicklung in JS und Nodejs

Ereignisgesteuert und Publish-Subscribe

Die ereignisgesteuerte Architektur basiert auf einem in der Softwareentwicklung gängigen Muster, das als Publish-Subscribe- oder Observer-Muster bekannt ist.

In einer ereignisgesteuerten Architektur gibt es mindestens zwei Teilnehmer: das Subjekt und den Beobachter.

Ein Subjekt verhält sich wie ein UKW-Radio und sendet seine Inhalte an Beobachter, die daran interessiert sind, zuzuhören, was das Subjekt zu sagen hat.

Es kann nur ein Beobachter sein oder hundert, das spielt keine Rolle, solange das Subjekt einige Botschaften zu übermitteln hat.

Bedenken Sie, dass ereignisgesteuerte Muster, Publish-Subscribe-Muster und das Beobachtermuster in der Praxis nicht dasselbe sind, im Idealfall jedoch denselben Ansatz verwenden: Eine Entität sendet eine Nachricht und andere Entitäten warten darauf.

Das Publish-Subscribe-Muster ist so alt wie ich. Die Theoriebildung hierzu begann um 1987, und das Observer-Muster erschien 1994 in dem von der „Gang of Four“ verfassten Buch „Design Patterns“.

Wie wird ereignisgesteuerte Programmierung in JavaScript im Browser eingesetzt?

Mithilfe einer Engine kann JavaScript in Ihrem Browser ausgeführt werden.

Die beliebtesten JavaScript-Engines sind V8, das von Google Chrome und Node.js verwendet wird, SpiderMonkey, das von Firefox verwendet wird, und JavaScriptCore, das von Safari/WebKit verwendet wird.

Basierend auf der umfangreichen Umgebung verbessert die JavaScript-Engine die Sprache und bietet außerdem eine ereignisgesteuerte JavaScript-Plattform.

Tatsächlich kann JavaScript im Browser mit HTML-Elementen interagieren, bei denen es sich um Ereignisemitter handelt, also Objekte, die Ereignisse senden können.

Betrachten Sie dieses einfache Beispiel, ein HTML-Dokument mit einer Schaltfläche:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Was bedeutet „ereignisgesteuert“ in JavaScript?</title>
</Kopf>
<Text>
<div>
    <button id="subscribe">ABONNIEREN</button>
</div>
</body>
</html>

Ohne JavaScript wäre die Schaltfläche leblos. Jetzt sind HTML-Schaltflächen Elemente vom Typ HTMLButtonElement und wie alle HTML-Elemente sind sie mit EventTarget verbunden – dem gemeinsamen Vorgänger aller HTML-Elemente.

Ereignisziele in Browsern sind Objekte, die Ereignisse ausgeben können: Sie sind die Subjekte im Beobachtermuster.

Etwas verwirrend? Denken Sie daran: Das Thema ist UKW-Radio, daher verhält sich jedes HTML-Element wie ein Radiosender.

Gleich werden Sie sehen, wer der Beobachter ist.

Subjekte und Beobachter in Browsern

Wenn das HTML-Element das Subjekt ist, wer ist dann der Beobachter? Jede als Listener registrierte JavaScript-Funktion kann auf Ereignisse im Browser reagieren.

So wählen Sie ein HTML-Element mit JavaScript aus:

const btn = document.getElementById('abonnieren');

Und registrieren Sie den Listener mit addEventListener:

const btn = document.getElementById('abonnieren');
btn.addEventListener("klicken", Funktion () {
    console.log("Schaltfläche angeklickt");
});

Hier ist „Klick“ das Ereignis, die Schaltfläche das Subjekt oder der Absender und die Funktion der Zuhörer oder Beobachter.

Um es noch einmal zusammenzufassen:

HTML-Elemente sind Ereignisemitter.

In JavaScript als Listener registrierte Funktionen sind Beobachter.

Alle diese Komponenten bilden eine kleine ereignisgesteuerte Architektur. Um den Code zu testen, speichern Sie den folgenden HTML-Inhalt in einer Datei (oder probieren Sie ihn auf Codepen aus), klicken Sie auf die Schaltfläche und überprüfen Sie Ihre Browserkonsole:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Was bedeutet „ereignisgesteuert“ in JavaScript?</title>
</Kopf>
<Text>
<div>
    <button id="subscribe">ABONNIEREN</button>
</div>
</body>
<Skript>
    const btn = document.getElementById('abonnieren');
    btn.addEventListener("klicken", Funktion () {
        console.log("Schaltfläche angeklickt");
    });
</Skript>
</html>

Im nächsten Abschnitt sehen Sie, dass dasselbe Konzept für Node.js verwendet wird.

Wie funktioniert ereignisgesteuerte Programmierung in Node.js?

Node.js ist eine auf der V8-Engine basierende JavaScript-Umgebung, die außerhalb des Browsers ausgeführt wird (Befehlszeilentools und serverseitig).

Die meiste Arbeit, die Sie in Node.js erledigen, ist ereignisbasiert. Es gibt immer ein Absenderobjekt und einige Beobachter, die auf Nachrichten warten.

In Node.js gibt es keine HTML-Elemente, daher stammen die meisten Ereignisse aus Prozessen, Interaktionen mit dem Netzwerk, Dateien usw.

Jeder Ereignisemitter in Node.js verfügt über eine Methode, die aufgerufen wird und mindestens zwei Argumente annimmt:

  • Der Name des Ereignisses, auf das gewartet werden soll
  • Listener-Funktion

Nehmen wir ein praktisches Beispiel. Schauen Sie sich diesen einfachen Node.js-Server an:

const net = erfordern("net");
const server = net.createServer().listen(8081, "127.0.0.1");
server.on("zuhören", Funktion () {
  console.log("Server hört zu!");
});
server.on("Verbindung", Funktion (Socket) {
  console.log("Client verbunden!");
  socket.end("Hallo Client!");
});

Dieser Code erstellt einen Server, der auf Port 8081 auf dem lokalen Host lauscht. Auf dem Serverobjekt rufen wir die On-Methode auf, um zwei Listener-Funktionen zu registrieren.

Das Abhörereignis wird unmittelbar nach dem Start des Servers ausgelöst und das Verbindungsereignis wird ausgelöst, wenn ein Client eine Verbindung zu 127.0.0.1:8081 herstellt (probieren Sie es aus!).

In diesem Beispiel ist der Server der Absender des Ereignisses, der Betreff. Listener-Funktionen hingegen sind Beobachter.

Aber woher kommen diese Methoden?

EventEmitter verstehen

Alle ereignisgesteuerten Module in Node.js erweitern eine Stammklasse namens EventEmitter. In unserem vorherigen Beispiel verwendete der Netzwerkserver aus dem Netzmodul EventEmitter.

EventEmitter in Node.js hat zwei grundlegende Methoden: on und emit.

Wenn Sie dem Browser entsprechen möchten, können Sie sich EventEmitter als jedes beliebige HTML-Element vorstellen, das Ereignisse ausgeben kann.

Um im Browser auf Ereignisse zu warten, rufen Sie addEventListener für das Subjektobjekt auf:

const btn = document.getElementById('abonnieren');
btn.addEventListener("klicken", Funktion () {
    console.log("Schaltfläche angeklickt");
});

Im Gegensatz dazu haben wir in Node.js:

// weglassen
server.on("listening", () => {
  console.log("Server hört zu!");
});
// weglassen

Um genau zu sein, gibt es auch eine addListener-Methode für EventEmitter. on ist sein Alias.

EventEmitter verfügt auch über eine Emittierungsmethode, die beim Senden benutzerdefinierter Ereignisse (Nachrichten) nützlich ist.

Wenn Sie EventEmitter verwenden möchten, importieren Sie ihn aus dem Modul „Events“ und geben Sie Ereignisse aus:

const EventEmitter = erfordern("Ereignisse");
const emitter = neuer EventEmitter();
emitter.on("customEvent", () => console.log("Ereignis erhalten!"));
emitter.emit("benutzerdefiniertesEreignis");

Führen Sie den Code mit Node.js aus und Sie sehen „Got event“ in der Konsole.

Weitere Beispiele für Observer/Publish-Subscribe in JavaScript

JavaScript bietet keine native Unterstützung für Beobachterobjekte, es gibt jedoch Vorschläge, sie der Sprache hinzuzufügen.

RxJS ist eine Bibliothek, die das Beobachtermuster in JavaScript bringt.

Redux ist eine Implementierung des Publish-Subscribe-Musters in JavaScript. Dies ist ein sehr schöner Ereignisemitter, bei dem Zustandsänderungen an alle zuhörenden Beobachter verteilt werden.

Moderne Browser verfügen über die Intersection Observer API, die ein weiteres Beispiel für das Observer-Muster ist.

Socket.IO ist eine Bibliothek, die intensiv auf Ereignisse zurückgreift.

Zusammenfassen

Ich hoffe, Sie haben aus diesem Artikel etwas Neues gelernt. Sie lernen eine Menge Fachbegriffe, aber im Grunde läuft alles auf ein Muster hinaus, das vor etwa 30 Jahren erfunden wurde: Publizieren-Abonnieren.

Dieses Muster, auch als Beobachter bekannt, ist die Grundlage der ereignisgesteuerten Architektur, die wir heute in JavaScript und Node.js verwenden.

Auch hier sind ereignisgesteuerte Muster sowie Publish-Subscribe- und Observer-Muster nicht identisch: Ereignisgesteuerte Architekturen bauen auf Publish-Subscribe auf und das Observer-Muster ist umfangreicher als DOM- und Node.js-Ereignisse.

Aber sie sind alle Mitglieder derselben Familie.

Oben finden Sie eine kurze Erläuterung der Details der Ereignissteuerung in JS und Nodejs. Weitere Informationen zur Ereignissteuerung in JS und Nodejs finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • So verwenden Sie natives JS zum Implementieren von Touch-Sliding-Überwachungsereignissen
  • Detaillierte Erläuterung von JavaScript-WebAPI-, DOM-, Ereignis- und Operationselementbeispielen
  • Detaillierte Analyse des Event-Bubbling-Mechanismus in JavaScript
  • Analyse des Ereignisschleifenmechanismus von js
  • Detaillierte Erklärung des JS-Browser-Ereignismodells
  • Zusammenfassung der Ereignisbehandlung im Vue.js-Frontend-Framework
  • Detaillierte Erklärung zur Verwendung von Javascript zur Behandlung allgemeiner Ereignisse
  • Fallstudie zu JavaScript-Ereignisschleifen

<<:  Detaillierte Erläuterung der MySQL SQL-Anweisungsanalyse und Abfrageoptimierung

>>:  Vollständige Schritte zum Bereitstellen einer Front-End- und Back-End-getrennten Nginx-Konfiguration

Artikel empfehlen

MySQL 5.7.12 Installations- und Konfigurations-Tutorial unter Mac OS 10.11

So installieren und konfigurieren Sie MySQL auf M...

So erstellen Sie mit Dockerfile ein Spiegelbild der Java-Laufzeitumgebung

Die aktuelle Umgebung ist: Centos 7.5 docker-ce 1...

Jenkins+Gitlab+Nginx Bereitstellung einer Front-End-Anwendung

Inhaltsverzeichnis Zugehörige Abhängigkeitsinstal...

Verwenden Sie CSS, um zu verhindern, dass Lightbox die Anzeige des großen Bildcodes ohne Aktualisierung realisiert, wenn Sie auf ein kleines Bild klicken

Verwenden Sie CSS, um zu verhindern, dass Lightbo...

So installieren Sie MySQL in Docker

Ich habe kürzlich Django bereitgestellt und wollt...

So verwenden Sie den CSS-Stil, um die Schriftart in der Tabelle vertikal zu zentrieren

So können Sie mithilfe des CSS-Stils die Schrifta...

Der Unterschied zwischen z-index: 0 und z-index: auto in CSS

Ich habe vor Kurzem etwas über Stapelkontexte gel...

Erfahren Sie mehr über den Ereignisplaner EVENT in MySQL

Der Ereignisplaner in MySQL, EVENT, wird auch als...

Lösung für die leere Zeile vor der UTF-8-codierten Webseite, wenn sie Dateien enthält

<br />Die Seite verwendet die UTF8-Kodierung...

Auch Webdesigner müssen Web-Coding lernen

Oftmals wird nach der Fertigstellung eines Webdes...

So verwenden Sie JS zum Parsen des Excel-Inhalts in der Zwischenablage

Inhaltsverzeichnis Vorwort 1. Ereignisse und Zwis...

Ein kurzes Verständnis der drei Prinzipien zum Hinzufügen von MySQL-Indizes

1. Die Bedeutung von Indizes Indizes werden verwe...

jQuery kombiniert mit CSS, um die Funktion „Zurück zum Anfang“ zu erreichen

CSS-Operationen CSS $("").css(name|pro|...

Implementierung eines einfachen Timers basierend auf der Vue-Methode

Der einfache Timer von Vue dient Ihnen als Refere...

Analyse und Lösung des a.getAttribute(href,2)-Problems in IE6/7

Kurzbeschreibung <br />In IE6 und 7 wird in...