RxJS: uyatsiz kombinatLatest va xudbinlikLatestFrom bilan

Ob'ektga yo'naltirilgan dasturlashni birinchi marta ko'rganimda menga hamma narsa sinf ekanligini aytishdi. Men RxJS-ni bir necha oydan beri ishlatib kelaman va shunga o'xshash klix xayolimga keladi, ya'ni RxJS-da hamma narsa oqimdir. Ilovangiz ma'lumotlarini kuzatiladigan to'plam sifatida ko'rib chiqish odatda ma'lumotlar manbalari o'rtasida qandaydir o'zaro ta'sirni talab qiladi. Ushbu maqolada men o'zimning ishim bilan shug'ullanishim kerak bo'lgan haqiqiy vaziyatni tahlil qilib kombinatLatest va LatestFrom operatorlari bilan tanishishingizni istardim.

Muammoning tavsifi

Men muntazam ravishda Polshaning eng mashhur nashriyotlaridan birida JavaScript dasturchisi sifatida ishlayman. Bir kuni, kundalik vazifalardan o'zgarib, Flash dasturlarini Angularga o'tkazishda, bizdan berilgan koeffitsientlar asosida kvadratik funktsiyalar grafigini ko'rsatuvchi dasturni ishlab chiqishimiz so'raldi. Talablardan biri paydo bo'lgan tenglamani zudlik bilan ko'rsatish edi, shu bilan bir vaqtda "yuborish" tugmachasini bosgandan so'ng tegishli grafikning chiqarilishi kutilgan edi. RxJS yuqorida aytib o'tilgan muammoni qanday hal qilganini ko'raylik.

E'tibor markazidagi operatorlar

Maqolaning sarlavhasi shundan ko'rinib turibdiki, dasturda ishlatilgan ikkita kuchli operatorlar kombinatsiyalangan va LatestFrom bo'lgan.

Men kombinatsion operatorni noma'lum operator deb nomladim, chunki hosil bo'lgan oqim tarkibini ko'rish mumkin bo'lsa, u har biridan oxirgi qiymatni chiqaradi. Siz uni soatiga qisqa yangiliklar xizmatini tayyorlaydigan xonada o'tirgan yangiliklar olib boruvchisi bilan taqqoslashingiz mumkin. U bir nechta ma'lumot oqimlariga kirish huquqiga ega: siyosat $, iqtisod $, sport $, ob-havo $ va uning vazifasi har bir mintaqadan eng so'nggi yangiliklarni olishdir. U quyidagi oqimni yaratgan degan xulosaga kelishimiz mumkin: kombinatLatest (siyosat $, iqtisod $, sport $, ob-havo $).

Aksincha, withLatestFromni xudbinlik operatori sifatida qabul qilish mumkin, chunki natijada paydo bo'ladigan oqim faqat manba kuzatilganidan so'ng va withLatestFrom operatoriga o'tgan oqimning so'nggi qiymatini qo'shganda qiymat chiqaradi. Har bir match hafta oxiri oldidan gazetani yozishga majbur bo'lgan tezyurar jurnalistni tasavvur qiling. U ikkita ma'lumot oqimiga kirish huquqiga ega: speedwayNews $ va ob-havo $. Har safar manba oqimidan yangi bildirishnoma yuboriladi (speedwayNews $), shuningdek, ob-havo ma'lumoti (ob-havo $) haqida ham ma'lumot kerak. Shuning uchun u quyidagi oqimni yaratdi deb ayta olamiz: speedwayNews $ .pipe (LatestFrom (havo $ bilan)).

Amalga oshirish

Quyida siz namunaning dastlabki kodini topasiz. Men bosqichma-bosqich borib, kodning har bir qismini batafsil aytib beraman.

Jonli misol bu erda mavjud: https://jsfiddle.net/axo4kjL3/57/

Birinchidan, shablonni ko'rib chiqaylik. Bu shunchaki namoyish qilish uchun mo'ljallangan, shuning uchun u uslublashdan mahrumdir va siz tenglamani ham, grafikni ham chiqarish uchun to'ldiruvchini ko'rishingiz mumkin. Biroq, maqolaning asosiy maqsadi RxJS operatorlari bilan tanishishdir, shuning uchun iltimos, bu oddiy echimni kechiring. Chap tomonda kvadrat funktsiyaning koeffitsientlarini ta'minlaydigan uchta kirish shakli va grafikani ko'rsatishga imkon beruvchi tugma mavjud. Bundan tashqari, olingan tenglamani jonli ko'rib chiqish mavjud. O'ng tomonda, funktsiyaning grafigi uchun to'ldiruvchi mavjud, u faqat ko'rsatish tugmachasini bosgandan so'ng yangilanadi.

