オブザーバブルのクエリ:クレイジー＆シンプル!

前の記事では、ストリームからのイベントを選択するための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
TLパッケージ@https://github.com/erql/rx-rql 📦

💡 考えを捨てる

私たちがドラッグ- N -低下ふるまいを実行する必要があると想像してください.
そのために、3つのイベントストリームがあります.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 'は今マウスダウンイベント、マウスの移動のための
別のイベント名を持っているので、私たちの図を一つの行に簡単にすることができます.

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

時間を取り除きましょう- 同様に、我々はそれらをしない

events$      mdmmmmmum

さて、新しい図に関して我々の仕事を言い直すためにm イベント間d and u 排出量

🤔

うーん

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

身近に聞こえる.
ああ!それが文字列なら、正規表現で簡単に行えます.

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

私たちに必要なdmmmu 後マウス移動なしでm イベント.
正しい?
唯一の場合は、regexesとストリームからのイベントを選択するライブラリがありました.

🚀 解決策

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

Rx-RQL 📦 パッケージは以下のAPIを提供します.

query(…) — 選択の根源

A — ストリームから1エミッションを選択する

some(A) — を選択します∞ からの放出

maybe(A) — から0または1の放出を選択してください

many(n,m)(A) — からのNからMへの排出から選択

mute(A) — から放出を選択してください

以下のようにグループ化できます:

some(A, some(B), mute(C)) — 選択して多くの放出として選択:多くのBSとして可能な限りの排出量の間で選択し、ミュート

ここでは、このパッケージを使用して簡単なドラッグアンドドロップを作成します.
そしてここにMr. Potato-Head DnD 🥔 — より洗練された例
!THX ,クリス🙏

👋 アウトロ

この記事を読んでくれてありがとう!反応して良い日を過ごす🙂
あなたが読書を楽しんだならば❤️ 🦄 📘 ボタン
そして、あなたがまだここで私の後をついていないならば、あなたはおそらく私の最近の実験を逃したでしょう.



コスパルクク🐇🎩
@ kddsky

👋 ここでは1との混合の例です️⃣ root - react 2️⃣ カウントダウン️⃣ リーフディスプレイ👉 stackblitz.com/edit/react-rxj… 🔗CC私が昨日言及した概念です.ウェジット️⃣
午後20時21分- 2020年10月6日
7
6
今私はあなたの考えを聞くのが大好きだ!👂