Naudingi patarimai

Stebėkite puslapio matomumą reaguodami naudodami „Render“ rekvizitus

Pin
Send
Share
Send
Send


Kurdami žiniatinklio programą, galite susidurti su situacijomis, kai jums reikia sekti esamą matomumo būklę. Taip atsitinka, kad jums reikia atkurti arba pristabdyti animacijos ar vaizdo įrašo efektą, sumažinti analizės intensyvumą ar sekti vartotojo elgesį. Iš pirmo žvilgsnio šią funkciją įgyvendinti yra gana paprasta, tačiau ji nėra tokia. Vartotojo veiklos stebėjimas yra gana sudėtingas procesas.

Yra puslapio matomumo API, kuri daugeliu atvejų veikia gerai, tačiau netvarko visų galimų naršyklės skirtukų neveikimo atvejų. Puslapio matomumo API siunčia matomumo keitimo įvykį, kad klausytojai žinotų, kad pasikeitė puslapio matomumo būsena. Kai kuriais atvejais jis nesuaktyvina įvykio, jei naršyklės langas ar atitinkamas skirtukas yra paslėpti. Norėdami tvarkyti kai kuriuos iš šių atvejų, turime naudoti fokusavimo ir suliejimo įvykių derinį tiek dokumente, tiek lange.

Taigi iš šio straipsnio sužinosite, kaip sukurti paprastą „React“ komponentą, stebintį puslapio matomumo būseną.

„Codesandbox“ čia bus naudojama kuriant „React“ programą (taip pat galite naudoti „sukurti-reaguoti-programą“). Mes sukursime nedidelę programą, kurioje HTML5 vaizdo elementas bus paleistas tik tuo atveju, jei naršyklės skirtukas yra fokusuotas arba aktyvus, kitaip jis bus pristabdytas automatiškai. Vaizdo įrašas naudojamas programos funkcijų testavimui palengvinti.

visibilityjs - puslapio matomumo API įvyniojimo priemonė

„Visibility.js“ yra puslapio matomumo API aplankas. Jis slepia pardavėjo priešdėlius ir prideda aukšto lygio funkcijas. Puslapio matomumo API leidžia nustatyti, ar jūsų internetinis puslapis matomas vartotojui, ar paslėptas fono skirtuke, ar iš anksto perteiktas. Tai leidžia naudoti puslapio matomumo būseną „JavaScript“ logikoje ir pagerinti naršyklės veikimą išjungiant nereikalingus laikmačius ir AJAX užklausas arba pagerinti vartotojo sąsajos patirtį (pavyzdžiui, sustabdant vaizdo įrašų atkūrimą ar skaidrių demonstraciją, vartotojui persijungus į kitą naršyklės skirtuką).

„Crossbrowser“ ir lengvas būdas patikrinti, ar vartotojas žiūri į puslapį, ar sąveikauja su juo. (įvyniojimas aplink HTML5 matomumo api)

Darbo pradžia

Mes naudosime „Codesandbox“, kad paleisime savo „React“ programą (galite naudoti sukurti-reaguoti-app taip pat). Sukursime nedidelę programą, kurioje bus HTML5 vaizdo įrašo elementas, kuris bus paleistas tik tada, kai naršyklės skirtukas bus sufokusuotas arba aktyvus, kitaip jis bus pristabdytas automatiškai. Mes naudojame vaizdo įrašą, nes tai leis lengvai išbandyti mūsų programos funkcionalumą.

Pradėkime nuo paprasčiausio kūrinio sukūrimo, t. vaizdo komponentas. Tai bus paprastas komponentas, kuriam bus suteikta Boolean rekvizitai, pavadinti aktyviais, ir String rekvizitai, pavadinti src, kurie išlaikys vaizdo įrašo URL. Jei aktyvi rekvizitai yra tiesa, tada paleidžiame vaizdo įrašą, kitaip pristabdysime.

Mes sukursime paprastą „React“ klasės komponentą. Pateiksime paprastą vaizdo įrašo elementą, kurio šaltinis bus nurodytas naudojant URL, perduotą naudojant src rekvizitus, ir panaudosime naują „React“ nuorodą API, norėdami pridėti nuorodą prie vaizdo įrašo DOM mazgo. Mes nustatysime, kad vaizdo įrašas būtų automatiškai paleistas, darant prielaidą, kad paleidę programą puslapis bus aktyvus. Vienas dalykas, į kurį reikia atkreipti dėmesį, yra tai, kad „Safari“ dabar neleidžia automatiškai leisti medijos elementų be vartotojo sąveikos. „ComponDidUpdate“ gyvavimo ciklo metodas yra labai patogus tvarkant šalutinį poveikį, kai keičiasi komponento rekvizitai. Todėl čia naudosime šį gyvenimo ciklo metodą, norėdami paleisti ir pristabdyti vaizdo įrašą pagal dabartinę šio.props.aktyvioji vertė.

Naršyklės pardavėjo prefiksų skirtumai yra labai erzinantys, kai reikia naudoti tam tikras API, ir puslapio matomumo API yra viena iš jų. Todėl mes sukursime paprastą naudingumo funkciją, kuri sutvarkys šiuos skirtumus ir vienodai grąžins mums suderinamą API, pagrįstą vartotojo naršykle. Mes sukursime ir eksportuosime šią mažą funkciją iš puslapisVisibilityUtils.js po src katalogą.

