TOC

So erstellen Sie eine Suchleiste mit RxJS

Der Autor hat Mozilla Foundation ausgewählt, um eine Spende im Rahmen des Programms Write for DOnations zu erhalten.

Einführung

Reactive Programming ist ein Paradigma für asynchrone Datenströme, bei dem das Programmiermodell alles als Datenstrom betrachtet, der über die Zeit verteilt ist. Dies schließt Tastenanschläge, HTTP-Anforderungen, zu druckende Dateien und sogar Elemente eines Arrays ein, die als über sehr kleine Intervalle zeitgesteuert angesehen werden können. Dadurch passt es perfekt zu JavaScript, da in der Sprache häufig asynchrone Daten vorkommen.

RxJS ist eine beliebte Bibliothek für reaktive Programmierung in JavaScript. ReactiveX, das Dach, unter dem RxJS steht, hat seine Erweiterungen in vielen anderen Sprachen wie https://www.java.com [Java], https://www.python.org/ [Python], C++, Swift und Dart. RxJS wird auch häufig von Bibliotheken wie Angular und React verwendet.

Die Implementierung von RxJS basiert auf verketteten Funktionen, die Daten über einen bestimmten Zeitraum hinweg kennen und verarbeiten können. Dies bedeutet, dass man praktisch jeden Aspekt von RxJS mit nur Funktionen implementieren kann, die eine Liste von Argumenten und Rückrufen erhalten und diese dann ausführen können, wenn dies signalisiert wird. Die Community rund um RxJS hat diese Anstrengungen unternommen, und das Ergebnis ist eine API, die Sie direkt in jeder Anwendung verwenden können, um sauberen und wartbaren Code zu schreiben.

In diesem Lernprogramm erstellen Sie mit RxJS eine funktionsreiche Suchleiste, die den Benutzern Echtzeitergebnisse liefert. Sie werden auch HTML und CSS verwenden, um die Suchleiste zu formatieren. Das Endergebnis wird so aussehen:

image: https://assets.digitalocean.com/articles/CART-62307/introduction_search.gif [Demonstration der Suchleiste]

Etwas so übliches und scheinbar Einfaches wie eine Suchleiste muss über verschiedene Überprüfungen verfügen. Dieses Tutorial zeigt Ihnen, wie RxJS einen ziemlich komplexen Satz von Anforderungen in Code umwandeln kann, der leicht zu handhaben und zu verstehen ist.

Voraussetzungen

Bevor Sie mit diesem Lernprogramm beginnen, benötigen Sie Folgendes:

Den vollständigen Code für das Tutorial finden Sie unter Github.

Schritt 1 - Erstellen und Gestalten Ihrer Suchleiste

In diesem Schritt erstellen und gestalten Sie die Suchleiste mit HTML und CSS. Der Code verwendet einige häufig verwendete Elemente von Bootstrap, um die Strukturierung und Gestaltung der Seite zu beschleunigen, sodass Sie sich auf das Hinzufügen benutzerdefinierter Elemente konzentrieren können. Bootstrap ist ein CSS-Framework, das Vorlagen für allgemeine Elemente wie Typografie, Formulare, Schaltflächen, Navigation, Raster und andere Schnittstellenkomponenten enthält. Ihre Anwendung verwendet außerdem Animate.css, um der Suchleiste eine Animation hinzuzufügen.

Beginnen Sie mit dem Erstellen einer Datei mit dem Namen "+ search-bar.html " mit " nano +" oder Ihrem bevorzugten Texteditor:

nano search-bar.html

Erstellen Sie als Nächstes die Grundstruktur für Ihre Anwendung. Fügen Sie der neuen Datei den folgenden HTML-Code hinzu:

Suchleiste.html

<!DOCTYPE html>
<html>

 <head>
   <title>RxJS Tutorial</title>
   <!-- Load CSS -->

   <!-- Load Rubik font -->

   <!-- Add Custom inline CSS -->

 </head>

 <body>
     <!-- Content -->

     <!-- Page Header and Search Bar -->

     <!-- Results -->

     <!-- Load External RxJS -->

     <!-- Add custom inline JavaScript -->
     <script>

     </script>
 </body>

