RxJS: vastik ühendada viimati vs isekas viimastega

Esmakordselt objektorienteeritud programmeerimisega kokku puutudes öeldi mulle, et kõik on klass. Olen RxJS-i kasutanud paar kuud ja mulle tuleb meelde sarnane klišee, nimelt et RxJS-is on kõik vool. Rakenduse andmete käsitlemine hunnikuna jälgitavaid andmeid nõuab tavaliselt andmeallikate vahel mingisugust koostoimet. Selles artiklis sooviksin, et te tutvuksite ettevõttega combLatest jaLateFrom, analüüsides reaalset juhtumit, millega pidin oma töös hakkama saama.

Probleemi kirjeldus

Töötan regulaarselt JavaScripti arendajana ühes Poola populaarseimas kirjastuses. Ühel päeval, vahelduseks igapäevastele tööülesannetele, rännates Flashi rakendused nurgelisse, paluti meil töötada välja rakendus, mis võimaldaks ruutfunktsiooni graafiku renderdada esitatud koefitsientide põhjal. Üks nõue oli saadud võrrandi viivitamatu renderdamine, samas kui pärast graafiku esitamise nuppu klõpsamist oodati vastava graafiku esitamist. Vaatame, kuidas hiilgavalt RxJS eelnimetatud probleemiga tegeles.

Operaatorid rambivalguses

Nagu artikli pealkirjast nähtub, olid rakenduses kasutatud kaks vägevat operaatorit combinateLatest jaLateFrom.

Kutsusin combLatest nilbeks operaatoriks, kuna kui on täheldatav, et moodustatud voog koosneb väärtusest, väljastab see igast väärtusest uusima väärtuse. Saate seda võrrelda ruumis istuva uudiste saatejuhiga, kes peab igal tunnil ette valmistama lühikese uudisteteenuse. Tal on juurdepääs mitmetele andmevoogudele, sealhulgas: poliitika $, majandus $, sport $, ilm $ ja tema ülesanne on valida igalt alalt kõige värskemad uudised. Võib järeldada, et ta loob järgmise voo: combLatest (poliitika $, majandus $, sport $, ilm $).

Vastupidi, portaaliLatestFrom võib tajuda isekana operaatorina, kuna saadud voog emiteerib väärtuse ainult siis, kui jälgitav allikas emiteerib selle ja lisab lihtsalt kõige uuema voo, mis edastati operaatorile withLatestFrom. Kujutage ette kiirtee ajakirjanikku, kes peab enne iga matšinädalavahetust paberi kirjutama. Tal on juurdepääs kahele andmevoole: speedwayNews $ ja weather $. Iga kord, kui saadetakse uus allikavoo (speedwayNews $) teatis, vajab ta ka teavet ilmateate (ilm $) kohta. Seetõttu võime öelda, et ta loob järgmise voo: speedwayNews $ .pipe (withLatestFrom (weather $)).

Rakendamine

Altpoolt leiate näite lähtekoodi. Ma lähen samm-sammult ja selgitan üksikasjalikult iga koodi osa.

Reaalajas näide on saadaval siin: https://jsfiddle.net/axo4kjL3/57/

Esiteks vaatame malli. See on lihtsalt tutvustav eesmärk, seetõttu puudub stiil ja näete nii võrrandi kui ka graafiku renderdamiseks kohahoidjaid. Kuid artikli peamine eesmärk on RxJS-i operaatoritega tutvumine, nii et palun andke mulle see lihtne lahendus andeks. Vasakul on vorm kolme sisendiga ruutfunktsiooni koefitsientide esitamiseks ja nupp, mis võimaldab graafiku renderdamist. Lisaks on saadud võrrandi reaalajas eelvaade. Paremal küljel on funktsiooni graafiku kohahoidja, mida värskendatakse alles pärast renderdusnupul klõpsamist.

Laskem end ilma JavaScripti koodita. Lisasin RxJS-i teegi CDN-i abil ja eksponeerisin globaalse rxjs-objekti, millest importida. Järgmisena määratlesin mõned konstandid ja lisasin abilise funktsiooni, et jäljendada võrrandit ja graafi renderdamist. Lõpuks vaatame üle RxJS koodi osa. Reaktiivse teegi abil rakenduse arendamisel tuleb alati vastata ühele küsimusele, nimelt milliseid andmevooge rakenduse loogika rakendamiseks vajate. Võtke aega probleemi analüüsimiseks ja proovige koostada voogude loetelu, mida võite oodata.

