Bir veb tətbiq edərkən, görünmə vəziyyətini izləməli olduğunuz vəziyyətlərlə qarşılaşa bilərsiniz. Bir animasiya və ya videonun təsirini oynamaq və ya dayandırmaq, intensivliyi azaltmaq və ya analitika üçün istifadəçi davranışını izləmək lazımdır. İlk baxışdan bu funksiyanı həyata keçirmək olduqca sadə görünür, amma o qədər də çox deyil. İstifadəçi fəaliyyətini izləmək olduqca mürəkkəb bir prosesdir.
Çox hallarda yaxşı işləyən, lakin brauzer nişanının hərəkətsizliyinin bütün mümkün hallarını idarə etməyən bir səhifə görüntüləmə API var. Səhifə Görünüşü API, dinləyicilərə səhifənin görünmə vəziyyətinin dəyişdiyini bildirmək üçün bir görünmə dəyişdirmə hadisəsi göndərir. Bəzi hallarda brauzer pəncərəsi və ya müvafiq nişan görünüşdən gizlidirsə bir hadisə baş vermir. Bu halların bəzilərini həll etmək üçün həm sənəddə, həm də pəncərədə fokus və qarışıqlıq hadisələrinin birləşməsindən istifadə etməliyik.
Beləliklə, bu yazıdan Səhifə Görünüşü Vəziyyətini izləyən sadə Reaktiv bir komponentin necə yaradılacağını öyrənəcəksiniz.
Reaksiya tətbiqetməsini yaratmaq üçün Kodlar qutusu istifadə ediləcək (siz də yaratmaq-reaksiya-tətbiq istifadə edə bilərsiniz). HTML5 video elementinin yalnız brauzer nişanı diqqət mərkəzində olduqda və ya aktiv olduqda oynanacağı kiçik bir tətbiq yaradacağıq, əks halda avtomatik olaraq dayandırılacaqdır. Video tətbiq xüsusiyyətlərinin sınanmasını asanlaşdırmaq üçün istifadə olunur.
Görmə qabiliyyəti - Səhifə Görünüşü API üçün bander
Visibility.js Səhifə Görünüşü API üçün bir bükücüdür. Satıcı prefiksləri gizlədir və yüksək səviyyəli funksiyalar əlavə edir. Səhifə Görünüşü API veb səhifənizin ya bir istifadəçiyə göründüyünü, ya da arxa nişanda və ya təqdimatda gizli olub olmadığını müəyyən etməyə imkan verir. JavaScript məntiqində səhifənin görünmə vəziyyətini istifadə etməyə və lazımsız timers və AJAX sorğularını söndürməklə brauzerinizin işini yaxşılaşdırmağa və ya istifadəçi interfeysi təcrübəsini yaxşılaşdırmağa imkan verir (məsələn, istifadəçi başqa bir brauzer nişanına keçdikdə video oxutma və ya slayd nümayişini dayandıraraq).
Crossbrowser və istifadəçinin səhifəyə baxıb-baxmadığını yoxlamaq üçün yüngül bir yol. (HTML5 görünürlüğünü api ətrafında gəzdirici)
Başlamaq
Reaksiya tətbiqetməmizi ləğv etmək üçün Codeandbox istifadə edəcəyik yaratmaq-reaksiya-app həmçinin). Brauzer nişanı diqqət mərkəzində olduqda və ya aktiv olduqda oynayacaq bir HTML5 Video elementi olan kiçik bir tətbiq yaradacağıq, əks halda avtomatik dayandırılacaqdır. Videomuzdan istifadə edirik, çünki tətbiqetməmizin işləməsini asanlaşdıracaq.
Ən sadə parçanı i.e. yaratmaqla başlayaq. video komponenti. Aktiv adlı Boolean rekvizitləri və video üçün URL-i saxlayacaq src adlı String rekvizitləri alacaq sadə bir komponent olacaqdır. Aktiv rekvizitlər doğrudursa, videonu səsləndirəcəyik, əksinə onu dayandıracağıq.
Sadə React sinif komponenti yaradacağıq. Src rekvizitlərindən istifadə edərək ötürülən URL-ə göstərilən mənbəyi ilə sadə bir video elementi göstərəcəyik və video DOM node-da bir ref əlavə etmək üçün React-in yeni ref API istifadə edəcəyik. Səhifənin aktiv olacağı tətbiqetməyə başladıqda videonu avtomatik oynatma üçün təyin edəcəyik. Burada qeyd etmək lazım olan bir şey Safari, istifadəçi qarşılıqlı olmadan media elementlərinin avtomatik oynamasına icazə vermir. KomponentDidUpdate həyat dövrü metodu bir komponentin rekvizitləri dəyişdikdə yan təsirlərə qarşı çox əlverişlidir. Buna görə, burada this.props.active-in cari dəyərinə əsasən videonu səsləndirmək və dayandırmaq üçün bu həyat dövrü metodundan istifadə edəcəyik.
Brauzer satıcı prefiks fərqləri müəyyən API-lərdən istifadə edərkən məşğul olmaq çox əsəbi olur və Səhifə Görünüşü API əlbəttə onlardan biridir. Buna görə də, bu fərqləri idarə edəcək və istifadəçi brauzerinə əsaslanan vahid qaydada bizə uyğun API-i qaytara biləcək sadə bir köməkçi funksiya yaradacağıq. Bu kiçik funksiyanı yaradacağıq və ixrac edəcəyik səhifəVizibilityUtils.js altında src qovluq.
Bu funksiyada brauzerə məxsus API-ni qaytarmaq üçün sadə if-başqa ifadəyə əsaslanan idarəetmə axını istifadə edəcəyik. Əlavə etdiyimizi görə bilərsiniz ms İnternet Explorer üçün prefiks və vebkit webkit brauzerlər üçün prefiks. Düzgün API-ni gizli və görünürlüğünde dəyişən simli dəyişənlərdə saxlayacağıq və onları sadə bir obyekt şəklində funksiyadan geri qaytaracağıq. Nəhayət, funksiyanı ixrac edəcəyik.
Sonra, əsas komponentimizə keçirik. Render Props nümunəsini istifadə edərək, bütün Səhifələr Görünüşü izləmə məntiqimizi təkrar istifadə edilə bilən React sinif komponentinə yapışdıracağıq. VisibilityManager adlı sinif komponenti yaradacağıq. Bu komponent DOM əsaslı hadisə dinləyicilərinin əlavə edilməsi və aradan qaldırılması ilə məşğul olacaqdır.
Əvvəllər yaratdığımız yardımçı funksiyanı idxal edərək və düzgün brauzerin xüsusi API-lərini almaq üçün işə başlamağa başlayacağıq. Sonra React komponentini yaradacağıq və vəziyyətini tək bir sahə ilə görülə bilər. Bu Boolean dövlət sahəsi səhifəmizin görünmə vəziyyətini əks etdirməyə cavabdehdir. Komponentin komponentiDidMount ömrü dövrü metodunda bu.handleVisibilityChange metodu ilə işləmə mübadiləsi hadisəsi üçün sənəd dinləyicisini əlavə edəcəyik. Pəncərə elementi ilə yanaşı sənəddəki hadisələrə diqqət və qarışıqlıq üçün hadisə dinləyicilərini əlavə edəcəyik. Bu dəfə biz bu.forceVisibilityTrue və this.forceVisibilityFalse'yi fokuslanma və qarışıqlıq hadisələri üçün işlədicilər olaraq təyin edəcəyik.
İndi, bundan sonra məcburi tək bir arqumenti qəbul edəcək qoluVisibilityChange metodu yaradacağıq. Bu gücFlag arqumenti, görünmə dəyişdirmə hadisəsi və ya fokus və ya bulanma hadisələri səbəbindən adlanmadığını müəyyən etmək üçün istifadə ediləcəkdir. Bu, gücVisibilityTrue və forceVisibilityFalse metodlarının məcburiFlag arqumenti üçün həqiqi və yalnış dəyəri olan "HandVisibilityChange" metodundan başqa heç nə etməməsi ilə əlaqədardır. TutmaVisibilityChange metodunun içərisində əvvəlcə məcburiFlat arqumentinin Boolean olub olmadığını yoxlayırıq (çünki görünən yer dəyişdirmə hadisəsi idarəedicisindən deyilənə görə verilmiş arqument SyntheticEvent obyekti olacaqsa). Bu Boolean olarsa, bunun doğru və ya yalan olduğunu yoxlayırıq. Doğrudursa, setVisibility metodunu həqiqi ilə adlandırırıq, əks təqdirdə metodu arqument olaraq yalnış adlandırırıq. SetVisibility metodu, bu.setState metodunu komponentin vəziyyətindəki isVisible sahənin dəyərini yeniləmək üçün istifadə edir. Lakin, agarFlag Boolean deyilsə, sənəddəki gizli atribut dəyərini yoxlayırıq və buna uyğun olaraq SetVisibility metodunu çağırırıq. Bu səhifə Görünüşü Dövlət izləmə məntiqimizi tamamlayır.
Komponenti təbiətdə təkrar istifadə etmək üçün Render Props nümunəsini, yəni istifadə edirik. render metodundan bir komponent göstərmək əvəzinə, bu.props.children-i bu.state.isVisible ilə bir funksiya kimi istifadə edirik.
Nəhayət, Reaktiv tətbiqlərimizi DOM-a quraşdırırıq indeks.js sənəd. İki reaksiya komponentimizi VisibilityManager və Video idxal edirik və onları bəstələyərək kiçik bir funksional reaksiya komponenti tətbiqetməsini yaradırıq. VisibilityManager komponentinin övladları kimi bir funksiyanı qəbul edirik və arqument olaraq Görünəndir və geri qaytarma ifadəsində Video komponentinə keçiririk. Src Video komponentinə üstünlük verdiyi üçün bir video URL-i də ötürürük. Render Props əsaslı VisiblityManager komponentini necə istehlak edirik. Nəhayət, ReactDOM.render metodundan DOM node-da id "kök" ilə React tətbiqimizi göstərmək üçün istifadə edirik.
Nəticə
Müasir brauzer API-ləri həqiqətən güclü olur və inanılmaz şeylər etmək üçün istifadə edilə bilər. Bu API-lərin əksəriyyəti xarakterikdir və bəzən React-in dekorativ paradiqmasında işləmək çətin ola bilər. Bu API-ləri öz təkrar istifadə edilə bilən reaksiya komponentlərinə sarmaq üçün Render Props kimi güclü nümunələrdən istifadə çox faydalı ola bilər.
JavaScript Yaradıcısı və Kiber Təhlükəsizlik Həvəskarı.
24 Avqust tarixində yayımlanıb