</html>

Wenn Sie CSS aus der gesamten Bootstrap-Bibliothek benötigen, laden Sie das CSS für Bootstrap und Animate.css.

Fügen Sie den folgenden Code unter dem Kommentar + Load CSS ein:

Suchleiste.html

...
<!-- Load CSS -->


...

In diesem Lernprogramm wird eine benutzerdefinierte Schriftart mit dem Namen Rubik aus der Bibliothek Google Fonts verwendet, um die Suchleiste zu formatieren. Laden Sie die Schriftart, indem Sie den hervorgehobenen Code unter dem Kommentar + Load Rubik font + einfügen:

Suchleiste.html

...
<!-- Load Rubik font -->

...

Fügen Sie als Nächstes das benutzerdefinierte CSS zur Seite unter dem Kommentar "+ Benutzerdefiniertes Inline-CSS hinzufügen" hinzu. Dadurch wird sichergestellt, dass die Überschriften, die Suchleiste und die Ergebnisse auf der Seite leicht zu lesen und zu verwenden sind.

Suchleiste.html

...
<!-- Add Custom inline CSS -->














































...

Nachdem Sie alle Stile eingerichtet haben, fügen Sie den HTML-Code hinzu, der die Kopfzeile und die Eingabeleiste unter dem Kommentar "+ Seitenkopfzeile und Suchleiste +" definiert:

Suchleiste.html

...
<!-- Content -->
<!-- Page Header and Search Bar -->

















...

Dies verwendet das Rastersystem von Bootstrap, um den Seitenkopf und die Suchleiste zu strukturieren. Sie haben der Suchleiste einen Bezeichner "+ Sucheingabe +" zugewiesen, mit dem Sie später im Lernprogramm an einen Listener binden.

Als Nächstes erstellen Sie einen Ort, an dem die Suchergebnisse angezeigt werden. Erstellen Sie unter dem Befehl "+ Results Of" ein "+ div" mit dem Bezeichner "+ response-list +", um die Ergebnisse später im Lernprogramm hinzuzufügen:

Suchleiste.html

...
<!-- Results -->







...

Zu diesem Zeitpunkt sieht die Datei + search-bar.html folgendermaßen aus:

Suchleiste.html

<!DOCTYPE html>
<html>

 <head>
   <title>RxJS Tutorial</title>
   <!-- Load CSS -->
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" />

   <!-- Load Rubik font -->
   <link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">

   <!-- Add Custom inline CSS -->
   <style>
     body {
       background-color: #f5f5f5;
       font-family: "Rubik", sans-serif;
     }

     .search-container {
       margin-top: 50px;
     }
     .search-container .search-heading {
       display: block;
       margin-bottom: 50px;
     }
     .search-container input,
     .search-container input:focus {
       padding: 16px 16px 16px;
       border: none;
       background: rgb(255, 255, 255);
       box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1) !important;
     }

     .results-container {
       margin-top: 50px;
     }
     .results-container .list-group .list-group-item {
       background-color: transparent;
       border-top: none !important;
       border-bottom: 1px solid rgba(236, 229, 229, 0.64);
     }

     .float-bottom-right {
       position: fixed;
       bottom: 20px;
       left: 20px;
       font-size: 20px;
       font-weight: 700;
       z-index: 1000;
     }
     .float-bottom-right .info-container .card {
       display: none;
     }
     .float-bottom-right .info-container:hover .card,
     .float-bottom-right .info-container .card:hover {
       display: block;
     }
   </style>
 </head>

 <body>
     <!-- Content -->
     <!-- Page Header and Search Bar -->
     <div class="container search-container">
       <div class="row justify-content-center">
         <div class="col-md-auto">
           <div class="search-heading">
             <h2>Search for Materials Published by Author Name</h2>
             <p class="text-right">powered by <a href="https://www.crossref.org/">Crossref</a></p>
           </div>
         </div>
       </div>
       <div class="row justify-content-center">
         <div class="col-sm-8">
           <div class="input-group input-group-md">
             <input id="search-input" type="text" class="form-control" placeholder="eg. Richard" aria-label="eg. Richard" autofocus>
           </div>
         </div>
       </div>
     </div>

     <!-- Results -->
     <div class="container results-container">
       <div class="row justify-content-center">
         <div class="col-sm-8">
           <ul id="response-list" class="list-group list-group-flush"></ul>
         </div>
       </div>
     </div>

     <!-- Load RxJS -->

     <!-- Add custom inline JavaScript -->
     <script>

     </script>
 </body>

