JavaScript reaktīvā programmēšana: RxJS modeļi un Observable plūsmas

Mūsdienu tīmekļa izstrādes pastāvīgi mainīgajā vidē ir ļoti svarīgi veidot atsaucīgas, mērogojamas un uzturējamas lietojumprogrammas. Reaktīvā programmēšana (RP) nodrošina jaudīgu paradigmu asinhronu datu plūsmu apstrādei un izmaiņu izplatīšanai visā lietojumprogrammā. Starp populārākajām bibliotēkām RP ieviešanai JavaScript, RxJS (Reactive Extensions for JavaScript) izceļas kā stabils un daudzpusīgs rīks.

Kas ir reaktīvā programmēšana?

Savā būtībā reaktīvā programmēšana ir saistīta ar asinhronu datu plūsmu apstrādi un izmaiņu izplatīšanu. Iedomājieties izklājlapu, kurā, atjauninot vienu šūnu, automātiski tiek pārrēķinātas saistītās formulas. Tā ir RP būtība – reaģēt uz datu izmaiņām deklaratīvā un efektīvā veidā.

Tradicionālā imperatīvā programmēšana bieži ietver stāvokļa pārvaldību un manuālu komponentu atjaunināšanu, reaģējot uz notikumiem. Tas var novest pie sarežģīta un kļūdām pakļauta koda, īpaši, ja tiek strādāts ar asinhronām operācijām, piemēram, tīkla pieprasījumiem vai lietotāja mijiedarbībām. RP to vienkāršo, uzskatot visu par datu plūsmu un nodrošinot operatorus šo plūsmu transformēšanai, filtrēšanai un apvienošanai.

Iepazīstinām ar RxJS: Reactive Extensions for JavaScript

RxJS ir bibliotēka asinhronu un uz notikumiem balstītu programmu veidošanai, izmantojot novērojamas secības (observable sequences). Tā nodrošina jaudīgu operatoru kopu, kas ļauj viegli manipulēt ar datu plūsmām. RxJS balstās uz Observer, Iterator un funkcionālās programmēšanas koncepcijām, lai efektīvi pārvaldītu notikumu vai datu secības.

Galvenie jēdzieni RxJS:

• Observables: Pārstāv datu plūsmu, kuru var novērot viens vai vairāki novērotāji (Observers). Tie ir slinki (lazy) un sāk emitēt vērtības tikai tad, kad tiem pierakstās (subscribe).
• Observers: Patērē datus, ko emitē Observables. Tiem ir trīs metodes: next() vērtību saņemšanai, error() kļūdu apstrādei un complete() plūsmas beigu signalizēšanai.
• Operators: Funkcijas, kas transformē, filtrē, apvieno vai manipulē ar Observables. RxJS nodrošina plašu operatoru klāstu dažādiem mērķiem.
• Subjects: Darbojas gan kā Observables, gan kā Observers, ļaujot pārraidīt datus vairākiem abonentiem un arī ievadīt datus plūsmā.
• Schedulers: Kontrolē Observables vienlaicīgumu, ļaujot izpildīt kodu sinhroni vai asinhroni, dažādos pavedienos vai ar noteiktu aizkavi.

Observable plūsmas detalizēti

Observables ir RxJS pamats. Tie pārstāv datu plūsmu, ko var novērot laika gaitā. Observable emitē vērtības saviem abonentiem, kas pēc tam var apstrādāt šīs vērtības vai reaģēt uz tām. Iedomājieties to kā cauruļvadu, kur dati plūst no avota pie viena vai vairākiem patērētājiem.

Observable izveide:

RxJS piedāvā vairākus veidus, kā izveidot Observables:

• Observable.create(): Zema līmeņa metode, kas sniedz pilnīgu kontroli pār Observable uzvedību.
• from(): Pārvērš masīvu, solījumu (promise), iterējamu objektu vai Observable līdzīgu objektu par Observable.
• of(): Izveido Observable, kas emitē vērtību secību.
• interval(): Izveido Observable, kas emitē skaitļu secību noteiktā intervālā.
• timer(): Izveido Observable, kas emitē vienu vērtību pēc noteiktas aizkaves, vai emitē skaitļu secību fiksētā intervālā pēc aizkaves.
• fromEvent(): Izveido Observable, kas emitē notikumus no DOM elementa vai cita notikumu avota.

