キーテイクアウト

• リアクティブプログラミングは、同時(shí)データストリームを備えたプログラミングの方法であり、非同期である可能性があります。 CPUは指示とデータで構(gòu)成される情報(bào)のストリームを処理するため、プログラミングの問題に適用できます。
JavaScript（RXJS）ライブラリの反応性拡張機(jī)能は、メソッドチェーンを使用し、観測可能性（生産者）とオブザーバー（消費(fèi)者）を?qū)毪筏蓼埂?2種類のオブザーバブルは、登録されていない場合でもプッシュするホットオブザーバブルと、サブスクライブの場合にのみプッシュを開始します。
• オブザーバブルは、配列、約束、関數(shù)、ジェネレーターから作成でき、複數(shù)の非同期リターン値を提供するために使用できます。観測値は値を押し、次のイベントを強(qiáng)制することはできません。
• rxjsは、スロットル、間隔、遅延などの同時(shí)性を?qū)毪工攵啶违讠飑`ターを提供します。これらを使用して、指定された時(shí)間間隔でイベントを集約したり、入力をスロットルして、特定のアイドル時(shí)間後にのみスタート要求を開始したりするために使用できます。
rxjsは、JavaScriptのリアクティブなプログラミングをより簡単かつ効率的にします。簡潔で構(gòu)成可能な一連の方法で、リアクティブプログラミングの概念の一部を統(tǒng)合します。また、RXJS-DOMなどの有用な拡張機(jī)能もあり、DOMとの相互作用を簡素化します。
• この記事は、MoritzKr?ger、Bruno Mota、Vildan Softicによってピアレビューされました。 SetePointコンテンツを最高にするためにSitePointのピアレビュアーのすべてに感謝します！
トピックに飛び込む前に、重要な質(zhì)問に答える必要があります。リアクティブプログラミングとは何ですか？今日の時(shí)點(diǎn)で、最も人気のある答えは、リアクティブプログラミングが同時(shí)データストリームを備えたプログラミングであるということです。ほとんどの場合、同時(shí)単語は非同期に置き換えられますが、後で、ストリームが非同期である必要はないことがわかります。

「すべてがストリームである」アプローチがプログラミングの問題に直接適用できることを簡単に確認(rèn)できます。結(jié)局のところ、CPUは、命令とデータで構(gòu)成される情報(bào)のストリームを処理するデバイスにすぎません。私たちの目標(biāo)は、特定のデータの場合にそのストリームを観察し、変換することです。

リアクティブプログラミングの原則は、JavaScriptにとって完全に新しいものではありません。すでにプロパティバインディング、EventeMitterパターン、node.jsストリームなどがあります。これらの方法の優(yōu)雅さには、パフォーマンスの低下、過度に複雑な抽象化、またはデバッグの問題が伴う場合があります。通常、これらの欠點(diǎn)は、新しい抽象化レイヤーの利點(diǎn)と比較して最小限です。もちろん、私たちの最小限の例は、通常のアプリケーションを反映するのではなく、可能な限り短く、簡潔にします。

これ以上苦労せずに、JavaScript（RXJS）ライブラリ用のリアクティブな拡張機(jī)能を演奏して、手を汚してみましょう。 RXJSは多くのチェーンを使用しています。これは、jQueryなどの他のライブラリでも使用される人気のある手法です。メソッドチェーンのガイド（Rubyのコンテキスト）はSitePointで入手できます。

ストリームの例

RXJSに飛び込む前に、後で作業(yè)する例をいくつかリストする必要があります。これにより、リアクティブプログラミングと一般的なストリームの紹介も締めくくります。

一般に、內(nèi)部と外部の2種類のストリームを區(qū)別できます。前者は人工的で私たちのコントロールの範(fàn)囲內(nèi)であると見なすことができますが、後者は私たちのコントロールを超えた情報(bào)源から來ています。外部ストリームは、コードから（直接的または間接的に）トリガーされる場合があります。

通常、ストリームは私たちを待っていません。それらを処理できるかどうかにかかわらず、それらは起こります。たとえば、道路で車を観察したい場合、車の流れを再起動(dòng)することはできません。ストリームは、私たちがそれを観察するかどうかとは無関係に起こります。 RX用語では、これをa

hot Observable

と呼びます。 rxは

cold observablesも紹介します。これは、標(biāo)準(zhǔn)の反復(fù)因子のように振る舞い、ストリームからの情報(bào)が各オブザーバーのすべてのアイテムで構(gòu)成されているようになります。 次の畫像は、いくつかの外部の種類のストリームを示しています。 （以前は開始された）リクエストと、一般的にセットアップされたWebフックと、マウスやキーボードの対話などのUIイベントが言及されていることがわかります。最後に、GPSセンサー、加速度計(jì)、またはその他のセンサーなど、デバイスからデータを受け取ることもあります。

この畫像には、

メッセージとして記載されている1つのストリームも含まれていました。メッセージはいくつかの形式で表示されます。最もシンプルなフォームの1つは、當(dāng)社のWebサイトと他のWebサイトの間のコミュニケーションです。その他の例には、WebSocketまたはWebワーカーとのコミュニケーションが含まれます。後者のコードの例を見てみましょう。

労働者のコードを以下に示します。コードは、2?10のプライムナンバーを見つけようとします

10

。數(shù)値が見つかったら、結(jié)果が報(bào)告されます 古典的には、Webワーカー（ファイルPrime.jsにあると想定）が次のように含まれています。簡潔にするために、Webワーカーのサポートと返された結(jié)果の合法性のチェックをスキップします。

Webワーカーの詳細(xì)とJavaScriptを使用したマルチスレッドについては、Parallel.js。 ^{上記の例を考慮して、プライム番號は正の整數(shù)の間で漸近分布に従うことを知っています。 xから∞の場合、x / log（x）の分布を取得します。これは、最初はより多くの數(shù)字が表示されることを意味します。ここでは、チェックもはるかに安価です（つまり、最初よりも時(shí)間の単位あたりのプライム數(shù)がはるかに多くなります。）}）

これは、結(jié)果のための単純な時(shí)間軸と塊で示すことができます：

<span>(function (start<span>, end</span>) {
</span>    <span>var n = start - 1;
</span>
    <span>while (n++ < end) {
</span>        <span>var k = Math.sqrt(n);
</span>        <span>var found = false;
</span>
        <span>for (var i = 2; !found && i <= k; ++i) {
</span>            found <span>= n % i === 0;
</span>        <span>}
</span>
        <span>if (!found) {
</span>            <span>postMessage(n.toString());
</span>        <span>}
</span>    <span>}
</span><span>})(2, 1e10);
</span>

は、ユーザーの入力を検索ボックスに調(diào)べることで、関連していないが同様の例を挙げることができます。當(dāng)初、ユーザーは検索するものを入力することに熱心な場合があります。ただし、彼の要求が具體的になるほど、キーストローク間の時(shí)差が大きくなります。ライブ結(jié)果を表示する能力を提供することは、ユーザーがリクエストを絞り込むのを支援するために、間違いなく望ましいことです。しかし、私たちが望んでいないのは、キーストロークごとにリクエストを?qū)g行することです。特に、最初のストロークは非常に速く実行され、考えられない、または専門化する必要性がないためです。

両方のシナリオで、回答は、特定の時(shí)間間隔で以前のイベントを集約することです。説明されている2つのシナリオの違いは、指定された時(shí)間間隔後に素?cái)?shù)が常に表示されるべきであることです（つまり、プライム數(shù)の一部は、プレゼンテーションで潛在的に遅延している可能性があります）。対照的に、検索クエリは、指定された間隔中にキーストロークが発生しない場合にのみ、新しいリクエストをトリガーします。したがって、キーストロークが検出されると、タイマーがリセットされます。

rxjsへの救助

RXは、観察可能なコレクションを使用して非同期およびイベントベースのプログラムを作成するためのライブラリです。簡単な時(shí)間の処理とエラーモデルを?qū)毪筏胜?、その宣言的な?gòu)文と複合性でよく知られています。以前の例を考えて、時(shí)間の処理に特に興味があります。それにもかかわらず、RXJにはもっと多くのことがあります。

RXJの基本的なビルディングブロックは、観測可能性（生産者）とオブザーバー（消費(fèi)者）です。既に2種類のオブザーバブルについて言及しました：

熱い観測可能性は、私たちがそれらに購読されていない場合でも押しています（例えば、UIイベント）。

cold observablesが購読したときにのみプッシュを開始します。私たちが再び購読している場合、彼らはやり直します。
• 冷たい観測値は、通常、RXJ內(nèi)で使用されるように変換された配列または単一値を指します。たとえば、次のコードは、完了する前に単一の値を生成するだけのコールドオーバーヴァブルを作成します。

また、観察可能な作成機(jī)能からクリーンアップロジックを含む関數(shù)を返す場合があります。

観察可能なものを購読することは、観察可能な種類とは無関係です。両方のタイプについて、OnNext、Onerror、およびOncompletedで構(gòu)成される通知文法の基本的な要件を満たす3つの機(jī)能を提供できます。 onnextコールバックは必須です

<span>(function (start<span>, end</span>) {
</span>    <span>var n = start - 1;
</span>
    <span>while (n++ < end) {
</span>        <span>var k = Math.sqrt(n);
</span>        <span>var found = false;
</span>
        <span>for (var i = 2; !found && i <= k; ++i) {
</span>            found <span>= n % i === 0;
</span>        <span>}
</span>
        <span>if (!found) {
</span>            <span>postMessage(n.toString());
</span>        <span>}
</span>    <span>}
</span><span>})(2, 1e10);
</span>

ベストプラクティスとして、廃棄方法を使用してサブスクリプションを終了する必要があります。これにより、必要なクリーンアップステップが実行されます。それ以外の場合は、ガベージコレクションが未使用のリソースのクリーンアップを防ぐことができるかもしれません。

購読なしに、可変観測可能な変數(shù)に含まれる観察可能なものは、単なる風(fēng)邪の観測可能です。それにもかかわらず、パブリッシュメソッドを使用して、ホットシーケンス（つまり、擬似サブスクリプションを?qū)g行する）に変換することも可能です。

<span>(function (start<span>, end</span>) {
</span>    <span>var n = start - 1;
</span>
    <span>while (n++ < end) {
</span>        <span>var k = Math.sqrt(n);
</span>        <span>var found = false;
</span>
        <span>for (var i = 2; !found && i <= k; ++i) {
</span>            found <span>= n % i === 0;
</span>        <span>}
</span>
        <span>if (!found) {
</span>            <span>postMessage(n.toString());
</span>        <span>}
</span>    <span>}
</span><span>})(2, 1e10);
</span>

RXJに含まれるヘルパーの一部は、既存のデータ構(gòu)造の変換のみを扱います。 JavaScriptでは、それらの3つを區(qū)別することができます：

単一の非同期結(jié)果を返すことを約束します、
1. 単一の結(jié)果の関數(shù)
、および
2. イテレーターを提供するための
ジェネレーター。

後者はES6で新しく、es5以上のアレイに置き換えられる可能性があります（それは悪い代替品であり、単一の値として扱われるべきです）。

rxjsは、非同期的な（戻り）バリューサポートを提供するためにデータ型をもたらすようになりました。したがって、4つの象限が記入されました。

反復(fù)因子を引く必要がある間、観測可能性の値はプッシュされます。例は、次のイベントを強(qiáng)制することはできないイベントストリームです。イベントループによって通知されるのを待つことしかできません。

オブザーバブルズを作成または処理するヘルパーのほとんどは、サブスクリプションが開始されたときと通知が公開されるときを制御するスケジューラを受け入れます。デフォルトのスケジューラはほとんどの実用的な目的で正常に機(jī)能するため、ここでは詳しく説明しません。 RXJSの多くのオペレーターは、スロットル、間隔、または遅延などの同時(shí)性を?qū)毪筏蓼埂￥长长?、これらのヘルパーが不可欠になる前の例をもう一度見てみましょう。

<span>var worker = new Worker('prime.js');
</span>worker<span>.addEventListener('message', function (ev) {
</span>    <span>var primeNumber = ev.data * 1;
</span>    <span>console.log(primeNumber);
</span><span>}, false);
</span>

例

最初に、プライムナンバージェネレーターを見てみましょう。特定の時(shí)間にわたって結(jié)果を集約したかったので、UI（特に最初に）があまりにも多くの更新に対処する必要がないようにしました。

ここでは、実際には、前述のインターバルヘルパーと組み合わせてRXJのバッファ関數(shù)を使用することをお?jiǎng)幛幛筏蓼埂?

結(jié)果は、次の図で表す必要があります。緑色の塊は、指定された時(shí)間間隔（間隔の構(gòu)築に使用される時(shí)間）の後に発生します。バッファーは、そのような間隔中に、見たすべての青い塊を集約します。

さらに、マップを?qū)毪工毪长趣猡扦蓼?。これにより、データの変換に役立ちます。たとえば、受信したイベントの引數(shù)を変換して、送信されたデータを數(shù)として取得することをお?jiǎng)幛幛筏蓼埂?

Fromevent関數(shù)は、標(biāo)準(zhǔn)のイベントエミッターパターンを使用して、任意のオブジェクトから観察可能なものを構(gòu)築します。バッファーはまた、ゼロの長さで配列を返します。そのため、ストリームを空のアレイに縮小するための機(jī)能を?qū)毪筏蓼埂Ｗ钺幛?、この例では、生成された素?cái)?shù)の數(shù)のみにのみ関心があります。したがって、バッファをマップしてその長さを取得します

もう1つの例は、検索クエリボックスです。これは、特定のアイドル時(shí)間の後にのみリクエストを開始するためにスロットする必要があります。このようなシナリオで役立つ可能性のある2つの機(jī)能があります。スロットル関數(shù)は、指定された時(shí)間枠內(nèi)で最初のエントリを生成します。デバウンス関數(shù)は、指定されたタイムウィンドウ內(nèi)で見られる最後のエントリを生成します。時(shí)間窓もそれに応じてシフトされます（つまり、最初 /最後の項(xiàng)目に対して）。

次の図に反映される動(dòng)作を?qū)g現(xiàn)したいと考えています。したがって、デバウンスメカニズムを使用します。

以前のすべての結(jié)果を捨てて、タイムウィンドウが枯渇する前に最後の結(jié)果を取得したいと考えています。入力フィールドにIDクエリがあると仮定すると、次のコードを使用できます。

このコードでは、ウィンドウは300msに設(shè)定されています。また、以前のクエリとは異なる少なくとも3文字の値の値のクエリを制限します。これにより、何かを入力して消去することで修正されたばかりの入力に対する不必要なリクエストが排除されます。 この表現(xiàn)全體には、2つの重要な部分があります。 1つは、クエリテキストのsearchforを使用したリクエストへの変換、もう1つはswitch（）関數(shù)です。後者は、ネストされたオブザーバブルを返す関數(shù)を取り、最新の観測可能なシーケンスからのみ値を生成します。

リクエストを作成する関數(shù)は、次のように定義できます。

<span>(function (start<span>, end</span>) {
</span>    <span>var n = start - 1;
</span>
    <span>while (n++ < end) {
</span>        <span>var k = Math.sqrt(n);
</span>        <span>var found = false;
</span>
        <span>for (var i = 2; !found && i <= k; ++i) {
</span>            found <span>= n % i === 0;
</span>        <span>}
</span>
        <span>if (!found) {
</span>            <span>postMessage(n.toString());
</span>        <span>}
</span>    <span>}
</span><span>})(2, 1e10);
</span>

ネストされた観測可能（無効な要求の場合は未定義になる可能性がある）に注意してください。

結(jié)論

rxjsは、JavaScriptのリアクティブなプログラミングを楽しい現(xiàn)実にします。別の方法として、Bacon.jsも同様に機(jī)能します。それにもかかわらず、RXJSの最良のことの1つはRX自體で、多くのプラットフォームで利用できます。これにより、他の言語、プラットフォーム、またはシステムへの移行が非常に簡単になります。また、簡潔で構(gòu)成可能な一連の方法で、リアクティブプログラミングの概念の一部を統(tǒng)合します。さらに、RXJS-DOMなど、いくつかの非常に有用な拡張機(jī)能が存在し、DOMとの相互作用を簡素化します。

どこでrxjsが輝いていると思いますか？

RXJS

を使用した機(jī)能的な反応性プログラミングに関するよくある質(zhì)問

機(jī)能プログラミングと機(jī)能的な反応性プログラミングの違いは何ですか？

機(jī)能プログラミング（FP）と機(jī)能的反応性プログラミング（FRP）はどちらもプログラミングパラダイムですが、焦點(diǎn)が異なります。 FPは、計(jì)算を數(shù)學(xué)機(jī)能の評価として扱い、狀態(tài)と変化可能なデータの変化を回避するプログラミングのスタイルです。命令的なプログラミングスタイルとは対照的に、関數(shù)の適用を強(qiáng)調(diào)します。これは、狀態(tài)の変化を強(qiáng)調(diào)しています。

一方、FRPは非同期データストリームを扱うFPのバリアントです。リアクティブプログラミングモデルと機(jī)能プログラミングを組み合わせます。 FRPでは、靜的（アレイなど）および動(dòng)的（マウスクリック、Webリクエストなど）データストリームを表現(xiàn)し、変更に対応できます。 ??> RXJS（JavaScriptのリアクティブ拡張機(jī)能）は、非同期またはコールバックベースのコードを簡単に作成できるようにするために、観測可能性を使用したリアクティブプログラミングのライブラリです。これにより、機(jī)能的なリアクティブプログラミングにぴったりです。 RXJSを使用すると、さまざまなソースからデータストリームを作成し、提供されたオペレーターを使用してこれらのデータストリームを変換、組み合わせ、操作、または反応できます。 RXJSのコアコンセプト。それらはデータストリームであり、時(shí)間の経過とともに複數(shù)の値を発する可能性があります。次に、エラー、および完了する3種類の値を放出できます。 「次の」値は任意のJavaScriptオブジェクトであり、「エラー」は何か問題が発生したときにエラーオブジェクトです。 >

rxjsのエラーを処理するにはどうすればよいですか？

rxjsは、キャッチエラーや再試行などのエラーを処理するためのいくつかの演算子を提供します。 CatchErrorオペレーターは、ソースのエラーを観察可能なものにキャッチし、新しい観測可能またはエラーでストリームを継続します。 RETRYオペレーターは、失敗したときに観察可能なソースに再登録します。

RXJSのオペレーターは何ですか？ '、'フィルター '、' concat '、' resudy 'など。rxjsで利用可能な數(shù)十の演算子があり、コレクションの複雑な操作、イベントの流れ、さらには約束であっても、コレクションの複雑な操作を処理することができます。

rxjsコードをテストするにはどうすればよいですか？

rxjsは、テストスケジュラーなどのテストユーティリティを提供します。また、テスト中に観測可能性を視覚化するために大理石の図を使用することもできます。

angularでrxjsを使用できますか？ AngularのHTTPモジュールや、カスタムイベントに使用されるEventeMitterクラスでも使用されています。

約束と観察可能なものの違いは何ですか？

約束と観察可能なものはどちらも非同期操作を扱っていますが、それをさまざまな方法で行います。約束とは、まだ利用できないかもしれない価値です。それは一度だけ解決することができます（充足または拒否されます）。一方、観察可能なものとは、ゼロ以上の値を発する可能性のある値のストリームであり、

に登録したり、登録したりすることができます。 Observableを購読すると、サブスクリプションオブジェクトが表示されます。このオブジェクトのunsubscribeメソッドを呼び出してサブスクリプションをキャンセルし、データの受信を停止できます。多くのオブザーバーにマルチキャスト。単純な観測可能性とは異なり、被験者は多くのリスナーのレジストリを維持しています。

以上がRXJを使用した機(jī)能的な反応性プログラミングの紹介の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。