</html>

In diesem Schritt haben Sie die Grundstruktur für Ihre Suchleiste mit HTML und CSS erstellt. Im nächsten Schritt schreiben Sie eine JavaScript-Funktion, die Suchbegriffe akzeptiert und Ergebnisse zurückgibt.

Schritt 2 - JavaScript schreiben

Nachdem Sie die Suchleiste formatiert haben, können Sie den JavaScript-Code schreiben, der als Grundlage für den RxJS-Code dient, den Sie später in diesem Lernprogramm schreiben werden. Dieser Code funktioniert mit RxJS, um Suchbegriffe zu akzeptieren und Ergebnisse zurückzugeben.

Da Sie die Funktionen von Bootstrap und JavaScript in diesem Lernprogramm nicht benötigen, werden Sie sie nicht laden. Sie werden jedoch RxJS verwenden. Laden Sie die RxJS-Bibliothek, indem Sie unter dem Kommentar + Load RxJS + Folgendes hinzufügen:

Suchleiste.html

...
<!-- Load RxJS -->

...

Jetzt speichern Sie Referenzen des + div + aus dem HTML, zu dem die Ergebnisse hinzugefügt werden. Fügen Sie den hervorgehobenen JavaScript-Code im Tag "+ <script> " unter dem Kommentar " Benutzerdefiniertes Inline-JavaScript hinzufügen" hinzu:

Suchleiste.html

...
<!-- Add custom inline JavaScript -->
<script>


</script>
...

Fügen Sie als Nächstes den Code hinzu, um die JSON-Antwort von der API in die HTML-Elemente zu konvertieren, die auf der Seite angezeigt werden sollen. Dieser Code löscht zuerst den Inhalt der Suchleiste und stellt dann eine Verzögerung für die Animation der Suchergebnisse ein.

Fügen Sie die hervorgehobene Funktion zwischen den Tags + <script> + ein:

Suchleiste.html

...
<!-- Add custom inline JavaScript -->
<script>
   const output = document.getElementById("response-list");












<^>                <h5 class="mb-1">${(item['title'] && item['title'][0]) || "&lt;Title not available&gt;"}</h5>
















</script>
...

Der mit "+ if " beginnende Codeblock ist eine bedingte Schleife, die nach Suchergebnissen sucht und eine Meldung anzeigt, wenn keine Ergebnisse gefunden wurden. Wenn Ergebnisse gefunden werden, liefert die " forEach +" - Schleife eine Animation für den Benutzer.

In diesem Schritt haben Sie die Basis für den RxJS erstellt, indem Sie eine Funktion geschrieben, die Ergebnisse akzeptiert und auf der Seite zurückgibt. Im nächsten Schritt werden Sie die Suchleiste funktionsfähig machen.

Schritt 3 - Listener einrichten

RxJS befasst sich mit Datenströmen, bei denen es sich in diesem Projekt um eine Reihe von Zeichen handelt, die der Benutzer in das Eingabeelement oder die Suchleiste eingibt. In diesem Schritt fügen Sie dem Eingabeelement einen Listener hinzu, um auf Aktualisierungen zu warten.

Notieren Sie sich zunächst den Bezeichner "+ Sucheingabe +", den Sie zuvor im Lernprogramm hinzugefügt haben:

Suchleiste.html