Piemērs: Observable izveide no masīva

```javascript import { from } from 'rxjs'; const myArray = [1, 2, 3, 4, 5]; const myObservable = from(myArray); myObservable.subscribe( value => console.log('Saņemts:', value), error => console.error('Kļūda:', error), () => console.log('Pabeigts') ); // Izvade: // Saņemts: 1 // Saņemts: 2 // Saņemts: 3 // Saņemts: 4 // Saņemts: 5 // Pabeigts ```

Piemērs: Observable izveide no notikuma

```javascript import { fromEvent } from 'rxjs'; const button = document.getElementById('myButton'); const clickObservable = fromEvent(button, 'click'); clickObservable.subscribe( event => console.log('Poga nospiesta!', event) ); ```

Pierakstīšanās (subscribing) uz Observables:

Lai sāktu saņemt vērtības no Observable, jums ir jāpierakstās uz to, izmantojot subscribe() metodi. Metode subscribe() pieņem līdz trim argumentiem:

• next: Funkcija, kas tiks izsaukta katrai vērtībai, ko emitē Observable.
• error: Funkcija, kas tiks izsaukta, ja Observable emitē kļūdu.
• complete: Funkcija, kas tiks izsaukta, kad Observable pabeigs darbu (signalizēs par plūsmas beigām).

Metode subscribe() atgriež Subscription objektu, kas pārstāv savienojumu starp Observable un Observer. Jūs varat izmantot Subscription objektu, lai atrakstītos no Observable, novēršot turpmāku vērtību emitēšanu.

Atrakstīšanās (unsubscribing) no Observables:

Atrakstīšanās ir ļoti svarīga, lai novērstu atmiņas noplūdes, īpaši strādājot ar ilgstošiem Observables vai Observables, kas bieži emitē vērtības. Jūs varat atrakstīties no Observable, izsaucot unsubscribe() metodi uz Subscription objekta.

```javascript import { interval } from 'rxjs'; const myInterval = interval(1000); const subscription = myInterval.subscribe( value => console.log('Intervāls:', value) ); // Pēc 5 sekundēm pārtraukt abonēšanu setTimeout(() => { subscription.unsubscribe(); console.log('Abonēšana pārtraukta!'); }, 5000); // Izvade (aptuveni): // Intervāls: 0 // Intervāls: 1 // Intervāls: 2 // Intervāls: 3 // Intervāls: 4 // Abonēšana pārtraukta! ```

RxJS operatori: datu plūsmu transformēšana un filtrēšana

RxJS operatori ir bibliotēkas sirds. Tie ļauj transformēt, filtrēt, apvienot un manipulēt ar Observables deklaratīvā un kompozicionālā veidā. Ir pieejami daudzi operatori, katrs paredzēts konkrētam mērķim. Šeit ir daži no visbiežāk izmantotajiem operatoriem:

Transformācijas operatori:

• map(): Pielieto funkciju katrai vērtībai, ko emitē Observable, un emitē rezultātu. Līdzīgi kā map() metode masīviem.
• pluck(): Iegūst konkrētu īpašību no katras vērtības, ko emitē Observable.
• scan(): Pielieto akumulatora funkciju pār avota Observable un atgriež katru starprezultātu.
• buffer(): Apkopo vērtības no avota Observable masīvā un emitē masīvu, kad ir izpildīts noteikts nosacījums.
• window(): Līdzīgi kā buffer(), bet tā vietā, lai emitētu masīvu, tas emitē Observable, kas pārstāv vērtību logu.

Piemērs: map() operatora izmantošana

```javascript import { from } from 'rxjs'; import { map } from 'rxjs/operators'; const numbers = from([1, 2, 3, 4, 5]); const squaredNumbers = numbers.pipe( map(x => x * x) ); squaredNumbers.subscribe(value => console.log('Kvadrātā:', value)); // Izvade: // Kvadrātā: 1 // Kvadrātā: 4 // Kvadrātā: 9 // Kvadrātā: 16 // Kvadrātā: 25 ```

Filtrēšanas operatori:

