Key Takeaways

• reaktive Programmierung ist eine Programmverfahren mit gleichzeitigen Datenstr?men, die asynchron sein k?nnen. Es kann auf Programmierprobleme angewendet werden, da ein CPU einen Informationsstrom aus Anweisungen und Daten verarbeitet.
• Die reaktive Erweiterungen für JavaScript (RXJS) -Bibliothek verwendet Methodenketten und führt Observables (Produzenten) und Beobachter (Verbraucher) ein. Die beiden Arten von Observablen sind hei?e Observablen, die auch dann drücken, wenn sie nicht abonniert werden, und kalte Observables, die nur dann drücken, wenn sie abonniert werden.
• Observables k?nnen aus Arrays, Versprechen, Funktionen und Generatoren erstellt werden und k?nnen verwendet werden, um mehrere asynchrone Rückgaberückwerte bereitzustellen. Observablen drücken Werte und k?nnen das n?chste Ereignis nicht erzwingen.
• rxjs bietet vielen Betreibern, die Parallelit?t einführen, wie Gas, Intervall oder Verz?gerung. Diese k?nnen verwendet werden, um Ereignisse über ein bestimmtes Zeitintervall zu aggregieren, oder um die Eingabe nach einer bestimmten Leerlaufzeit nur zu starten.
rxjs erleichtert die reaktive Programmierung in JavaScript. Es vereint einige der Konzepte der reaktiven Programmierung in einer Reihe von Methoden, die pr?gnant und komponierbar sind. Es hat auch nützliche Erweiterungen wie RXJS-DOM, was die Interaktion mit dem Dom.
• vereinfacht

Dieser Artikel wurde von Moritz Kr?ger, Bruno Mota und Vildan Softic überprüft. Vielen Dank an alle Peer -Rezensenten von SitePoint, die SitePoint -Inhalte so gut wie m?glich gemacht haben!

Bevor wir uns mit dem Thema befassen, müssen wir die entscheidende Frage beantworten: Was ist reaktive Programmierung? Bis heute ist die beliebteste Antwort, dass die reaktive Programmierung die Programmierung mit gleichzeitigen Datenstr?men ist. Meistens werden wir das durch Asynchron ersetzte Wort feststellen, aber wir werden sp?ter sehen, dass der Stream nicht asynchron sein muss.

Es ist leicht zu erkennen, dass der Ansatz ?Alles ist ein Stream“ direkt auf unsere Programmierprobleme angewendet werden kann. Schlie?lich ist eine CPU nichts weiter als ein Ger?t, das einen Informationsstrom verarbeitet, der aus Anweisungen und Daten besteht. Unser Ziel ist es, diesen Strom zu beobachten und zu transformieren, wenn bestimmte Daten.

Die Prinzipien der reaktiven Programmierung sind für JavaScript nicht vollst?ndig neu. Wir haben bereits Dinge wie Eigenschaftenbindung, das EventEmitter -Muster oder Node.js -Streams. Manchmal ist die Eleganz dieser Methoden mit einer verminderten Leistung, überm??ig komplizierten Abstraktionen oder Problemen beim Debuggen verbunden. Normalerweise sind diese Nachteile im Vergleich zu den Vorteilen der neuen Abstraktionsschicht minimal. Unsere minimalen Beispiele werden natürlich nicht die übliche Anwendung widerspiegeln, sondern so kurz und pr?zise wie m?glich.

ohne weiteres, lassen Sie uns die H?nde schmutzig machen, indem wir mit den reaktiven Erweiterungen für die JavaScript (RXJS) -Bibliothek spielen. RXJS verwendet viel Ketten, eine beliebte Technik, die auch in anderen Bibliotheken wie JQuery verwendet wird. Eine Anleitung zur Verkettung von Methoden (im Kontext von Ruby) ist auf SitePoint verfügbar.

Stream -Beispiele

Bevor wir in RXJS eintauchen, sollten wir einige Beispiele auflisten, mit denen wir sp?ter arbeiten k?nnen. Dies wird auch die Einführung in reaktive Programmierung und Streams im Allgemeinen abschlie?en.

