Что такое RxJs
`RxJS - это библиотека для создания асинхронных программ, основанных на событиях, с использованием наблюдаемых последовательностей.` - http://reactivex.io/rxjs.
Таким образом, RxJs много использует Observables, более того, Observables являются строительным блоком в RxJs.
Так что же такое наблюдаемые?
- Наблюдаемый: представляет собой вызываемую коллекцию будущих значений или событий.
Давайте сделаем это просто
На изображении выше представлен Observable, где одна точка «.» Представляет собой временной интервал (0,5 секунды в приведенном выше примере), а все остальные - это различные данные в массиве JavaScript. Таким образом, для непрофессионала Observables - это массивы во времени.
Поскольку мы не будем знать, когда и как данные будут поступать с течением времени, нам нужен контракт между Observable и его пользователем (называемым Observer), и этот контракт поддерживается через `` Observable. подписаться`` интерфейс.
Когда Observer подписывается на Observable, он получает уведомление о новых событиях внутри Observable с помощью указанного ниже метода.
- «Далее»: когда источник (наблюдаемый) получает новые данные, возвращает такое значение, как число, строка, объект и т. д.
- «Ошибка»: при возникновении ошибки возвращает ошибку или исключение JavaScript.
- «Завершено»: когда Observables завершается (не имеет значения для отправки), не возвращает никакого значения.
```js
var array = [1,2,3];
var source = Rx.Observable.from (array);
var subscription = source.subscribe (
function (x) {
console.log ('Next:' + x);
},
function (err) {
console.log ('Error:' + err);
},
function () {
console.log ('Завершено');
});
```
Выход : -
// = ›Далее: 1
// =› Далее: 2
// = ›Далее: 3
// =› Завершено
Наблюдатели возвращают эти три уведомления: Далее, Ошибка, Завершено наблюдателям. Следующие уведомления являются наиболее важным и наиболее распространенным типом: они представляют собой фактические данные, доставляемые наблюдателю. Уведомления об ошибках и полных могут происходить только один раз во время наблюдаемого выполнения, и может быть только одно из них.
Просто введите регулярное выражение: next * (error | complete)?
Так зачем использовать RxJ, и ответ очень прост, если вам нужно реактивное программирование на JavaScript.
«Почему мне следует подумать о переходе на реактивное программирование?»
Реактивное программирование повышает уровень абстракции вашего кода, поэтому вы можете сосредоточиться на взаимозависимости событий, определяющих бизнес-логику, вместо того, чтобы постоянно возиться с большим количеством деталей реализации. Код в RP, скорее всего, будет более лаконичным. - Андре Стальц.
Давайте начнем с очень простого примера, в котором мы создадим «Средне-подобную функцию хлопков», где пользователи могут давать сколько угодно хлопков по статье / посту.
Мы должны хранить общее количество аплодисментов для каждого сообщения и увеличивать его при каждом щелчке.
Таким образом, приложение будет спроектировано на основе api обновления на `post / count`, и мы будем вызывать этот api при каждом щелчке мышью, чтобы увеличить счетчик в БД, очень просто. Но предположим, что я, как пользователь, настолько люблю этот пост, что щелкнул 50 раз всего за секунду, теперь у нас будет 50 HTTP-запросов к нашему бэкэнду, чтобы увеличить счетчик на единицу.
50 запросов в секунду только для увеличения счета от 1 до 50, звучит медленно и слишком много.
Итак, почему мы не можем сохранить количество кликов, отправить запрос API, а затем очистить счетчик кликов, но все это только каждую секунду. Так что у нас будет только одно попадание в секунду.
JS Bin
Пример корзины: var clapBtn = document.getElementById (« clap ); var clapOb = Rx.Observable.fromEvent (clapBtn… jsbin.com »
Здесь мы ограничили количество вызовов API раз в секунду.
Теперь давайте рассмотрим еще один пример, в котором мы можем отобразить список фильмов, которые можно искать / фильтровать.
Здесь мы снова отключаем входное событие для минимальных вычислений и оптимизации рендеринга.
В приведенном выше примере мы используем операторы throttle / debounce RxJ, мы могли бы использовать подчеркивание / lodash, _throttle и _debounce или некоторые аналогичные функции, но поскольку мы говорим / изучаем RxJ, мы будем использовать RxJ, чтобы мы могли чувствовать себя комфортно.
Что такое дребезг и дроссель
Регулирование функции означает максимальное количество вызовов функции за определенный период времени.
Отказ от функции означает, что функция не должна вызываться снова до тех пор, пока не пройдет определенное количество времени без ее вызова.
Есть ли у Rxjs только противодействие дроссельной заслонке? Это подводит нас к операторам в RxJ.
Вот небольшой список некоторых основных операторов
- map - трансформируйте элементы, излучаемые Observable, применяя функцию к каждому элементу, map (x = ›10 * x)
- filter - генерировать только те элементы из Observable, которые проходят проверку предиката, filter (x = ›x› 10)
- сканирование - применить функцию к каждому элементу, генерируемому Observable, последовательно, и выдать окончательное значение, scan ((x, y) = ›x + y)
- reduce - последовательно применять функцию к каждому элементу, генерируемому Observable, и выдавать окончательное значение, reduce ((x, y) = ›x + y)
- concat - испускать выбросы от двух или более Observable, не чередуя их.
- concatAll- Сглаживает Observable-of-Observables, помещая один внутренний Observable за другим
- concatMap - сопоставляет каждое значение с Observable, затем выравнивает все внутренние Observable, map (). concatAll ()
- zip - объединить выбросы нескольких Observable вместе с помощью указанной функции и создать отдельные элементы для каждой комбинации на основе результатов этой функции.
- switch - сглаживает Observable-of-Observables, удаляя предыдущий внутренний Observable при появлении нового.
- switchMap - сопоставляет каждое значение с Observable, затем выравнивает все эти внутренние Observable с помощью переключателя «».
- takeUntil - испускает значения, испускаемые исходным Observable, пока уведомляющий Observable не выдаст значение.
- DifferentUntilChanged - возвращает Observable, который испускает все элементы, испускаемые исходным Observable, которые отличаются по сравнению с предыдущим элементом.
Хочу снова пережить операторов
Посетите http://reactivex.io/documentation/operators.html и http://reactivex.io/learnrx/.
Давайте воспользуемся тем, что мы уже узнали
Простое перетаскивание, показывающее, как события могут быть составлены и с которыми можно работать. Мы сделаем простой пример "Drag & Drop". Так что Drag & Drop проще говоря
При каждом наведении курсора мыши на цель вы начинаете прислушиваться к движениям мыши по документу до тех пор, пока не появится одно нажатие на документ.
Итак, три наблюдаемых из трех разных событий
- mDownOb - mousedown
- mMoveOb - mousemove
- mUpOb - mouseup
Сначала мы создадим новый Observable, оперируя mMoveOb и mUpOb с помощью takeUntil.
mMoveOb.takeUntil (mUpOb) назовите его moveToUpOb, затем мы переключим карту между исходным наблюдаемым mDownOb и внутренними наблюдаемыми moveToUpOb, а взамен мы получим новый Observable назовем его ` dragNdrop`, на который мы можем подписаться и над которым мы будем работать.
Резюме
Надеюсь, вы начали с RxJs, если вы еще этого не сделали. Я уверен, что если вы потратите достаточно времени на изучение и использование этих концепций, вы обязательно найдете их достойными. Если у вас есть какие-либо мнения о вышеупомянутом сообщении, не стесняйтесь комментировать или написать мне в DM Ankit ( @ iankit3)
