Как построить панель поиска с RxJS

_Автор выбрал Mozilla Foundation для получения пожертвования в рамках программы Write for DOnations.

Вступление

Reactive Programming - это парадигма, связанная с синхронными потоками данных, в которой модель программирования рассматривает все как поток данных, распределенных во времени. Это включает нажатия клавиш, HTTP-запросы, файлы для печати и даже элементы массива, которые можно считать синхронизированными по очень небольшим интервалам. Это делает его идеально подходящим для JavaScript, так как асинхронные данные распространены в языке.

RxJS - это популярная библиотека для реактивного программирования на JavaScript. ReactiveX, зонтик, под которым лежит RxJS, имеет свои расширения на многих других языках, таких как https://www.java.com [Java], https://www.python.org/ [Python], C++, Swift и Dart. RxJS также широко используется библиотеками, такими как Angular и React.

Реализация RxJS основана на связанных функциях, которые осведомлены и способны обрабатывать данные в течение определенного периода времени. Это означает, что можно реализовать практически каждый аспект RxJS с помощью не более чем функций, которые получают список аргументов и обратных вызовов, а затем выполняют их, когда о них поступает сигнал. Сообщество RxJS проделало эту тяжелую работу, и в результате появился API, который вы можете напрямую использовать в любом приложении для написания чистого и поддерживаемого кода.

В этом руководстве вы будете использовать RxJS для создания многофункциональной панели поиска, которая будет возвращать пользователям результаты в реальном времени. Вы также будете использовать HTML и CSS для форматирования панели поиска. Конечный результат будет выглядеть так:

изображение: https: //assets.digitalocean.com/articles/CART-62307/introduction_search.gif [Демонстрация панели поиска]

Что-то столь же общее и, казалось бы, простое, как панель поиска, должно иметь различные проверки. Этот урок покажет вам, как RxJS может превратить довольно сложный набор требований в код, который является управляемым и простым для понимания.

Предпосылки

Перед началом этого урока вам понадобится следующее:

Текстовый редактор, который поддерживает подсветку синтаксиса JavaScript, например http://atom.io [Atom], Visual Studio Code или https://www.sublimetext.com/ [ Возвышенный текст. Эти редакторы доступны в Windows, macOS и Linux.
Знакомство с использованием HTML и JavaScript вместе. Подробнее читайте в How To Add JavaScript to HTML.
Знакомство с форматом данных JSON, о котором вы можете узнать больше в How для работы с JSON в JavaScript ,

Полный код учебника доступен по адресу Github.

Шаг 1 - Создание и стилизация панели поиска

На этом шаге вы создадите и стилизуете панель поиска с помощью HTML и CSS. Код будет использовать несколько общих элементов из Bootstrap, чтобы ускорить процесс структурирования и стилизации страницы, чтобы вы могли сосредоточиться на добавлении пользовательских элементов. Bootstrap - это фреймворк CSS, который содержит шаблоны для общих элементов, таких как типография, формы, кнопки, навигация, сетки и другие компоненты интерфейса. Ваше приложение также будет использовать Animate.css, чтобы добавить анимацию в панель поиска.

Вы начнете с создания файла с именем + search-bar.html + с помощью + nano + или вашего любимого текстового редактора:

nano search-bar.html

Затем создайте базовую структуру для вашего приложения. Добавьте следующий HTML-код в новый файл:

поиск-bar.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>

Поскольку вам нужен CSS из всей библиотеки Bootstrap, продолжайте и загрузите CSS для Bootstrap и Animate.css.

Добавьте следующий код под комментарием + Load CSS +:

поиск-bar.html

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


...

В этом руководстве будет использоваться пользовательский шрифт Rubik из библиотеки Google Fonts для стилизации панели поиска. Загрузите шрифт, добавив выделенный код под комментарием + Load Rubik font +:

поиск-bar.html

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

...

Затем добавьте пользовательский CSS на страницу под комментарием + Добавить пользовательский встроенный CSS. Это обеспечит удобство чтения и использования заголовков, панели поиска и результатов на странице.

поиск-bar.html

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














































...

Теперь, когда у вас есть все стили, добавьте HTML-код, который будет определять заголовок и строку ввода под комментарием + Page Header и Search Bar +:

поиск-bar.html

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

















...

Это использует систему сетки из Bootstrap для структурирования заголовка страницы и панели поиска. Вы присвоили + search-input + идентификатор панели поиска, которую вы будете использовать для привязки к слушателю позже в этом уроке.

Далее вы создадите локацию для отображения результатов поиска. Под командой + Results Of создайте` + div` с идентификатором + response-list +, чтобы добавить результаты позже в уроке:

поиск-bar.html

...
<!-- Results -->







...

На этом этапе файл + search-bar.html будет выглядеть так:

поиск-bar.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>

На этом шаге вы изложили базовую структуру панели поиска с помощью HTML и CSS. На следующем шаге вы напишите функцию JavaScript, которая будет принимать условия поиска и возвращать результаты.

Шаг 2 - Написание JavaScript

Теперь, когда вы отформатировали строку поиска, вы готовы написать код JavaScript, который будет служить основой для кода RxJS, который вы напишете позже в этом руководстве. Этот код будет работать с RxJS, чтобы принимать условия поиска и возвращать результаты.

Поскольку вам не понадобятся функции, которые Bootstrap и JavaScript предоставляют в этом руководстве, вы не собираетесь их загружать. Тем не менее, вы будете использовать RxJS. Загрузите библиотеку RxJS, добавив следующее под комментарием + Load RxJS +:

поиск-bar.html

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

...

Теперь вы будете хранить ссылки + div + из HTML-кода, к которому будут добавлены результаты. Добавьте выделенный код JavaScript в тег + <script> + под комментарием + Добавить собственный встроенный JavaScript:

поиск-bar.html

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


</script>
...

Затем добавьте код для преобразования ответа JSON от API в элементы HTML для отображения на странице. Этот код сначала очистит содержимое панели поиска, а затем установит задержку для анимации результата поиска.

Добавьте выделенную функцию между тегами + <script> +:

поиск-bar.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>
...

Блок кода, начинающийся с + if +, является условным циклом, который проверяет результаты поиска и отображает сообщение, если результаты не были найдены. Если результаты найдены, то цикл + forEach + предоставит результаты с анимацией для пользователя.

На этом этапе вы заложили основу для RxJS, написав функцию, которая может принимать результаты и возвращать их на странице. На следующем шаге вы сделаете панель поиска функциональной.

Шаг 3 - Настройка слушателя

RxJS относится к потокам данных, которые в этом проекте представляют собой последовательность символов, которые пользователь вводит в элемент ввода или строку поиска. На этом шаге вы добавите прослушиватель в элемент input для прослушивания обновлений.

Сначала обратите внимание на идентификатор + search-input +, который вы добавили ранее в руководстве:

поиск-bar.html

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

Затем создайте переменную, которая будет содержать ссылки для элемента + search-input. Это станет ` + Observable + , который код будет использовать для прослушивания входных событий. `+ Observables +

TOC

Как построить панель поиска с RxJS

Вступление

Предпосылки

Шаг 1 - Создание и стилизация панели поиска

Шаг 2 - Написание JavaScript

Шаг 3 - Настройка слушателя

Related