...
<input  type="text" class="form-control" placeholder="eg. Richard" aria-label="eg. Richard" autofocus>
...

Als nächstes erstellen Sie eine Variable, die Referenzen für das Element + search-input enthält. Dies wird zum ` + Observable + `, mit dem der Code auf Eingabeereignisse wartet. "+ Observables " ist eine Sammlung zukünftiger Werte oder Ereignisse, die ein " Observer +" abhört und die auch als "Rückruffunktionen" bezeichnet werden.

Fügen Sie die hervorgehobene Zeile im Tag "+ <script> +" unter dem JavaScript aus dem vorherigen Schritt hinzu:

Suchleiste.html

...
     output.insertAdjacentHTML("beforeend", resultItem);
     animationDelay += 0.1;

   });
 }
}



...

Nachdem Sie der Referenzeingabe eine Variable hinzugefügt haben, verwenden Sie den Operator "+ fromEvent ", um auf Ereignisse zu warten. Dies fügt einen Listener für ein _DOM_- oder ** Document ** Object ** M ** odel-Element für eine bestimmte Art von Ereignis hinzu. Ein DOM-Element kann ein " html" -, "+ body" -, "+ div" - oder "+ img" -Element auf einer Seite sein. In diesem Fall ist Ihr DOM-Element die Suchleiste.

Fügen Sie die folgende hervorgehobene Zeile unter Ihrer Variablen "+ searchInput " hinzu, um Ihre Parameter an " fromEvent " zu übergeben. Ihr ` searchInput ` DOM-Element ist der erste Parameter. Darauf folgt das Ereignis " input +" als zweiter Parameter. Dies ist der Ereignistyp, auf den der Code wartet.

Suchleiste.html

...
     let searchInput = document.getElementById("search-input");

...

Nachdem Ihr Listener eingerichtet ist, erhält Ihr Code eine Benachrichtigung, sobald das Eingabeelement aktualisiert wird. Im nächsten Schritt werden Sie Operatoren verwenden, um auf solche Ereignisse zu reagieren.

Schritt 4 - Hinzufügen von Operatoren

+ Operatoren + sind reine Funktionen mit einer einzigen Aufgabe: eine Operation an Daten durchzuführen. In diesem Schritt verwenden Sie Operatoren, um verschiedene Aufgaben auszuführen, z. B. das Puffern des Parameters "+ input +", das Erstellen von HTTP-Anforderungen und das Filtern von Ergebnissen.

Sie stellen zunächst sicher, dass die Ergebnisse in Echtzeit aktualisiert werden, wenn der Benutzer Abfragen eingibt. Um dies zu erreichen, verwenden Sie das DOM-Eingabeereignis aus dem vorherigen Schritt. Das DOM-Eingabeereignis enthält verschiedene Details. Für dieses Lernprogramm interessieren Sie sich jedoch für Werte, die in das Zielelement eingegeben wurden. Fügen Sie den folgenden Code hinzu, um mit dem Operator "+ pluck +" ein Objekt zu nehmen und den Wert am angegebenen Schlüssel zurückzugeben:

Suchleiste.html

...
     let searchInput = document.getElementById("search-input");
     Rx.Observable.fromEvent(searchInput, 'input')

...

Nachdem die Ereignisse das erforderliche Format haben, legen Sie den Suchbegriff auf mindestens drei Zeichen fest. In vielen Fällen liefern weniger als drei Zeichen keine relevanten Ergebnisse, oder der Benutzer tippt immer noch.

Mit dem Operator "+ Filter " stellen Sie das Minimum ein. Die Daten werden weiter im Stream weitergeleitet, wenn sie die angegebene Bedingung erfüllen. Stellen Sie die Längenbedingung auf mehr als " 2 +" ein, damit mindestens drei Zeichen erforderlich sind.

Suchleiste.html

...
     let searchInput = document.getElementById("search-input");
     Rx.Observable.fromEvent(searchInput, 'input')
       .pluck('target', 'value')

...