Shoshilmasdan, JavaScript kodiga o'taylik. Men CDN-dan foydalanib RxJS kutubxonasini biriktirdim va global rxjs ob'ektini import qilish uchun fosh qildim. Keyinchalik, men bir nechta barqarorlikni aniqladim va tenglama va grafikani taqlid qilish uchun yordamchi funktsiyani qo'shdim. Va nihoyat, kodning RxJS qismini ko'rib chiqaylik. Reaktiv kutubxonadan foydalangan holda dasturni ishlab chiqishda har doim javob berilishi kerak bo'lgan bir savol mavjud, ya'ni dastur mantig'ini amalga oshirish uchun qaysi ma'lumotlar oqimi kerak. Muammoni tahlil qilishga vaqt ajrating va siz duch keladigan oqimlarning ro'yxatini topishga harakat qiling.

Men quyidagi ma'lumot oqimlari bilan yakunlandim:

  • foydalanuvchi render tugmachasini bosganda chiqaradigan grafik, $ $
  • Foydalanuvchi formalar bilan o'zaro ta'sirlashganda to'rtburchaklar funktsiyasining koeffitsientlarini chiqaradigan $ tenglama,
  • foydalanuvchi render tugmachasini bosganda, kvadrat funktsiyaning koeffitsientlarini ta'minlaydigan $ $ grafik.

Keyingi bosqichda siz yuqorida qayd etilgan kuzatuvlarni yaratishingiz kerak.

Birinchi oqimni tuzish juda oson, chunki siz RxJS kutubxonasi bilan ta'minlanadiganEvent operatoridan foydalanishingiz mumkin va qaysi maqsadli element qiymat emissiyasini boshlaydigan voqeani ko'rsatishingiz mumkin. Bundan tashqari, doimiy foydalanuvchi doimiy ravishda render tugmachasini bosganda keraksiz ko'rsatilishni oldini olish uchun men debounceTime operatoridan foydalandim. Natijada, men faqat DEBOUNCE_TIME o'zgarmas aniq vaqt oralig'i bo'lgan bir voqea bilan qiziqdim.

Ikkinchi oqim maqolaning birinchi mashhuridan foydalanadi: kombinat operatori. Formadagi har bir koeffitsient kiritish, kvadrik funktsiyaning koeffitsientlarini birgalikda belgilaydigan qiymatlar manbai hisoblanadi. Shunday qilib, men qandaydir tarzda ushbu oqimlarga obuna bo'lishim va natijani massiv shaklida olishim kerak edi. Qanday qilib har bir kirish uchun kuzatiladigan narsaga ega bo'laman? Sehrgar getCoeffObservable funktsiyasida sodir bo'ladi. U o'rnatilgan fromEvent operatoridan foydalangan holda har bir kirish uchun kuzatiladigan holatni yaratadi va quvur orqali ikkita operatorni qo'llaydi. Birinchisi, RxJS kutubxonasi bilan ta'minlanmaydigan va funktsiyaning ustida aniqlangan maxsus operator. UnikalSettledInputValue operatori nima qilayotganini ko'rib chiqaylik. Birinchidan, foydalanuvchi yangi qiymatni chiqarish uchun kirish bilan o'zaro ta'sirlashgandan so'ng belgilangan vaqtni kutadi. Keyinchalik, InputEvent ob'ekti qiymatni taqqoslaydi, u oxirgi chiqarilayotgan ob'ekt bilan bir xil bo'lsa, qiymatni tarqalishini to'xtatib turuvchi diffUntilChanged operatoridan to'g'ri foydalanish uchun juda muhimdir. Agar buyurtma o'zgartirilib va ​​UnutilChanged-da, InputEvent ob'ektlari oqimi bilan chaqirilsa, har bir kiritish o'zgarishi yangi qiymat sifatida ko'rib chiqiladi, chunki foydalanuvchi tomonidan berilgan qiymatlar o'rniga ob'ekt havolalari taqqoslanadi. Bo'ldi shu. Har safar eksport qilinadigan va ishlatilishi mumkin bo'lgan odatiy, qayta ishlatiladigan operator, siz kirishdan keladigan oqim bilan shug'ullanishingiz kerak. StartWith operatori kombinatsiyaning o'ziga xos xususiyati uchun echimdir, ya'ni kombinatsiyadan qaytgan oqim, uning tarkibidagi har bir oqim chiqmaguncha qiymat chiqarmaydi.

Va nihoyat, ahamiyatlisi shundaki, $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ qiymat qiymatini ko'rilmaydi. Oddiy qilib aytganda, har safar grafBn $ qiymat chiqaradi, ya'ni foydalanuvchi ko'rsatish tugmachasini bosdi, men kvadritsion funktsiyaning parametrlariga kirishim uchun qiymatni chiqarishni va oxirgi oqim qiymatini $ stream tenglamalaridan biriktirishni xohlayman.

Xulosa

Umid qilamanki, sizga ushbu maqola yoqdi va ikkita operator bilan tanishib chiqdingiz. Ular juda kuchli va ayniqsa davlatni boshqarish uchun ngrx / store-dan foydalanadigan dasturlarda keng qo'llaniladi.

Har qanday savol berishdan qo'rqmang.

Agar siz keyingi maqolalarda RxJS bilan bog'liq har qanday mavzuni yoritishni xohlasangiz, shunchaki menga xabar bering!