Автор оригинала: FreeCodeCamp Community Member.
Henri Little – Beyle
Мы все скорее всего знакомы с концепцией джойстика.
Мы начинаем держать ручку джойстика, мы перемещаем ручку вокруг, и когда мы выпустим ее, ручка осторожно возвращается в исходное положение.
Теперь, если мы хотим построить какой-то программный компонент, который имитирует поведение джойстика в браузере?
Ну, с RXJS это оказывается довольно простым. И это также интересное упражнение, чтобы доказать свое реактивное мышление. Вы можете прыгать прямо в код здесь Если вы хотите, иначе продолжайте читать и посмотреть, что мы можем сделать.
Какие события, которые мы заинтересованы?
Поведение джойстика можно увидеть серию событий, объединенных вместе.
Первое мероприятие, которое мы заинтересованы, это когда пользователь нажимает мышь на ручке ( Mousedown ) – Ручка – это просто центральная часть джойстика.
Если вы удерживаете нажатую мышь, вы можете двигаться вокруг, и вы видите, как обратитесь к ручкой, соответственно – MouseMove Следовательно, события мыши являются второй серией событий, которые мы хотим захватить.
Последнее, нам нужно рассмотреть, когда пользователь выпускает мышь ( мышью ), поскольку это событие, которое заставляет ручку джойстика вернуться к начальной позиции.
Вся последовательность может быть повторена после выпуска ручки. Мышь нажимается на ручку, то она перемещается, то она выделяется. Снова и снова.
Это повторение можно рассматривать как поток событий. Можно сказать, что поведение джойстика регулируется этим потоком событий.
Если мы можем создать такой поток событий, мы находимся в хорошем положении, чтобы достичь нашей цели – то есть для реализации программного компонента джойстика для браузера с использованием RXJS.
Строительные блоки с RXJS
Браузер фактически предоставляет нам уведомление о событиях, которые вас интересуют: Mousedown Событие на элементе DOM, представляющих ручку джойстика и MouseMove и мышцы События на уровне документа DOM.
RXJS, на его стороне, поставляется с функцией Извент Это позволяет нам создать наблюдаемый из события браузера.
Используя этот механизм, мы можем создать три потока событий, которые будут созданы строительные блоки нашего решения: mouse_down_obs. , mouse_move_obs. , mouse_up_obs Отказ
Но это только наши строительные блоки. Нам нужно что-то сделать с ними, чтобы получить то, что мы хотим: нам нужно игнорировать все MouseMove события, которые происходят до первого Mousedown а затем игнорировать все MouseMove События, которые происходят после следующего мышцы . Затем мы повторяем все это снова, когда новый Mousedown событие происходит. Они составляют «Поток событий для джойстика» Отказ
Преобразование наблюдаемых за состав операторов
Все начинается, когда пользователь нажимает мышь на ручке джойстика, то есть mouse_down_obs. . Мы можем назвать это источником наблюдаемым.
Как только мы уведомлем о событии от mouse_down_obs. Мы должны Переключатель и начать слушать mouse_move_obs.
Может показаться, что мы не достигли много, но на самом деле мы сейчас находимся в состоянии, где мы можем Возьми mouse_move_obs Уведомления до Мы слышим от mouse_up_obs. . На данный момент мы прекращаем просто перезапустить на следующем уведомлении от mouse_down_obs. .
Обратите внимание, что мы применяем доставка к mouse_move_obs. Потому что это наблюдаемый, который мы хотим завершить. Если бы мы применили один уровень выше, на mouse_down_obs. Это то, что бы произошло:
Только первая последовательность событий перемещения была бы уведомлена, а затем поток событий был бы закрыт. Нет больше событий для джойстика.
Сейчас время побочных эффектов
Мы узнали, как построить поток всех событий, имеющих отношение к джойстику. Чтобы сделать что-то полезное с этим потоком, нам нужно связать события для каких-либо действий, которые мы хотим сделать. Более конкретно:
- Когда мы чувствуем
MouseMoveсобытие, которое мы должны изменить положение ручки в браузере - Когда мы чувствуем
мышцыМероприятие, которое мы должны осторожно перемещать ручку обратно в исходное положение, установив тип перехода - Когда мы чувствуем
Mousedownсобытие, которое мы должны сбросить стиль перехода
Но осторожно. Не все это MouseMove. События, не все мышцы События, а не все – Mousedown. События. Только те, которые принадлежат к набору «Соответствующие события для джойстика» Отказ Например, мы не заинтересованы во всем MouseMove. События, которые случаются до активации джойстика (нажимая мышь на ручке) или после того, как ручка джойстика была выпущена.
Давайте вернемся к нашему направлению рассуждения. Нам нужно сделать что-то при возникновении некоторых событий. То, что меняет состояние системы. В нашем случае это положение ручки на браузере. В Функциональный Программирование Термины они называются побочные эффекты I.e. Функции, которые изменяют состояние системы.
RXJS дает нам два способа реализовать побочные эффекты Отказ
Первый – это Подписаться Способ наблюдаемого. Второй – это Нажмите Оператор, ранее знаешь как сделать , который «Выполняет побочный эффект для каждого излучения на наблюдаемый источник, но возвращает наблюдаемый, который идентичен источнику» – побочный эффект определяется функцией, передаваемой на Нажмите как параметр. Нажмите это метод, который мы собираемся использовать.
В конце концов это ядро кода, который реализует наш реактивной джойстик
const handle = document.getElementById("handle");const mouse_DOWN_Obs = rxjs.fromEvent(handle, 'mousedown');const mouse_MOVE_Obs = rxjs.fromEvent(document, 'mousemove');const mouse_UP_Obs = rxjs.fromEvent(document, 'mouseup');function activateJoytick() { mouse_DOWN_Obs.pipe( rxjs.operators.tap(() => joystickActivated()), rxjs.operators.switchMap(() => mouse_MOVE_Obs.pipe( rxjs.operators.takeUntil(mouse_UP_Obs.pipe( rxjs.operators.tap(() => joystickReleased()) )), )), rxjs.operators.tap(event => showHandleInNewPosition(event)) ) .subscribe();}Пример код
Вы можете найти пример код здесь , где вы можете сравнить реализацию RXJS с одним изготовленным с использованием чистого JavaScript.
Оригинал: “https://www.freecodecamp.org/news/https-medium-com-henry-little-a-reactive-joystick-built-with-rxjs-abfca3668786/”