Atlikdami šią funkciją, naudosime paprastą teiginiais pagrįstą valdymo srautą, kad grąžintume naršyklės API. Galite pamatyti, kaip pridedame ms prefiksas interneto naršyklei ir internetinis rinkinys prefiksas žiniatinklio rinkinių naršyklėms. Mes išsaugosime teisingą API paslėptuose ir visibilityChange eilutės kintamuosiuose ir grąžinsime juos iš funkcijos paprasto objekto pavidalu. Galiausiai, mes eksportuosime funkciją.

Toliau pereiname prie pagrindinio komponento. Mes sujungsime visą savo puslapio matomumo stebėjimo logiką į pakartotinai naudojamą „React“ klasės komponentą, panaudodami „Render Props“ modelį. Mes sukursime klasės komponentą pavadinimu „VisibilityManager“. Šis komponentas padės pridėti ir pašalinti visus DOM pagrįstus įvykių klausytojus.

Pradėsime importuodami anksčiau sukurtą naudingumo funkciją ir kviesdami ją gauti teisingas naršyklės API. Tada mes sukursime „React“ komponentą ir suinicialuosime jo būseną viename lauke, kurio reikšmė „True“ yra teisinga. Šis loginis būsenos laukas bus atsakingas už mūsų puslapio matomumo būklės atspindėjimą. Komponento „komponentasDidMount“ gyvavimo ciklo metode prie matomumo pasikeitimo įvykio dokumento pritvirtinsime įvykio klausytoją, o jo tvarkytoju bus naudojamas metodas „this.handleVisibilityChange“. Mes taip pat pritvirtinsime įvykių klausytojus, kurie sutelks dėmesį ir sulieja įvykius dokumente, taip pat lango elementą. Šį kartą mes nustatysime „this.forceVisibilityTrue“ ir „this.forceVisibilityFalse“ atitinkamai kaip fokusavimo ir suliejimo įvykių tvarkytojus.

Dabar mes sukursime metodą „handVisibilityChange“, kuris priims vieną argumentą. Šis argumentas „forceFlag“ bus naudojamas norint nustatyti, ar metodas yra vadinamas dėl matomumo pasikeitimo įvykio, ar fokusavimo, ar suliejimo įvykių. Taip yra todėl, kad „forceVisibilityTrue“ ir „forceVisibilityFalse“ metodai neduoda nieko kito, tik vadina „handleVisibilityChange“ metodą, turinčio teisingą ir klaidingą „ForceFlag“ argumento vertę. Vykdant „handleVisibilityChange“ metodą, pirmiausia patikriname, ar „ForceFlag“ argumento reikšmė yra loginė (tai yra todėl, kad jei jis bus pašauktas iš matomumo pasikeitimo įvykių tvarkytojo, tada perduotas argumentas bus „SyntheticEvent“ objektas). Jei tai yra loginė vertė, tuomet patikriname, ar ji teisinga, ar klaidinga. Kai tai tiesa, mes vadinome „setVisibility“ metodu su tiesa, kitaip metodą vadiname klaidingu kaip argumentą. Metodas „setVisibility“ pasinaudoja šiuo.setState metodu, kad atnaujintų „isVisible“ lauko vertę komponento būsenoje. Bet, jei „ForceFlag“ nėra Boolean, tada mes patikriname dokumente paslėptą atributo vertę ir atitinkamai iškviečiame „setVisibility“ metodą. Tai sukuria mūsų puslapio matomumo būsenos stebėjimo logiką.

Kad komponentas būtų pakartotinai naudojamas gamtoje, mes naudojame „Render Props“ modelį, t. užuot pateikę komponentą iš pateikimo metodo, mes iškviečiame this.props.children kaip funkciją su this.state.isVisible.

Galiausiai savo „React“ programą mes prijungiame prie DOM rodyklė.js byla. Mes importuojame du „React“ komponentus „VisibilityManager“ ir „Video“ ir sukuriame nedidelę funkcinę „React“ komponentų programą komponuodami juos. Mes perduodame funkciją, kaip „VisibilityManager“ komponento vaikai, kurie priima „Visible“ kaip argumentą, ir perduoda jį vaizdo įrašo komponentui grąžinimo ataskaitoje. Taip pat perduodame vaizdo įrašo URL kaip src rekvizitus vaizdo įrašo komponentui. Taip mes naudojame „Render Props“ pagrįstą „VisiblityManager“ komponentą. Galiausiai mes naudojame ReactDOM.render metodą, kad pateiktume „React“ programą DOM mazge su „root“.

Išvada

Šiuolaikinės naršyklės API tampa tikrai galingos ir gali būti naudojamos atlikti nuostabius dalykus. Daugelis šių API yra imperatyvaus pobūdžio ir gali būti sudėtinga dirbti su „React“ deklaratyviąja paradigma. Labai naudinga naudoti tokius galingus modelius, kaip „Render Props“, apvynioti šias API į savo pakartotinai naudojamus „React“ komponentus.

„JavaScript“ kūrėjas ir kibernetinio saugumo entuziastas.

Paskelbta rugpjūčio 24 d

Pin
Send
Share
Send
Send