Sie stellen außerdem sicher, dass Anforderungen nur in Abständen von 500 ms gesendet werden, um die Auslastung des API-Servers zu verringern. Zu diesem Zweck verwenden Sie den Operator "+ debounceTime ", um ein bestimmtes Mindestintervall zwischen den Ereignissen einzuhalten, die durch den Stream geleitet werden. Fügen Sie den markierten Code unter dem Operator " filter +" hinzu:

Suchleiste.html

...
     let searchInput = document.getElementById("search-input");
     Rx.Observable.fromEvent(searchInput, 'input')
       .pluck('target', 'value')
       .filter(searchTerm => searchTerm.length > 2)

...

Die Anwendung sollte den Suchbegriff auch ignorieren, wenn sich seit dem letzten API-Aufruf nichts geändert hat. Dadurch wird die Anwendung optimiert, indem die Anzahl der gesendeten API-Aufrufe weiter verringert wird.

Beispielsweise kann ein Benutzer "+ super cars " eingeben, das letzte Zeichen löschen (wobei der Begriff " super car " verwendet wird) und dann das gelöschte Zeichen wieder hinzufügen, um den Begriff wieder auf " super cars +" zurückzusetzen. Infolgedessen hat sich der Begriff nicht geändert, und daher sollten sich die Suchergebnisse nicht ändern. In solchen Fällen ist es sinnvoll, keine Operationen durchzuführen.

Sie verwenden den Operator "+ distinctUntilChanged +", um dies zu konfigurieren. Dieser Operator merkt sich die vorherigen Daten, die über den Stream übertragen wurden, und übergibt nur dann andere Daten, wenn sie unterschiedlich sind.

Suchleiste.html

...
     let searchInput = document.getElementById("search-input");
     Rx.Observable.fromEvent(searchInput, 'input')
       .pluck('target', 'value')
       .filter(searchTerm => searchTerm.length > 2)
       .debounceTime(500)

...

Nachdem Sie die Eingaben des Benutzers geregelt haben, fügen Sie den Code hinzu, der die API mit dem Suchbegriff abfragt. Dazu verwenden Sie die RxJS-Implementierung von AJAX. AJAX führt API-Aufrufe asynchron im Hintergrund auf einer geladenen Seite aus. Mit AJAX können Sie das erneute Laden der Seite mit Ergebnissen für neue Suchbegriffe vermeiden und die Ergebnisse auf der Seite aktualisieren, indem Sie die Daten vom Server abrufen.

Fügen Sie als Nächstes den Code hinzu, mit dem Sie "+ switchMap " verwenden, um AJAX mit Ihrer Anwendung zu verknüpfen. Sie werden auch " map " verwenden, um die Eingabe einer Ausgabe zuzuordnen. Dieser Code wendet die ihm übergebene Funktion auf jeden Gegenstand an, der von einem " Observable +" ausgegeben wird.

Suchleiste.html

...
     let searchInput = document.getElementById("search-input");
     Rx.Observable.fromEvent(searchInput, 'input')
       .pluck('target', 'value')
       .filter(searchTerm => searchTerm.length > 2)
       .debounceTime(500)
       .distinctUntilChanged()








...

Dieser Code unterteilt die API-Antwort in drei Teile:

  • + status +: Der vom API-Server zurückgegebene HTTP-Statuscode. Dieser Code akzeptiert nur "+ 200 +" - oder erfolgreiche Antworten.

  • + details +: Die tatsächlich empfangenen Antwortdaten. Dies wird die Ergebnisse für den abgefragten Suchbegriff enthalten.

  • + result_hash +: Ein Hash-Wert der vom API-Server zurückgegebenen Antworten, der für die Zwecke dieses Lernprogramms ein UNIX-Zeitstempel ist. Dies ist ein Hash von Ergebnissen, der sich ändert, wenn sich die Ergebnisse ändern. Mit dem eindeutigen Hash-Wert kann die Anwendung feststellen, ob sich die Ergebnisse geändert haben und aktualisiert werden sollten.