Im Allgemeinen k?nnen wir zwei Arten von Str?men unterscheiden: intern und extern. W?hrend ersterer als künstlich und innerhalb unserer Kontrolle angesehen werden kann, stammen letztere aus Quellen, die über unsere Kontrolle hinausgehen. Externe Streams k?nnen (direkt oder indirekt) aus unserem Code ausgel?st werden.

Normalerweise warten Streams nicht auf uns. Sie passieren, ob wir mit ihnen umgehen k?nnen oder nicht. Wenn wir beispielsweise Autos auf einer Stra?e beobachten m?chten, k?nnen wir den Autos nicht neu starten. Der Strom geschieht unabh?ngig von, wenn wir ihn beobachten oder nicht. In der RX -Terminologie nennen wir dies eine hei?e Beobachtbare . RX führt auch kalte Observables ein, die sich eher wie Standard -Iteratoren verhalten, so dass die Informationen aus dem Stream aus allen Elementen für jeden Beobachter bestehen.

Die folgenden Bilder veranschaulichen einige externe Arten von Streams. Wir sehen, dass (früher gestartete) Anfragen und im Allgemeinen im Allgemeinen auf Webhaken eingerichtet werden, sowie UI -Ereignisse wie Maus- oder Tastaturinteraktionen. Schlie?lich k?nnen wir auch Daten von Ger?ten erhalten, z. B. GPS -Sensoren, einem Beschleunigungsmesser oder anderen Sensoren.

Das Bild enthielt auch einen Stream, der als Nachrichten bezeichnet wurde. Nachrichten k?nnen in mehreren Formen angezeigt werden. Eine der einfachsten Formen ist eine Kommunikation zwischen unserer Website und einer anderen Website. Weitere Beispiele sind die Kommunikation mit Websockets oder Web Workers. Lassen Sie uns einen Beispielcode für letztere sehen.

Der Code des Arbeiters wird unten dargestellt. Der Code versucht, die Primzahlen von 2 bis 10 ¹⁰ zu finden. Sobald eine Zahl gefunden wurde, wird das Ergebnis gemeldet.

<span>(function (start<span>, end</span>) {
</span>    <span>var n = start - 1;
</span>
    <span>while (n++ < end) {
</span>        <span>var k = Math.sqrt(n);
</span>        <span>var found = false;
</span>
        <span>for (var i = 2; !found && i <= k; ++i) {
</span>            found <span>= n % i === 0;
</span>        <span>}
</span>
        <span>if (!found) {
</span>            <span>postMessage(n.toString());
</span>        <span>}
</span>    <span>}
</span><span>})(2, 1e10);
</span>

klassischisch ist der Webarbeiter (angenommen, dass er in der Datei Prime.js liegt) wie folgt. Für die Kürze überspringen wir Schecks über die Unterstützung und die Legalit?t des zurückgegebenen Ergebniss der Webarbeiter.

<span>var worker = new Worker('prime.js');
</span>worker<span>.addEventListener('message', function (ev) {
</span>    <span>var primeNumber = ev.data * 1;
</span>    <span>console.log(primeNumber);
</span><span>}, false);
</span>

Weitere Details zu Web Workers und Multi-Threading mit JavaScript finden Sie im Artikel Parallel JavaScript mit parallel.js.

In Anbetracht des obigen Beispiels wissen wir, dass Primzahlen einer asymptotischen Verteilung zwischen den positiven Ganzzahlen folgen. Für x bis ∞ erhalten wir eine Verteilung von x / log (x). Dies bedeutet, dass wir am Anfang mehr Zahlen sehen werden. Hier sind die Schecks auch viel billiger (d. H. Wir erhalten zu Beginn viel mehr Primzahlen pro Zeiteinheit als sp?ter.)

Dies kann mit einer einfachen Zeitachse und Blobs für die Ergebnisse veranschaulicht werden:

