rxjsの詳しい説明

今回はrxjsについて詳しく説明します。rxjsを使用する際の注意点は何ですか?実際の事例を見てみましょう。

rxjs (Reactive Extensions for

JavaScript) は、JavaScript のリアクティブ拡張機能です。リアクティブのアイデアは、時間の経過とともに変化するデータ、ステータス、イベントなどを観測可能なシーケンス (Observable Sequence) に変換し、サブスクライブすることです。シーケンス オブジェクト内のオブジェクトが変化すると、あらかじめ取り決められたさまざまな変形や操作が実行されます。

rxjs は非同期シナリオに適しており、フロントエンドの対話におけるリクエストとイベントを最適化するために使用できます。

rxjs の特徴

Promise、ajax、イベントのいずれであっても、それらはすべてシーケンス (Observable Sequence) にカプセル化されており、非同期リンクが変更されると、そのシーケンスを監視することで変更された情報を傍受できます。

たとえば、フロントエンド ビジネス レイヤーとプレゼンテーション レイヤーは分離されており、指定されたイベントがトリガーされたときに、プレゼンテーション レイヤーは DOM とは関係のない処理ロジックを気にする必要がありません。同時に、ビジネス層は、プレゼンテーション層に公開することなく、非同期操作における複数の非同期ロジック間の関係を組み立てることもできます。プレゼンテーション層は、非同期操作でのデータ変更に関係します。

rxjs が開発したビジネス層は、高い弾力性、高い安定性、高いリアルタイム性という特徴を持っています。

rxjs インスタンスの概念

Observable: 観察可能なデータ シーケンス。

Observer: オブザーバー インスタンス。指定されたデータをいつ観察するかを決定します。

Subscription: データ シーケンスを観察すると、サブスクリプション インスタンスが返されます。

Operators: 観察可能な操作メソッド、以下を含むデータシーケンスの変換、フィルタリングなど、すべての Operators メソッドで受け入れられるパラメータは、送信された最後のデータ変更の値であり、メソッドの戻り値は、新しいデータ変更を発行するために呼び出されます。

Subject: 監視されたオブジェクト。 : スケジューリングの同時実行性を制御します。つまり、Observable がサブジェクトの変更応答を受け入れるときに、スケジューラーを通じて応答モードを設定できます。現在の組み込み応答は、Object.keys (Rx.Subject) を呼び出すことで表示できます。

Observable には、作成、サブスクリプション、実行、破棄という 4 つの

ライフ サイクル

があります。

Obervable を作成し、監視されたシーケンス ソース インスタンスを返します。このインスタンスにはデータを送信する機能がありません。これとは対照的に、新しい Rx.Subject を通じて作成された監視オブジェクト インスタンスにはデータ ソースを送信する機能があります。

シーケンスがシーケンス ソース インスタンスを通じて新しいデータ変更を発行するときに、応答メソッド (コールバック メソッド) をサブスクライブできます。

応答アクションは、実際には Observable の実行です。

シーケンス ソース インスタンスは破棄でき、サブスクリプション メソッドでエラーが発生すると自動的に破棄されます。

シーケンス ソース インスタンスの catch メソッドは、サブスクリプション メソッドで発生したエラーをキャプチャでき、シーケンス ソース インスタンスは、catch メソッドから返された値を新しいシーケンス ソース インスタンスとして受け入れることができます。

rxjs 演算子

rxjs は、Observable オブジェクトを作成するための多くの演算子を提供します

import Rx from 'rxjs';

create

let observable = Rx.Observable
    .create((observer)=> {
        observer.next('hello');
        observer.next('world');
    });    
//订阅Observable    observable.subscribe((value)=> {    console.log(value);
});

出力: hello

world

of

Convert value 変数

let observable = Rx.Observable.of('hello', 'world');
observable.subscribe({    next: (value)=> {        console.log(value);
    },    complete: ()=> {        console.log('complete');
    },    error: (error)=> {        console.log(error);
    }
});

出力: こんにちは

ワールド

完了

from

配列変数の変換

let array = [1, 2, 3];let observable = Rx.Observable.from(array);
observable.subscribe({    next: (value)=> {        console.log(value);
    },    complete: ()=> {        console.log('complete');
    },    error: (error)=> {        console.log(error);
    }
});

出力:1

    2     3     complete
fromEvent

イベント変数の変換

Rx.Observable.fromEvent(document.querySelector('button'), 'click');
fromPromise

Promise(約束)変数の変換

let observable = Rx.Observable
.fromPromise(new Promise((resolve, reject) => {
    setTimeout(() => {
    resolve('hello world');
    },3000)
}));
observable.subscribe({    next: (value)=> {        console.log(value);
    },    complete: ()=> {        console.log('complete');
    },    error: (error)=> {        console.log(error);
    }
});

出力:hello world

完了

空

empty 演算子は空の Observable を返します。このオブジェクトを購読すると、すぐに完全な情報が返されます。

never

never 演算子は無限の Observable を返します。このオブジェクトをサブスクライブしても、何も起こりません。これは常に存在しますが、何も行いません。

interval

interval 演算子は、タイミング間隔を表すために使用される

数値型

のパラメーターをサポートしています。

let observable = Rx.Observable.interval(1000);
observable.subscribe({    next: (value)=> {        console.log(value);
    },    complete: ()=> {        console.log('complete');
    },    error: (error)=> {        console.log(error);
    }
});

出力: 0

    1
     2
     ...

上記のコードは、1 秒ごとに増加する値が出力され、初期値は 0 から始まることを意味します。

timer

timer オペレーターは 2 つのパラメーターをサポートしています。最初のパラメーターは、最初の値を送信するまでの待ち時間を設定するために使用されます。2 番目のパラメーターは、最初の送信後に他の値を送信する間隔を示します。

let observable = Rx.Observable.timer(1000, 5000);

observable.subscribe({    next: (value)=> {        console.log(value);
    },    complete: ()=> {        console.log('complete');
    },    error: (error)=> {        console.log(error);
    }
});

出力: 0 //1秒後
1 //5秒後

2 //5秒後

...


プルvsプッシュ

プルとプッシュは、データプロデューサーとデータコンシューマー間の 2 つの異なる通信方法です

プル

プルシステムでは、データコンシューマーはデータプロデューサーからデータをいつ取得するかを決定しますが、プロデューサー自身はデータがいつ取得されるかを認識しません消費者に送られます。

すべての JavaScript 関数はプル システムです。関数を呼び出すコードは、単一の戻り値を取得することによってデータを消費します。

ES6 のイテレーターとジェネレーター

Generator
は別のプル システムです。 iterator.next() を呼び出すコードはコンシューマーであり、そこから複数の値をプルできます。
プッシュ

プッシュ システムでは、データの作成者がいつデータをコンシューマに送信するかを決定します。コンシューマは、データを受信する前にデータを受信することに気づきません。
Promise は最も一般的なプッシュ システムです。Promise (データのプロデューサー) は解決済み (成功ステータス) または拒否 (失敗ステータス) を送信してコールバック (データ コンシューマー) を実行しますが、Promise がいつデータを取得するかを決定する関数とは異なります。はこのコールバック関数にプッシュされます。

RxJS は、新しい Push システムである Observables (観察可能なオブジェクト) を導入します。監視可能なオブジェクトは、複数の値を生成するプロデューサーであり、新しいデータが生成されると、それがオブザーバーにアクティブにプッシュされます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

フロントエンド開発における SVG アニメーション

TypeScript の必知事項

以上がrxjsの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。