Systeme fallen aus und Ihr Code sollte auf Fehler vorbereitet sein. Verwenden Sie zum Behandeln von Fehlern, die im API-Aufruf auftreten können, den Operator "+ filter +", um nur erfolgreiche Antworten zu akzeptieren:

Suchleiste.html

...
     let searchInput = document.getElementById("search-input");
     Rx.Observable.fromEvent(searchInput, 'input')
       .pluck('target', 'value')
       .filter(searchTerm => searchTerm.length > 2)
       .debounceTime(500)
       .distinctUntilChanged()
       .switchMap(searchKey => Rx.Observable.ajax(`https://api.crossref.org/works?rows=50&query.author=${searchKey}`)
         .map(resp => ({
             "status" : resp["status"] == 200,
             "details" : resp["status"] == 200 ? resp["response"] : [],
             "result_hash": Date.now()
           })
         )
       )

...

Als Nächstes fügen Sie Code hinzu, um das DOM nur zu aktualisieren, wenn in der Antwort Änderungen festgestellt werden. DOM-Aktualisierungen können ressourcenintensiv sein, sodass sich eine Verringerung der Anzahl von Aktualisierungen positiv auf die Anwendung auswirkt. Da sich das "+ result_hash +" nur ändert, wenn sich eine Antwort ändert, werden Sie es verwenden, um diese Funktionalität zu implementieren.

Verwenden Sie dazu wie zuvor den Operator + distinctUntilChanged +. Der Code akzeptiert damit nur Benutzereingaben, wenn sich der Schlüssel geändert hat.

Suchleiste.html

...
     let searchInput = document.getElementById("search-input");
     Rx.Observable.fromEvent(searchInput, 'input')
       .pluck('target', 'value')
       .filter(searchTerm => searchTerm.length > 2)
       .debounceTime(500)
       .distinctUntilChanged()
       .switchMap(searchKey => Rx.Observable.ajax(`https://api.crossref.org/works?rows=50&query.author=${searchKey}`)
         .map(resp => ({
             "status" : resp["status"] == 200,
             "details" : resp["status"] == 200 ? resp["response"] : [],
             "result_hash": Date.now()
           })
         )
       )
       .filter(resp => resp.status !== false)

...

Sie haben zuvor den Operator "+ distinctUntilChanged +" verwendet, um festzustellen, ob sich die Gesamtheit der Daten geändert hat. In diesem Fall suchen Sie jedoch in der Antwort nach einem aktualisierten Schlüssel. Das Vergleichen der gesamten Antwort wäre im Vergleich zum Identifizieren von Änderungen in einem einzelnen Schlüssel ressourcenintensiv. Da der Schlüssel-Hash für die gesamte Antwort repräsentativ ist, kann er zuverlässig zum Identifizieren von Antwortänderungen verwendet werden.

Die Funktion akzeptiert zwei Objekte, den vorherigen Wert, den sie gesehen hat, und den neuen Wert. Wir überprüfen den Hash von diesen beiden Objekten und geben "+ True +" zurück, wenn diese beiden Werte übereinstimmen. In diesem Fall werden die Daten herausgefiltert und nicht weiter in der Pipeline übergeben.

In diesem Schritt haben Sie eine Pipeline erstellt, die einen vom Benutzer eingegebenen Suchbegriff empfängt und anschließend verschiedene Überprüfungen durchführt. Nach Abschluss der Prüfungen wird ein API-Aufruf durchgeführt und die Antwort in einem Format zurückgegeben, das dem Benutzer die Ergebnisse anzeigt. Sie haben die Ressourcennutzung sowohl auf der Client- als auch auf der Serverseite optimiert, indem Sie bei Bedarf die API-Aufrufe eingeschränkt haben. Im nächsten Schritt konfigurieren Sie die Anwendung so, dass das Eingabeelement abgehört wird, und übergeben die Ergebnisse an die Funktion, mit der es auf der Seite gerendert wird.

Schritt 5 - Alles mit einem Abonnement aktivieren

