Observable에 대한 쿼리: 미친 & 간단한!

이전 게시물에서 우리는 RegExp와 유사한 구문을 사용하여 스트림에서 이벤트를 선택하는 API를 탐색했습니다. 예를 들면 다음과 같습니다.

const D = fromEvent(element, 'mousedown');
const M = fromEvent(document, 'mousemove');
const U = fromEvent(document, 'mouseup');

exec(
  'DM*U'         // <- regular expression
  , { D, M, U }  // <- streams that will be used
)
  .pipe(…)
  .subscribe(console.log);

이 게시물에서는 기능적 API 대응물을 검토합니다.

query(D, some(M), U) // select some Ms between Ds and Us
  .pipe(…)
  .subscribe(console.log)

그러나 먼저 사고 과정을 요약하겠습니다. 아이디어에 이미 익숙한 경우 — hop here

요약: 패키지 @ https://github.com/erql/rx-rql 📦

💡 아이디어 요약

끌어서 놓기 동작을 구현해야 한다고 상상해 보십시오.

이를 위해 mousemove$ , mousedown$ , mouseup$ 의 세 가지 이벤트 스트림이 있습니다. 따라서 우리는 mousemove$ 발생 후 및 mousedown$ 이전에 mouseup$ 이벤트를 캡처하려고 합니다.

우리가 가지고 있는 이벤트 스트림의 마블 다이어그램을 그려봅시다.

mousedown$  --o------------
mousemove$  -o-o-o-o-o-o-o-
mouseup$    ------------o--

모든 이벤트 스트림은 별도의 줄로 표시됩니다. o는 스트림의 이벤트를 나타냅니다. -는 경과 시간을 나타내는 구분 기호입니다.



더 나은 가독성을 위해 모든 o 를 스트림의 각 문자로 대체해 보겠습니다.

mousedown$  --d------------
mousemove$  -m-m-m-m-m-m-m-
mouseup$    ------------u--

이제 'd'는 마우스 다운 이벤트, 'm'은 마우스 이동, 'u'는 마우스 업 이벤트를 나타냅니다.



이제 고유한 이벤트 이름이 있으므로 다이어그램을 한 줄의 이벤트로 단순화할 수 있습니다.

events$     -mdm-m-m-m-mum-

시간- 기호도 제거해 보겠습니다.

events$      mdmmmmmum

좋아요, 새 다이어그램의 관점에서 우리의 작업을 다시 표현하자면: m와 d 방출 사이의 u 이벤트를 캡처해야 합니다.

🤔

흠...

"we need ms between d and u"...

익숙한 소리...

아! 문자열이라면 정규식으로 쉽게 할 수 있습니다.

/dm*u/.exec('mdmmmum')

후행 마우스 이동dmmmu 이벤트 없이 필요한m 이벤트를 제공합니다...

오른쪽?

정규식이 있는 스트림에서 이벤트를 선택할 수 있는 라이브러리만 있다면...

🚀 솔루션

query(D, some(M), U)
  .pipe(…)
  .subscribe(console.log)

Rx-RQL 📦 패키지는 이러한 선택을 할 수 있도록 다음 API를 제공합니다.

query(…) — 선택 루트

A — 스트림에서 방출 1개 선택

some(A) — A에서 0 ~ ∞ 방출 선택

maybe(A) — A에서 0 또는 1 방출 선택

many(n,m)(A) — A

에서 n에서 m까지의 방출 중에서 선택

mute(A) — A에서 방출 선택 및 음소거

원하는 대로 그룹화할 수 있습니다.

some(A, some(B), mute(C)) — 다음에서 많은 방출 선택: A의 방출과 음소거된 C의 방출 사이에서 가능한 한 많은 B를 선택하십시오

이 패키지를 사용하여 간단한 끌어서 놓기 동작을 만드는 방법은 다음과 같습니다.



다음은 Mr. Potato-Head DnD 🥔입니다.
! 고맙습니다, 크리스 🙏

👋 아웃트로

이 기사를 읽어 주셔서 감사합니다! 반응을 유지하고 좋은 하루 되세요 🙂

재미있게 읽으셨다면 ❤️ 🦄 📘 버튼으로 표시해 주세요.

그리고 아직 여기저기서 저를 팔로우하지 않으셨다면 — 아마도 제 최근 실험을 놓쳤을 것입니다: , ,

















코스 팔치크 🐇🎩


@kddsky






👋 다음은 1️⃣ 루트 — React2️⃣ 카운트다운 — Rx3️⃣ 리프 표시 — React👉 stackblitz.com/edit/react-rxj… 🔗cc 를 사용한 MIXING의 예입니다. 어제 언급한 개념입니다. WDYT?#️⃣


오후 18:21 - 2020년 10월 6일





7

6



이제 여러분의 생각을 듣고 싶습니다! 👂