Ein nicht bezogenes, aber ?hnliches Beispiel kann anhand der Eingabe eines Benutzers in ein Suchfeld angegeben werden. Zun?chst kann der Benutzer begeistert sein, etwas einzugeben, nach dem sie suchen k?nnen. Je spezifischer seine Anfrage jedoch wird, desto gr??er wird der Zeitunterschied zwischen den Schlüsselstrichen. Die M?glichkeit zu geben, Live -Ergebnisse zu zeigen, ist definitiv wünschenswert, um dem Benutzer bei der Verengung seiner Anfrage zu helfen. Was wir jedoch nicht wollen, ist eine Anfrage für jeden wichtigen Schlaganfall, zumal die ersten sehr schnell und ohne nachzudenken oder die Notwendigkeit zu spezialisieren.

In beiden Szenarien besteht die Antwort darin, frühere Ereignisse über ein bestimmtes Zeitintervall zu aggregieren. Ein Unterschied zwischen den beiden beschriebenen Szenarien besteht darin, dass die Primzahlen immer nach dem angegebenen Zeitintervall angezeigt werden sollten (d. H. Einige der Primzahlen sind in der Pr?sentation nur m?glicherweise verz?gert). Im Gegensatz dazu würde die Suchabfrage nur dann eine neue Anfrage ausl?sen, wenn w?hrend des angegebenen Intervalls kein Schlüsselschlag aufgetreten ist. Daher wird der Timer zurückgesetzt, sobald ein Schlüsselschlag erkannt wurde.

rxjs zur Rettung

rx ist eine Bibliothek zum Komponieren asynchroner und ereignisbasierter Programme mit beobachtbaren Sammlungen. Es ist bekannt für seine deklarative Syntax und Kompositionsf?higkeit, w?hrend ein einfaches Zeit- und Fehlermodell für die Handhabung und Fehler eingeführt wird. Wenn wir an unsere früheren Beispiele denken, interessieren wir uns besonders für die Zeithandhabung. Trotzdem werden wir sehen, dass es in RXJs viel mehr gibt, von denen wir profitieren k?nnen.

Die grundlegenden Bausteine ??von RXJs sind Observables (Produzenten) und Beobachter (Verbraucher). Wir haben bereits die beiden Arten von Observablen erw?hnt:

• hei?e Observables dr?ngen auch, wenn wir nicht abonniert sind (z. B. UI -Ereignisse).
• Cold Observables beginnen nur, wenn wir abonnieren. Sie beginnen von vorne, wenn wir uns erneut abonnieren.

kalte Observable beziehen sich normalerweise auf Arrays oder Einzelwerte, die in RXJs verwendet werden sollen. Zum Beispiel erstellt der folgende Code ein kaltes Beobachtbar, das vor Abschluss nur einen einzelnen Wert ergibt:

<span>(function (start<span>, end</span>) {
</span>    <span>var n = start - 1;
</span>
    <span>while (n++ < end) {
</span>        <span>var k = Math.sqrt(n);
</span>        <span>var found = false;
</span>
        <span>for (var i = 2; !found && i <= k; ++i) {
</span>            found <span>= n % i === 0;
</span>        <span>}
</span>
        <span>if (!found) {
</span>            <span>postMessage(n.toString());
</span>        <span>}
</span>    <span>}
</span><span>})(2, 1e10);
</span>

Wir k?nnen auch eine Funktion mit Reinigungslogik aus der beobachtbaren Erstellungsfunktion zurückgeben.

Abonnieren des Beobachtbaren ist unabh?ngig von der Art von Beobachtbar. Für beide Typen k?nnen wir drei Funktionen bereitstellen, die die grundlegende Anforderung der Benachrichtigungsgrammatik erfüllen, die aus OnNext, OnError und On -Completed besteht. Der Onnext -Rückruf ist obligatorisch.

<span>var worker = new Worker('prime.js');
</span>worker<span>.addEventListener('message', function (ev) {
</span>    <span>var primeNumber = ev.data * 1;
</span>    <span>console.log(primeNumber);
</span><span>}, false);
</span>