• filter(): Emitē tikai tās vērtības, kas atbilst noteiktam nosacījumam.
• debounceTime(): Aizkavē vērtību emitēšanu, līdz ir pagājis noteikts laiks bez jaunu vērtību emitēšanas. Noderīgi, lai apstrādātu lietotāja ievadi un novērstu pārmērīgus pieprasījumus.
• distinctUntilChanged(): Emitē tikai tās vērtības, kas atšķiras no iepriekšējās vērtības.
• take(): Emitē tikai pirmās N vērtības no Observable.
• skip(): Izlaiž pirmās N vērtības no Observable un emitē atlikušās vērtības.

Piemērs: filter() operatora izmantošana

```javascript import { from } from 'rxjs'; import { filter } from 'rxjs/operators'; const numbers = from([1, 2, 3, 4, 5, 6]); const evenNumbers = numbers.pipe( filter(x => x % 2 === 0) ); evenNumbers.subscribe(value => console.log('Pāra:', value)); // Izvade: // Pāra: 2 // Pāra: 4 // Pāra: 6 ```

Kombinēšanas operatori:

• merge(): Apvieno vairākus Observables vienā Observable.
• concat(): Sasaista vairākus Observables, emitējot vērtības no katra Observable secīgi.
• combineLatest(): Apvieno jaunākās vērtības no vairākiem Observables un emitē jaunu vērtību, kad kāds no avota Observables emitē vērtību.
• zip(): Apvieno vērtības no vairākiem Observables, pamatojoties uz to indeksu, un emitē jaunu vērtību katrai kombinācijai.
• withLatestFrom(): Apvieno jaunāko vērtību no cita Observable ar pašreizējo vērtību no avota Observable.

Piemērs: combineLatest() operatora izmantošana

```javascript import { interval, combineLatest } from 'rxjs'; import { map } from 'rxjs/operators'; const interval1 = interval(1000); const interval2 = interval(2000); const combinedIntervals = combineLatest( interval1, interval2, (x, y) => `Intervāls 1: ${x}, Intervāls 2: ${y}` ); combinedIntervals.subscribe(value => console.log(value)); // Izvade (aptuveni): // Intervāls 1: 0, Intervāls 2: 0 // Intervāls 1: 1, Intervāls 2: 0 // Intervāls 1: 1, Intervāls 2: 1 // Intervāls 1: 2, Intervāls 2: 1 // Intervāls 1: 2, Intervāls 2: 2 // ... ```

Biežāk sastopamie RxJS modeļi

RxJS piedāvā vairākus jaudīgus modeļus, kas var vienkāršot bieži sastopamus asinhronās programmēšanas uzdevumus:

Debouncing:

Operators debounceTime() tiek izmantots, lai aizkavētu vērtību emitēšanu, līdz ir pagājis noteikts laiks bez jaunu vērtību emitēšanas. Tas ir īpaši noderīgi, apstrādājot lietotāja ievadi, piemēram, meklēšanas vaicājumus vai veidlapu iesniegšanu, kur vēlaties novērst pārmērīgus pieprasījumus serverim.

Piemērs: Meklēšanas ievades Debouncing

```javascript import { fromEvent } from 'rxjs'; import { map, debounceTime, distinctUntilChanged } from 'rxjs/operators'; const searchInput = document.getElementById('searchInput'); const searchObservable = fromEvent(searchInput, 'keyup').pipe( map((event: any) => event.target.value), debounceTime(300), // Gaidīt 300 ms pēc katra taustiņspiediena distinctUntilChanged() // Emitēt tikai tad, ja vērtība ir mainījusies ); searchObservable.subscribe(searchTerm => { console.log('Meklē:', searchTerm); // Veikt API pieprasījumu, lai meklētu terminu }); ```

Throttling:

Operators throttleTime() ierobežo ātrumu, ar kādu vērtības tiek emitētas no Observable. Tas emitē pirmo vērtību, kas emitēta noteiktā laika logā, un ignorē turpmākās vērtības, līdz logs aizveras. Tas ir noderīgi, lai ierobežotu notikumu biežumu, piemēram, ritināšanas vai loga izmēru maiņas notikumus.

Pārslēgšanās:

Operators switchMap() tiek izmantots, lai pārslēgtos uz jaunu Observable, kad no avota Observable tiek emitēta jauna vērtība. Tas ir noderīgi, lai atceltu neapstiprinātus pieprasījumus, kad tiek iniciēts jauns pieprasījums. Piemēram, varat izmantot switchMap(), lai atceltu iepriekšējo meklēšanas pieprasījumu, kad lietotājs meklēšanas laukā ieraksta jaunu rakstzīmi.

