本文共 24973 字，大约阅读时间需要 83 分钟。
rxjs 搜索
The author selected to receive a donation as part of the program.
作者选择作为计划的一部分接受捐赠。
is a paradigm concerned with asynchronous data streams, in which the programming model considers everything to be a stream of data spread over time. This includes keystrokes, HTTP requests, files to be printed, and even elements of an array, which can be considered to be timed over very small intervals. This makes it a perfect fit for JavaScript as asynchronous data is common in the language.
是与异步数据流有关的范例，在该模型中，编程模型将所有内容视为随时间分布的数据流。 这包括击键，HTTP请求，要打印的文件，甚至是数组的元素，可以认为这些元素的间隔很小。 由于异步数据在该语言中很常见，因此它非常适合JavaScript。
is a popular library for reactive programming in . , the umbrella under which RxJS lies, has its extensions in many other languages like , , , , and . RxJS is also widely used by libraries like Angular and React.
是一个流行的React库。 是RxJS的保护伞，它在 ， ， ， 和等许多其他语言中进行了扩展。 RxJS还被Angular和React之类的库广泛使用。
RxJS’s implementation is based on chained functions that are aware and capable of handling data over a range of time. This means that one could implement virtually every aspect of RxJS with nothing more than functions that receive a list of arguments and callbacks, and then execute them when signaled to do so. The community around RxJS has done this heavy lifting, and the result is an API that you can directly use in any application to write clean and maintainable code.
RxJS的实现基于链接的函数，这些函数知道并能够在一段时间内处理数据。 这意味着实际上可以使用接收参数列表和回调列表的函数来实现RxJS的几乎所有方面，然后在收到信号和回调指示时执行它们。 RxJS周围的社区已经完成了繁重的工作，结果是可以直接在任何应用程序中使用API编写干净且可维护的代码的API。
In this tutorial, you will use RxJS to build a feature-rich search bar that returns real-time results to users. You will also use HTML and CSS to format the search bar. The end result will look this this:
在本教程中，您将使用RxJS构建功能丰富的搜索栏，该搜索栏将实时结果返回给用户。 您还将使用HTML和CSS设置搜索栏的格式。 最终结果将如下所示：
Something as common and seemingly simple as a search bar needs to have various checks in place. This tutorial will show you how RxJS can turn a fairly complex set of requirements into code that is manageable and easy to understand.
与搜索栏一样常见且看似简单的东西需要进行各种检查。 本教程将向您展示RxJS如何将一组相当复杂的需求转化为可管理和易于理解的代码。
Before you begin this tutorial you’ll need the following:
在开始本教程之前，您需要满足以下条件：
A text editor that supports JavaScript syntax highlighting, such as , , or . These editors are available on Windows, macOS, and Linux.
支持JavaScript语法突出显示的文本编辑器，例如 ， 或 。 这些编辑器可在Windows，macOS和Linux上使用。
Familiarity with using HTML and JavaScript together. Learn more in .
熟悉同时使用HTML和JavaScript。 在了解更多信息。
Familiarity with the JSON data format, which you can learn more about in .
熟悉JSON数据格式，您可以在了解更多信息。
The full code for the tutorial is available on .
该教程的完整代码可在 。
In this step, you will create and style the search bar with HTML and CSS. The code will use a few common elements from to speed up the process of structuring and styling the page so you can focus on adding custom elements. Bootstrap is a CSS framework that contains templates for common elements like typography, forms, buttons, navigation, grids, and other interface components. Your application will also use to add animation to the search bar.
在此步骤中，您将使用HTML和CSS创建搜索栏并设置其样式。 该代码将使用的一些常用元素来加快页面的结构和样式设计过程，因此您可以集中精力添加自定义元素。 Bootstrap是一个CSS框架，其中包含用于常见元素的模板，例如版式，表单，按钮，导航，网格和其他界面组件。 您的应用程序还将使用将动画添加到搜索栏。
You will start start by creating a file named search-bar.html with nano or your favorite text editor:
您将首先使用nano或您喜欢的文本编辑器创建一个名为search-bar.html ：
Next, create the basic structure for your application. Add the following HTML to the new file:
接下来，为您的应用程序创建基本结构。 将以下HTML添加到新文件中：
RxJS Tutorial
As you need CSS from the entire Bootstrap library, go ahead and load the CSS for Bootstrap and Animate.css.
当您需要整个Bootstrap库中CSS时，请继续为Bootstrap和Animate.css加载CSS。
Add the following code under the Load CSS comment:
在“ Load CSS注释下添加以下代码：
... ...
This tutorial will use a custom font called from the library to style the search bar. Load the font by adding the highlighted code under the Load Rubik font comment:
本教程将使用库中的一种自定义字体来设置搜索栏的样式。 通过在“ Load Rubik font注释下添加突出显示的代码来Load Rubik font ：
... ...
Next, add the custom CSS to the page under the Add Custom inline CSS comment. This will make sure that the headings, search bar, and the results on the page are easy to read and use.
接下来，将“自定义CSS” Add Custom inline CSS到“ Add Custom inline CSS注释下的页面。 这样可以确保页面上的标题，搜索栏和结果易于阅读和使用。
... ...
Now that you have all of the styles in place, add the HTML that will define the header and the input bar under the Page Header and Search Bar comment:
现在，您已经拥有所有样式，在Page Header and Search Bar注释下面添加将定义标题和输入栏HTML：
......Search for Materials Published by Author Name
powered by Crossref
This uses the grid system from Bootstrap to structure the page header and the search bar. You have assigned a search-input identifier to the search bar, which you will use to bind to a listener later in the tutorial.
这将使用Bootstrap中的网格系统来构建页面标题和搜索栏。 您已经为搜索栏分配了search-input标识符，在本教程的后面部分将使用该标识符绑定到侦听器。
Next, you will create a location to display the results of the search. Under the Results comment, create a div with the response-list identifier to add the results later in the tutorial:
接下来，您将创建一个位置以显示搜索结果。 在Results注释下，创建一个带有response-list标识符的div ，以在本教程的后面部分添加结果：
......
At this point, the search-bar.html file will look like this:
此时， search-bar.html文件将如下所示：
RxJS Tutorial Search for Materials Published by Author Name
powered by Crossref
In this step, you’ve laid out the basic structure for your search bar with HTML and CSS. In the next step, you will write a JavaScript function that will accept search terms and return results.
在此步骤中，您已经使用HTML和CSS列出了搜索栏的基本结构。 在下一步中，您将编写一个JavaScript函数，该函数将接受搜索词并返回结果。
Now that you have the search bar formatted, you are ready to write the JavaScript code that will act as a foundation for the RxJS code that you’ll write later in this tutorial. This code will work with RxJS to accept search terms and return results.
既然已经设置了搜索栏的格式，那么您就可以编写JavaScript代码，该代码将作为RxJS代码的基础，您将在本教程的后面部分编写该代码。 该代码将与RxJS一起使用，以接受搜索词并返回结果。
Since you won’t need the functionalities that Bootstrap and JavaScript provide in this tutorial, you aren’t going to load them. However, you will be using RxJS. Load the RxJS library by adding the following under the Load RxJS comment:
由于您将不需要Bootstrap和JavaScript在本教程中提供的功能，因此您无需加载它们。 但是，您将使用RxJS。 通过在“ Load RxJS注释下添加以下内容来加载RxJS库：
... ...
Now you will store references of the div from the HTML to which the results will be added. Add the highlighted JavaScript code in the <script> tag under the Add custom inline JavaScript comment:
现在，您将存储将要添加结果HTML中div引用。 将突出显示JavaScript代码添加到<script>标记中的“ Add custom inline JavaScript注释下：
... ...
Next, add the code to convert the JSON response from the API into the HTML elements to display on the page. This code will first clear the contents of the search bar and then set a delay for the search result animation.
接下来，添加代码以将JSON响应从API转换为HTML元素以显示在页面上。 此代码将首先清除搜索栏的内容，然后为搜索结果动画设置延迟。
Add the highlighted function between the <script> tags:
在<script>标记之间添加突出显示的功能：
... ...
The code block starting with if is a conditional loop that checks for search results, and displays a message if no results were found. If results are found, then the forEach loop will provide the results with an animation to the user.
以if开头的代码块是一个条件循环，用于检查搜索结果，如果未找到结果，则显示一条消息。 如果找到结果，则forEach循环将为结果提供动画。
In this step, you laid out the base for the RxJS by writing out a function that can accept results and return it on the page. In the next step, you will make the search bar functional.
在此步骤中，您通过编写一个可以接受结果并将其返回到页面上的函数，为RxJS奠定了基础。 在下一步中，您将使搜索栏起作用。
RxJS is concerned with data streams, which in this project is a series of characters that the user enters in to the input element, or search bar. In this step, you will add a listener on the input element to listen for updates.
RxJS与数据流有关，在该项目中，数据流是用户输入到输入元素或搜索栏中的一系列字符。 在此步骤中，您将在输入元素上添加一个侦听器以侦听更新。
First, take note of the search-input identifier that you added earlier in the tutorial:
首先，记下您在本教程前面添加的search-input标识符：
......
Next, create a variable that will hold references for the search-input element. This will become the Observable that the code will use to listen for input events. Observables are a collection of future values or events that an Observer listens to, and are also known as callback functions.
接下来，创建一个变量，该变量将保留对search-input元素的引用。 这将成为代码用于侦听输入事件的Observable 。 Observables是Observer侦听的将来值或事件的集合，也称为回调函数 。
Add the highlighted line in the <script> tag under the JavaScript from the previous step:
在上一步JavaScript下的<script>标记中添加突出显示的行：
... output.insertAdjacentHTML("beforeend", resultItem); animationDelay += 0.1; }); }} let searchInput = document.getElementById("search-input");... Now that you’ve added a variable to reference input, you will use the fromEvent operator to listen for events. This will add a listener on a DOM, or Document Object Model, element for a certain kind of event. A DOM element could be a html, body, div, or img element on a page. In this case, your DOM element is the search bar.
现在，您已经添加了一个变量来引用输入，您将使用fromEvent运算符侦听事件。 这将添加一个监听器上DOM，或d ocumentØbject 中号奥德尔，元素某种事件。 DOM元素可以是页面上的html ， body ， div或img元素。 在这种情况下，您的DOM元素就是搜索栏。
Add the following highlighted line under your searchInput variable to pass your parameters to fromEvent. Your searchInput DOM element is the first parameter. This is followed by the input event as the second parameter, which is the event type the code will listen for.
在searchInput变量下添加以下突出显示的行，以将参数传递给fromEvent 。 您的searchInput DOM元素是第一个参数。 其次是input事件作为第二个参数，它是代码将侦听的事件类型。
... let searchInput = document.getElementById("search-input"); Rx.Observable.fromEvent(searchInput, 'input')... Now that your listener is set up, your code will receive a notification whenever any updates take place on the input element. In the next step you will use operators to take action on such events.
既然已经设置了侦听器，则只要输入元素发生任何更新，您的代码都会收到一条通知。 在下一步中，您将使用运算符对此类事件采取措施。
Operators are pure functions with one task—to perform an operation on data. In this step, you will use operators to perform various tasks such as buffering the input parameter, making HTTP requests, and filtering results.
Operators是具有一项任务的纯函数-对数据执行操作。 在此步骤中，您将使用运算符执行各种任务，例如缓冲input参数，发出HTTP请求以及过滤结果。
You will first make sure that the results update in real-time as the user enters queries. To achieve this, you will use the DOM input event from the previous step. The DOM input event contains various details, but for this tutorial you are interested in values typed into the target element. Add the following code to use the pluck operator to take an object and return the value at the specified key:
您首先要确保结果在用户输入查询时实时更新。 为此，您将使用上一步中的DOM输入事件。 DOM输入事件包含各种详细信息，但是在本教程中，您对键入到目标元素中的值感兴趣。 添加以下代码以使用pluck运算符获取对象并返回指定键处的值：
... let searchInput = document.getElementById("search-input"); Rx.Observable.fromEvent(searchInput, 'input') .pluck('target', 'value')... Now that the events are in the necessary format, you will set the search-term minimum to three characters. In many cases, anything less than three characters will not yield relevant results, or the user may still be in the process of typing.
现在事件已采用必要的格式，您将把搜索词的最小值设置为三个字符。 在许多情况下，少于三个字符的任何内容都不会产生相关结果，否则用户可能仍在输入过程中。
You will use the filter operator to set the minimum. It will pass the data further down the stream if it satisfies the specified condition. Set the length condition to greater than 2 to require at least three characters.
您将使用filter运算符设置最小值。 如果满足指定条件，它将把数据进一步向下传递。 将长度条件设置为大于2以要求至少三个字符。
... let searchInput = document.getElementById("search-input"); Rx.Observable.fromEvent(searchInput, 'input') .pluck('target', 'value') .filter(searchTerm => searchTerm.length > 2)... You will also make sure that requests are only sent in at 500ms intervals to ease up the load on the API server. To do this, you will use the debounceTime operator to maintain a minimum specified interval between each event that it passes through the stream. Add the highlighted code under the filter operator:
您还将确保仅以500ms的间隔发送请求，以减轻API服务器上的负载。 为此，您将使用debounceTime运算符在流经过每个事件的每个事件之间保持最小的指定间隔。 在filter运算符下添加突出显示的代码：
... let searchInput = document.getElementById("search-input"); Rx.Observable.fromEvent(searchInput, 'input') .pluck('target', 'value') .filter(searchTerm => searchTerm.length > 2) .debounceTime(500)... The application should also ignore the search term if there have been no changes since the last API call. This will optimize the application by further reducing the number of sent API calls.
如果自上次API调用以来没有更改，则应用程序还应忽略搜索词。 通过进一步减少发送的API调用的数量，这将优化应用程序。
As an example, a user may type super cars, delete the last character (making the term super car), and then add the deleted character back to revert the term back to super cars. As a result, the term did not change, and therefore the search results should not change. In such cases it makes sense to not perform any operations.
作为示例，用户可以键入super cars ，删除最后一个字符(使它成为术语“ super car )，然后添加回去，以将术语恢复为super cars 。 结果，该术语未更改，因此搜索结果不应更改。 在这种情况下，不执行任何操作是有意义的。
You will use the distinctUntilChanged operator to configure this. This operator remembers the previous data that was passed through the stream and passes another only if it is different.
您将使用distinctUntilChanged运算符进行配置。 该运算符会记住之前通过数据流的数据，并且仅在数据不同时才传递另一个数据。
... let searchInput = document.getElementById("search-input"); Rx.Observable.fromEvent(searchInput, 'input') .pluck('target', 'value') .filter(searchTerm => searchTerm.length > 2) .debounceTime(500) .distinctUntilChanged()... Now that you have regulated the inputs from the user, you will add the code that will query the API with the search term. To do this, you will use the RxJS implementation of AJAX. AJAX makes API calls asynchronously in the background on a loaded page. AJAX will allow you to avoid reloading the page with results for new search terms and also update the results on the page by fetching the data from the server.
现在，您已经调整了用户的输入，您将添加将使用搜索词查询API的代码。 为此，您将使用AJAX的RxJS实现。 AJAX在加载页面的后台异步进行API调用。 AJAX将使您避免为页面重新加载新搜索词的结果，并通过从服务器获取数据来更新页面上的结果。
Next, add the code to use switchMap to chain AJAX to your application. You will also use map to map the input to an output. This code will apply the function passed to it to every item emitted by an Observable.
接下来，添加代码以使用switchMap将AJAX链接到您的应用程序。 您还将使用map将输入map到输出。 此代码将传递给它的函数应用于Observable发出的每个项目。
... 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() }) ) )... This code breaks the API response into three parts:
此代码将API响应分为三部分：
status: The HTTP status code returned by the API server. This code will only accept 200, or successful, responses.
status ：API服务器返回的HTTP状态代码。 此代码将仅接受200或成功的响应。
details: The actual response data received. This will contain the results for the queried search term.
details ：收到的实际响应数据。 这将包含查询的搜索词的结果。
result_hash: A hash value of the responses returned by the API server, which for the purpose of this tutorial is a UNIX time-stamp. This is a hash of results that changes when the results change. The unique hash value will allow the application to determine if the results have changed and should be updated.
result_hash ：API服务器返回的响应的哈希值，对于本教程而言，这是UNIX时间戳。 这是结果的哈希值，当结果更改时也会更改。 唯一的哈希值将允许应用程序确定结果是否已更改，是否应该更新。
Systems fail and your code should be prepared to handle errors. To handle errors that may happen in the API call, use the filter operator to only accept successful responses:
系统出现故障，您的代码应准备好处理错误。 要处理API调用中可能发生的错误，请使用filter运算符仅接受成功的响应：
... 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)... Next, you will add code to only update the DOM if changes are detected in the response. DOM updates can be a resource-heavy operation, so reducing the number of updates will have a positive impact on the application. Since the result_hash will only change when a response changes, you will use it to implement this functionality.
接下来，您将添加代码以仅在响应中检测到更改时才更新DOM。 DOM更新可能会占用大量资源，因此减少更新数量将对应用程序产生积极影响。 由于result_hash仅在响应更改时才会更改，因此您将使用它来实现此功能。
To do this, use the distinctUntilChanged operator like before. The code will use it to only accept user input when the key has changed.
为此，请像以前一样使用distinctUntilChanged运算符。 该代码将使用它仅在键更改后才接受用户输入。
... 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)... You previously used the distinctUntilChanged operator to see if the entirety of the data had changed, but in this instance, you check for an updated key in the response. Comparing the entire response would be resource-costly when compared to identifying changes in a single key. Since the key hash is representative of the whole response, it can confidently be used to identify response changes.
以前，您使用distinctUntilChanged运算符来查看整个数据是否已更改，但是在这种情况下，您需要检查响应中是否有更新的键。 与识别单个键的更改相比，比较整个响应将耗费资源。 由于键哈希代表整个响应，因此可以放心地将其用于标识响应更改。
The function accepts two objects, the previous value that it had seen and the new value. We check the hash from these two objects and return True when these two values match, in which case the data is filtered out and not passed further in the pipeline.
该函数接受两个对象，一个是先前看到的值，另一个是新值。 我们检查来自这两个对象的哈希，并在这两个值匹配时返回True ，在这种情况下，数据将被过滤掉，并且不会在管道中进一步传递。
In this step, you created a pipeline that receives a search term entered by the user and then performs various checks on it. After the checks are complete, it makes an API call and returns the response in a format that displays results back to the user. You optimized the resource usage on both the client and server side by limiting API calls when necessary. In the next step, you will configure the application to start listening on the input element, and pass the results to the function that will render it on the page.
在此步骤中，您创建了一个管道，该管道接收用户输入的搜索词，然后对其进行各种检查。 检查完成后，它将进行API调用，并以将结果显示给用户的格式返回响应。 通过在必要时限制API调用，可以优化客户端和服务器端的资源使用。 在下一步中，您将配置应用程序以开始侦听输入元素，并将结果传递给将其呈现在页面上的函数。
subscribe is the final operator of the link that enables the observer to see data events emitted by the Observable. It implements the following three methods:
subscribe是链接的最终运算符，它使观察者可以查看Observable发出的数据事件。 它实现了以下三种方法：
onNext: This specifies what to do when an event is received.
onNext ：这指定接收事件时的操作。
onError: This is responsible for handling errors. Calls to onNext and onCompleted will not be made once this method is called.
onError ：负责处理错误。 调用此方法后，将不会再调用onNext和onCompleted 。
onCompleted: This method is called when onNext has been called for the final time. There would be no more data that will be passed in the pipeline.
onCompleted ：在最后一次调用onNext时调用此方法。 将没有更多的数据将在管道中传递。
This signature of a subscriber is what enables one to achieve lazy execution, which is the ability to define an Observable pipeline and set it in motion only when you subscribe to it. You won’t use this example in your code, but the following shows you how an Observable can be subscribed to:
订户的此签名使人能够实现延迟执行 ，这是一种定义Observable管道并将其设置为仅在您订阅时才启动的能力。 您不会在代码中使用此示例，但是以下内容显示了如何订阅Observable ：
Next, subscribe to the Observable and route the data to the method that is responsible for rendering it in the UI.
接下来，订阅Observable并将数据路由到负责在UI中呈现数据的方法。
... 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) .subscribe(resp => showResults(resp.details));... Save and close the file after making these changes.
进行这些更改后，保存并关闭文件。
Now that you’ve completed writing the code, you are ready to view and test your search bar. Double-click the search-bar.html file to open it in your web browser. If the code was entered in correctly, you will see your search bar.
现在，您已经完成了编写代码的准备，您可以查看和测试搜索栏了。 双击search-bar.html文件以在Web浏览器中将其打开。 如果输入的代码正确，您将看到搜索栏。
Type content in your search bar to test it out.
在搜索栏中输入内容进行测试。
In this step, you subscribed to the Observable to activate your code. You now have a stylized and functioning search bar application.
在此步骤中，您预订了Observable来激活代码。 您现在有了一个风格化且功能良好的搜索栏应用程序。
In this tutorial, you created a feature-rich search bar with RxJS, CSS, and HTML that provides real-time results to users. The search bar requires a minimum of three characters, updates automatically, and is optimized for both the client and the API server.
在本教程中，您使用RxJS，CSS和HTML创建了功能丰富的搜索栏，可为用户提供实时结果。 搜索栏至少需要三个字符，并会自动更新，并且针对客户端和API服务器进行了优化。
What could be considered a complex set of requirements was created with 18 lines of RxJS code. The code is not only reader-friendly, but it is also much cleaner than a standalone JavaScript implementation. This means that your code will be easier to understand, update, and maintain in the future.
用18行RxJS代码创建了一套复杂的需求。 该代码不仅易于阅读，而且比独立JavaScript实现干净得多。 这意味着将来您的代码将更易于理解，更新和维护。
To read more about using RxJS, check out the .
要了解有关使用RxJS的更多信息，请查阅 。
翻译自:
rxjs 搜索
转载地址：http://fthgb.baihongyu.com/