Als bew?hrte Verfahren sollten wir das Abonnement mit der Entsendungsmethode beenden. Dadurch werden alle erforderlichen Bereinigungsschritte durchgeführt. Andernfalls kann es m?glich sein, zu verhindern, dass die Müllsammlung nicht verwendete Ressourcen aufr?umt.

ohne abonnieren, das in der Variablen beobachtbare beobachtbare ist nur ein kaltes beobachtbares. Trotzdem ist es auch m?glich, sie mit der Ver?ffentlichungsmethode in eine hei?e Sequenz (d. H. Wir führen ein Pseudo -Abonnement durch) um.

.

<span>(function (start<span>, end</span>) {
</span>    <span>var n = start - 1;
</span>
    <span>while (n++ < end) {
</span>        <span>var k = Math.sqrt(n);
</span>        <span>var found = false;
</span>
        <span>for (var i = 2; !found && i <= k; ++i) {
</span>            found <span>= n % i === 0;
</span>        <span>}
</span>
        <span>if (!found) {
</span>            <span>postMessage(n.toString());
</span>        <span>}
</span>    <span>}
</span><span>})(2, 1e10);
</span>

Einige der in RXJs enthaltenen Helfer befassen sich nur mit der Konvertierung vorhandener Datenstrukturen. In JavaScript k?nnen wir zwischen drei von ihnen unterscheiden:

Versprechen für die Rückkehr einzelner asynchroner Ergebnisse,
Funktionen für einzelne Ergebnisse und
Generatoren für die Bereitstellung von Iteratoren.

Letzteres ist neu mit ES6 und kann durch Arrays (obwohl dies ein schlechter Ersatz ist und als einzelner Wert behandelt werden sollte) für ES5 oder ?lter.

rxjs bringt nun einen Datentyp zur Bereitstellung asynchroner Mehrwertunterstützung (Rückgabe). Daher sind die vier Quadranten jetzt ausgefüllt.

W?hrend Iteratoren gezogen werden müssen, werden die Werte von Observablen gedrückt. Ein Beispiel w?re ein Ereignisstrom, bei dem wir das n?chste Ereignis nicht erzwingen k?nnen. Wir k?nnen nur warten, um durch die Ereignisschleife benachrichtigt zu werden.

<span>var worker = new Worker('prime.js');
</span>worker<span>.addEventListener('message', function (ev) {
</span>    <span>var primeNumber = ev.data * 1;
</span>    <span>console.log(primeNumber);
</span><span>}, false);
</span>

Die meisten Helfer, die Observablen erstellen oder mit dem Umgang mit einem Scheduler erstellen oder mit dem Start eines Abonnements steuern, und wenn Benachrichtigungen ver?ffentlicht werden. Wir werden hier nicht auf Details eingehen, da der Standardplaner für die meisten praktischen Zwecke gut funktioniert.

Viele Operatoren in RXJs führen zu Parallelit?t wie Gas, Intervall oder Verz?gerung. Wir werden uns nun einen weiteren Blick auf die vorherigen Beispiele werfen, in denen diese Helfer unerl?sslich werden.

Beispiele

Schauen wir uns zuerst unseren Prime -Number -Generator an. Wir wollten die Ergebnisse über eine bestimmte Zeit zusammenh?ngen, so dass die Benutzeroberfl?che (insbesondere am Anfang) nicht mit zu vielen Updates zu tun hat.

Hier m?chten wir vielleicht die Pufferfunktion von RXJs in Verbindung mit dem zuvor erw?hnten Intervallhelfer verwenden.

Das Ergebnis sollte durch das folgende Diagramm dargestellt werden. Die grünen Blobs entstehen nach einem bestimmten Zeitintervall (angegeben durch die Zeit, die zum Konstruktionsintervall verwendet wird). Ein Puffer aggregiert alle gesehenen blauen Blobs w?hrend eines solchen Intervalls.

Darüber hinaus k?nnen wir auch eine Karte einführen, die uns hilft, Daten zu transformieren. Zum Beispiel m?chten wir die empfangenen Ereignisargumente m?glicherweise um die übertragenen Daten als Zahl verwandeln.