Piemērs: switchMap() izmantošana teksta ievades meklēšanai

```javascript import { fromEvent, of } from 'rxjs'; import { map, debounceTime, distinctUntilChanged, switchMap, catchError } from 'rxjs/operators'; const searchInput = document.getElementById('searchInput'); const searchObservable = fromEvent(searchInput, 'keyup').pipe( map((event: any) => event.target.value), debounceTime(300), distinctUntilChanged(), switchMap(searchTerm => { // Veikt API pieprasījumu, lai meklētu terminu return searchAPI(searchTerm).pipe( catchError(error => { console.error('Meklēšanas kļūda:', error); return of([]); // Kļūdas gadījumā atgriezt tukšu masīvu }) ); }) ); searchObservable.subscribe(results => { console.log('Meklēšanas rezultāti:', results); // Atjaunināt lietotāja saskarni ar meklēšanas rezultātiem }); function searchAPI(searchTerm: string) { // Simulēt API pieprasījumu return of([`Rezultāts terminam ${searchTerm} 1`, `Rezultāts terminam ${searchTerm} 2`]); } ```

Praktiski RxJS pielietojumi

RxJS ir daudzpusīga bibliotēka, ko var izmantot plašā lietojumprogrammu klāstā. Šeit ir daži bieži sastopami lietošanas gadījumi:

• Lietotāja ievades apstrāde: RxJS var izmantot, lai apstrādātu lietotāja ievades notikumus, piemēram, taustiņu nospiešanu, peles klikšķus un veidlapu iesniegšanu. Operatori, piemēram, debounceTime() un throttleTime(), var tikt izmantoti, lai optimizētu veiktspēju un novērstu pārmērīgus pieprasījumus.
• Asinhrono operāciju pārvaldība: RxJS nodrošina jaudīgu veidu, kā pārvaldīt asinhronas operācijas, piemēram, tīkla pieprasījumus un taimerus. Operatori, piemēram, switchMap() un mergeMap(), var tikt izmantoti, lai apstrādātu vienlaicīgus pieprasījumus un atceltu neapstiprinātus pieprasījumus.
• Reāllaika lietojumprogrammu veidošana: RxJS ir labi piemērots reāllaika lietojumprogrammu, piemēram, tērzēšanas lietojumprogrammu un informācijas paneļu, veidošanai. Observables var izmantot, lai attēlotu datu plūsmas no WebSockets vai Server-Sent Events (SSE).
• Stāvokļa pārvaldība: RxJS var izmantot kā stāvokļa pārvaldības risinājumu ietvaros, piemēram, Angular, React un Vue.js. Observables var izmantot, lai attēlotu lietojumprogrammas stāvokli, un operatorus var izmantot, lai transformētu un atjauninātu stāvokli, reaģējot uz lietotāja darbībām vai notikumiem.

RxJS ar populāriem ietvariem

Angular:

Angular lielā mērā paļaujas uz RxJS, lai apstrādātu asinhronas operācijas un pārvaldītu datu plūsmas. Pakalpojums HttpClient Angular atgriež Observables, un RxJS operatori tiek plaši izmantoti, lai transformētu un filtrētu datus, kas atgriezti no API pieprasījumiem. Angular izmaiņu noteikšanas mehānisms arī izmanto RxJS, lai efektīvi atjauninātu lietotāja saskarni, reaģējot uz datu izmaiņām.

Piemērs: RxJS izmantošana ar Angular HttpClient

```typescript import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; @Injectable({ providedIn: 'root' }) export class DataService { private apiUrl = 'https://api.example.com/data'; constructor(private http: HttpClient) { } getData(): Observable { return this.http.get(this.apiUrl).pipe( map(data => data.map(item => ({ ...item, processed: true }))) ); } } ```

React:

Lai gan React nav iebūvēta atbalsta RxJS, to var viegli integrēt, izmantojot bibliotēkas, piemēram, rxjs-hooks vai use-rx. Šīs bibliotēkas nodrošina pielāgotus āķus (hooks), kas ļauj jums pierakstīties uz Observables un pārvaldīt abonementus React komponentos. RxJS var izmantot React asinhronai datu ielādei, komponentu stāvokļa pārvaldībai un reaktīvu lietotāja saskarņu veidošanai.