"+ subscribe " ist der letzte Operator des Links, mit dem der Beobachter die von " Observable +" ausgegebenen Datenereignisse sehen kann. Es implementiert die folgenden drei Methoden:

  • + onNext +: Gibt an, was zu tun ist, wenn ein Ereignis empfangen wird.

  • + onError +: Dies ist für die Behandlung von Fehlern verantwortlich. Aufrufe von "+ onNext " und " onCompleted +" werden nicht mehr durchgeführt, wenn diese Methode aufgerufen wird.

  • + onCompleted +: Diese Methode wird aufgerufen, wenn + onNext + zum letzten Mal aufgerufen wurde. Es werden keine Daten mehr in der Pipeline übergeben.

Diese Signatur eines Abonnenten ermöglicht es einem, eine schnelle Ausführung zu erreichen, dh die Fähigkeit, eine "+ Observable " - Pipeline zu definieren und sie nur dann in Gang zu setzen, wenn Sie sie abonnieren. Sie werden dieses Beispiel nicht in Ihrem Code verwenden, aber das Folgende zeigt Ihnen, wie ein " Observable +" abonniert werden kann:

Abonnieren Sie anschließend das "+ Observable +" und leiten Sie die Daten an die Methode weiter, die für das Rendern auf der Benutzeroberfläche verantwortlich ist.

Suchleiste.html

...
     let searchInput = document.getElementById("search-input");
     Rx.Observable.fromEvent(searchInput, 'input')
       .pluck('target', 'value')
       .filter(searchTerm => searchTerm.length > 2)
       .debounceTime(500)
       .distinctUntilChanged()
       .switchMap(searchKey => Rx.Observable.ajax(`https://api.crossref.org/works?rows=50&query.author=${searchKey}`)
         .map(resp => ({
             "status" : resp["status"] == 200,
             "details" : resp["status"] == 200 ? resp["response"] : [],
             "result_hash": Date.now()
           })
         )
       )
       .filter(resp => resp.status !== false)
       .distinctUntilChanged((a, b) => a.result_hash === b.result_hash)

...

Speichern und schließen Sie die Datei, nachdem Sie diese Änderungen vorgenommen haben.

Nachdem Sie den Code geschrieben haben, können Sie Ihre Suchleiste anzeigen und testen. Doppelklicken Sie auf die Datei "+ search-bar.html", um sie in Ihrem Webbrowser zu öffnen. Wenn der Code korrekt eingegeben wurde, wird Ihre Suchleiste angezeigt.

image: https://assets.digitalocean.com/articles/CART-62307/completed_searchbar.png [Die ausgefüllte Suchleiste]

Geben Sie Inhalt in Ihre Suchleiste ein, um ihn zu testen.

image: https: //assets.digitalocean.com/articles/CART-62307/test_searchbar.gif [Ein in die Suchleiste eingegebenes GIF mit dem Hinweis, dass zwei Zeichen keine Ergebnisse liefern.]

In diesem Schritt haben Sie das "+ Observable +" abonniert, um Ihren Code zu aktivieren. Sie haben jetzt eine stilisierte und funktionierende Suchleistenanwendung.

Fazit

In diesem Lernprogramm haben Sie eine funktionsreiche Suchleiste mit RxJS, CSS und HTML erstellt, die Benutzern Echtzeitergebnisse liefert. Die Suchleiste benötigt mindestens drei Zeichen, wird automatisch aktualisiert und sowohl für den Client als auch für den API-Server optimiert.

Was als komplexes Anforderungsset angesehen werden kann, wurde mit 18 Zeilen RxJS-Code erstellt. Der Code ist nicht nur leserfreundlich, sondern auch viel sauberer als eine eigenständige JavaScript-Implementierung. Dies bedeutet, dass Ihr Code in Zukunft einfacher zu verstehen, zu aktualisieren und zu warten ist.

Weitere Informationen zur Verwendung von RxJS finden Sie in der offiziellen API-Dokumentation unter official.

Related