<span>var observable = Rx.<span>Observable</span>.create(function (observer) {
</span>  observer<span>.onNext(42);
</span>  observer<span>.onCompleted();
</span><span>});
</span>

Die Fromevent -Funktion konstruiert ein beobachtbares aus jedem Objekt unter Verwendung des Standard -Ereignisemittermusters. Der Puffer würde auch Arrays mit einer L?nge von Null zurückgeben, weshalb wir die Funktionsweise der Funktion vorstellen, um den Strom auf nicht leere Arrays zu reduzieren. Schlie?lich interessieren wir uns in diesem Beispiel nur an der Anzahl der generierten Primzahlen. Daher kartieren wir den Puffer, um seine L?nge zu erhalten.

Das andere Beispiel ist das Suchabfragefeld, das nur nach einer bestimmten Leerlaufzeit gestartet werden sollte, um nur Anfragen zu starten. Es gibt zwei Funktionen, die in einem solchen Szenario nützlich sein k?nnen: Die Gasfunktion ergibt den ersten Eintrag in einem bestimmten Zeitfenster. Die Dbarl -Funktion ergibt den letzten Eintrag in einem bestimmten Zeitfenster. Die Zeitfenster werden auch entsprechend verschoben (d. H. Relativ zum ersten / letzten Element).

Wir wollen ein Verhalten erreichen, das sich in der folgenden Abbildung widerspiegelt. Daher werden wir den Entlüftungsmechanismus verwenden.

Wir m?chten alle vorherigen Ergebnisse wegwerfen und nur den letzten erhalten, bevor das Zeitfenster ersch?pft ist. Unter der Annahme, dass das Eingabefeld die ID -Abfrage hat, k?nnen wir den folgenden Code verwenden:

<span>(function (start<span>, end</span>) {
</span>    <span>var n = start - 1;
</span>
    <span>while (n++ < end) {
</span>        <span>var k = Math.sqrt(n);
</span>        <span>var found = false;
</span>
        <span>for (var i = 2; !found && i <= k; ++i) {
</span>            found <span>= n % i === 0;
</span>        <span>}
</span>
        <span>if (!found) {
</span>            <span>postMessage(n.toString());
</span>        <span>}
</span>    <span>}
</span><span>})(2, 1e10);
</span>

In diesem Code ist das Fenster auf 300 ms festgelegt. Au?erdem beschr?nken wir Abfragen für Werte mit mindestens 3 Zeichen, die sich von früheren Abfragen unterscheiden. Dies beseitigt unn?tige Anfragen nach Eing?ngen, die gerade korrigiert wurden, indem Sie etwas eingeben und l?schen.

Es gibt zwei entscheidende Teile in diesem gesamten Ausdruck. Einer ist die Transformation des Abfragetextes in eine Anforderung mit der Suche, die andere ist die Funktion Switch (). Letzteres nimmt jede Funktion, die verschachtelte Observablen zurückgibt und Werte nur aus der neuesten beobachtbaren Sequenz erzeugt.

Die Funktion zum Erstellen der Anforderungen kann wie folgt definiert werden:

<span>var worker = new Worker('prime.js');
</span>worker<span>.addEventListener('message', function (ev) {
</span>    <span>var primeNumber = ev.data * 1;
</span>    <span>console.log(primeNumber);
</span><span>}, false);
</span>

Beachten Sie das verschachtelte Beobachtbare (das für ungültige Anfragen zu undefiniert sein k?nnte). Deshalb verkettet wir Switch () und wo ().

Schlussfolgerungen

rxjs macht reaktive Programmierung in JavaScript zu einer freudigen Realit?t. Als Alternative gibt es auch Bacon.js, was ?hnlich funktioniert. Trotzdem ist RX selbst eines der besten Dinge an RXJS, das auf vielen Plattformen erh?ltlich ist. Dies macht den übergang zu anderen Sprachen, Plattformen oder Systemen ganz einfach. Es vereint auch einige der Konzepte der reaktiven Programmierung in einer Reihe von Methoden, die pr?zise und komponierbar sind. Darüber hinaus gibt es mehrere sehr nützliche Erweiterungen, wie z.