Piemērs: RxJS izmantošana ar React Hooks

```javascript import React, { useState, useEffect } from 'react'; import { Subject } from 'rxjs'; import { scan } from 'rxjs/operators'; function Counter() { const [count, setCount] = useState(0); const increment$ = new Subject(); useEffect(() => { const subscription = increment$.pipe( scan(acc => acc + 1, 0) ).subscribe(setCount); return () => subscription.unsubscribe(); }, []); return (

); } ```

Vue.js:

Arī Vue.js nav iebūvētas RxJS integrācijas, bet to var izmantot ar bibliotēkām, piemēram, vue-rx, vai manuāli pārvaldot abonementus Vue komponentos. RxJS var izmantot Vue.js līdzīgiem mērķiem kā React, piemēram, asinhronai datu ielādei un komponentu stāvokļa pārvaldībai.

Labākās prakses RxJS lietošanai

• Atrakstieties no Observables: Vienmēr atrakstieties no Observables, kad tie vairs nav nepieciešami, lai novērstu atmiņas noplūdes. Izmantojiet Subscription objektu, ko atgriež subscribe() metode, lai atrakstītos.
• Izmantojiet pipe() metodi: Izmantojiet pipe() metodi, lai savienotu operatorus lasāmā un uzturamā veidā.
• Apstrādājiet kļūdas korekti: Izmantojiet catchError() operatoru, lai apstrādātu kļūdas un novērstu to izplatīšanos pa Observable ķēdi.
• Izvēlieties pareizos operatorus: Izvēlieties atbilstošus operatorus savam konkrētajam lietošanas gadījumam. RxJS piedāvā plašu operatoru klāstu, tāpēc ir svarīgi saprast to mērķi un uzvedību.
• Uzturiet Observables vienkāršus: Izvairieties no pārāk sarežģītu Observables izveides. Sadaliet sarežģītas operācijas mazākos, vieglāk pārvaldāmos Observables.

Paplašināti RxJS jēdzieni

Subjects:

Subjects darbojas gan kā Observables, gan kā Observers. Tie ļauj pārraidīt datus vairākiem abonentiem un arī ievadīt datus plūsmā. Ir dažādi Subject veidi, tostarp:

• Subject: Pamata Subject, kas pārraida vērtības visiem abonentiem.
• BehaviorSubject: Nepieciešama sākotnējā vērtība un emitē pašreizējo vērtību jauniem abonentiem.
• ReplaySubject: Buferē noteiktu skaitu vērtību un atskaņo tās jauniem abonentiem.
• AsyncSubject: Emitē tikai pēdējo vērtību, kad Observable pabeidz darbu.

Schedulers:

Schedulers kontrolē Observables vienlaicīgumu. Tie ļauj izpildīt kodu sinhroni vai asinhroni, dažādos pavedienos vai ar noteiktu aizkavi. RxJS piedāvā vairākus iebūvētus plānotājus, tostarp:

• queueScheduler: Plāno uzdevumus izpildei pašreizējā JavaScript pavedienā pēc pašreizējā izpildes konteksta.
• asapScheduler: Plāno uzdevumus izpildei pašreizējā JavaScript pavedienā, cik drīz vien iespējams pēc pašreizējā izpildes konteksta.
• asyncScheduler: Plāno uzdevumus izpildei asinhroni, izmantojot setTimeout vai setInterval.
• animationFrameScheduler: Plāno uzdevumus izpildei nākamajā animācijas kadrā.

Secinājums

RxJS ir jaudīga bibliotēka reaktīvu lietojumprogrammu veidošanai JavaScript. Apgūstot Observables, operatorus un biežāk sastopamos modeļus, jūs varat izveidot atsaucīgākas, mērogojamākas un uzturējamākas lietojumprogrammas. Neatkarīgi no tā, vai strādājat ar Angular, React, Vue.js vai tīru JavaScript, RxJS var ievērojami uzlabot jūsu spēju apstrādāt asinhronas datu plūsmas un veidot sarežģītas lietotāja saskarnes.

Izmantojiet reaktīvās programmēšanas spēku ar RxJS un atklājiet jaunas iespējas savām JavaScript lietojumprogrammām!