Lõpetasin järgmised andmevood:

  • graphBtn $, mis kiirgub, kui kasutaja klõpsab renderdusnuppu,
  • võrrand $, mis kiirgab kvadratuuri funktsiooni koefitsiendid, kui kasutaja suhtleb vormiga,
  • graafik $, mis pakuvad nelinurga funktsiooni koefitsiente, kui kasutaja klõpsab renderdusnuppu.

Järgmises etapis peate looma ülalnimetatud vaatlused.

Esimest voogu on üsna lihtne komponeerida, kuna võite kasutada operaatoritEvent, mis tarnitakse koos RxJS teekiga, ja näidata, millisel sündmusel mõni sihtelement käivitab väärtuse emissiooni. Lisaks kasutasin operaatorit debounceTime, et vältida tarbetut renderdamist igal ajal, kui lakkamatu kasutaja klõpsab renderdusnuppu. Seetõttu huvitas mind ainult sündmus, mille järel oli põline ajaperiood, mis oli määratletud konstantsena DEBOUNCE_TIME.

Teine voog kasutab artikli esimest kuulsust: operaator combLatest. Vormi iga sisendkoefitsient on väärtuste allikas, mis koos määravad kvadraadi funktsiooni koefitsiendid. Nii et ma pidin kuidagi tellima kõik need ojad ja saadud väärtuse massiivi kujul saama. Kuidas saada iga sisendi jaoks jälgitav? Maagia juhtub funktsioonis getCoeffObservable. See loob iga sisendi jaoks vaadeldava, kasutades sisseehitatud operaatori sündmuse operaatorit ja rakendab toru kaudu kahte operaatorit. Esimene neist on kohandatud operaator, mida ei saadeta koos RxJS-i teegiga ja mis määratleti funktsiooni kohal. Vaatame, mida unikaalneSettledInputValue operaator teeb. Esiteks ootab see kindlaksmääratud aega pärast seda, kui kasutaja suhtleb sisendiga uue väärtuse väljastamiseks. Järgmisena kaardistatakse InputEvent-objekt selle sisalduvasse väärtusesse, mis on olulise tähtsusega eraldiseisvaUntilChangeeritud operaatori korrektseks kasutamiseks, mis peatavad väärtuse levimise, kui see on sama, mis viimati emiteeritud. Kui tellimust vahetataks ja InputEvent-objektide vooga kutsutaks eristuvUntilChanged, loetakse iga sisendi muudatust uueks väärtuseks, kuna kasutaja esitatud väärtuste asemel võrreldakse objekti viiteid. See selleks. Kohandatud korduvkasutatav operaator, mida saab eksportida ja kasutada igal ajal, kui peate tegelema sisendist tuleva vooga. Operaator startWith on lahendus kombinatsioonile Viimane eripära, nimelt see, et combLatest naasev voog ei väljasta väärtust enne, kui iga voog, millest see koosneb, on selle välja lasknud.

Viimaseks, aga jälgitav graaf $ on voog, mis on määratletud paberi teise rokkstaariga: operaatorigaLatestFrom. See lihtsalt ütleb, et alati, kui graphBtn $ väljastab väärtuse, mis tähendab, et kasutaja on klõpsanud renderdusnuppu, soovin selle väärtuse väljastada ja lisada võrrandite $ $ stream uusim kiirgatud väärtus, nii et mul oleks juurdepääs kvadratuuri funktsiooni parameetritele.

Järeldused

Loodan, et teile meeldis artikkel ja saite kahe operaatoriga tuttavaks. Need on eriti võimsad ja laialdaselt kasutatavad, eriti rakendustes, mis kasutavad oleku haldamiseks ngrx / store.

Küsige julgelt küsimusi.

Kui soovite, et ma käsitleksin järgmistes artiklites mõnda RxJS-iga seotud teemat, andke mulle sellest teada!