Wo sehen Sie Rxjs gl?nzen?

h?ufig gestellte Fragen zur funktionalen reaktiven Programmierung mit RXJS

Was ist der Unterschied zwischen funktionaler Programmierung und funktionaler reaktiver Programmierung? FP ist ein Programmstil, der die Berechnung als Bewertung der mathematischen Funktionen behandelt und die ?nderung des Zustands und der ver?nderlichen Daten vermeidet. Es betont die Anwendung von Funktionen im Gegensatz zum imperativen Programmierstil, der die ?nderungen des Zustands hervorhebt. Es kombiniert das reaktive Programmiermodell mit funktionaler Programmierung. In FRP k?nnen Sie statische (z. B. Arrays) und dynamische (z. B. Mausklicks, Webanforderungen) Datenstr?me ausdrücken und auf ihre ?nderungen reagieren. ??> rxjs (reaktive Erweiterungen für JavaScript) ist eine Bibliothek für reaktive Programmierung unter Verwendung von Observables, um die Verfeinerung von asynchronem oder radbackbasiertem Code zu erleichtern. Dies macht es perfekt für funktionale reaktive Programmierung. Mit RXJS k?nnen Sie Datenstr?me aus verschiedenen Quellen erstellen und auch mit den bereitgestellten Operatoren verwendeten, kombinieren, manipulieren oder auf diese Datenstr?me reagieren. Ein Kernkonzept in RXJs. Sie sind Datenstr?me, die im Laufe der Zeit mehrere Werte ausgeben k?nnen. Sie k?nnen drei Arten von Werten ausgeben: Weiter, Fehler und vollst?ndig. Die "n?chsten" -Werte k?nnen ein JavaScript -Objekt sein, "Fehler" ist ein Fehlerobjekt, wenn etwas schief geht, und "vollst?ndig" hat keinen Wert. Es signalisiert nur, dass das Beobachtbare keine Werte mehr emittiert.

Wie gehe ich mit Fehlern in RxJs um? Der CatchError -Operator f?ngt den Fehler auf der Quelle beobachtbar und setzt den Stream mit einem neuen beobachtbaren oder einem Fehler fort. Der Wiederholungsbetreiber beschreibt erneut die Quelle, die beobachtet werden kann, wenn er fehlschl?gt. "," filter "," conat "," reduzieren "usw. Es gibt Dutzende von Betreibern in RXJs, die verwendet werden k?nnen, um komplexe Manipulationen von Sammlungen zu bew?ltigen, unabh?ngig davon, ob es sich um Arrays von Elementen, Ereignisstr?men oder sogar Versprechen handelt.

Wie kann ich meinen RXJS -Code testen? Sie k?nnen auch Marmordiagramme zur Visualisierung von Observablen w?hrend des Tests verwenden.

Kann ich RXJs mit Angular verwenden? Es wird im HTTP -Modul von Angular verwendet und auch in der EventEmitter -Klasse, die für benutzerdefinierte Ereignisse verwendet wird.

Was ist der Unterschied zwischen Versprechen und Observablen? Ein Versprechen ist ein Wert, der m?glicherweise noch nicht verfügbar ist. Es kann nur einmal gel?st (erfüllt oder abgelehnt) werden. Andererseits ist ein Beobachtbar ein Wertestrom, der Null- oder mehr Werte aussagen kann, und es kann von einem oder abgemeldeten.

Wie kann ich mich von einem Beobachtbaren abmelden? Wenn Sie ein beobachtbares Abonnement abonnieren, erhalten Sie ein Abonnementobjekt. Sie k?nnen die METRSUBSCRIBE -Methode in diesem Objekt aufrufen, um das Abonnement zu stornieren und keine Daten zu empfangen. multikastiert für viele Beobachter. Im Gegensatz zu einfachen Observablen behalten die Probanden eine Registrierung vieler Zuh?rer bei.

Das obige ist der detaillierte Inhalt vonEinführung in die funktionale reaktive Programmierung mit RXJs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!