Spreminjanje velikosti okna se morda zdi nepomembna naloga pri spletnem razvoju, vendar dejansko povezuje kar nekaj konceptov iz JavaScripta in Typescripta ter igra ključno vlogo pri zagotavljanju odzivnega in uporabniku prijaznega dizajna. V kontekstu dinamičnega uporabniškega vmesnika/UX je funkcija 'spreminjanja velikosti okna' najpomembnejša. Vsakodnevni primeri lahko vključujejo stransko vrstico, ki se skrči ob spreminjanju velikosti okna, da zagotovi brezhiben prostor za branje, ali galerijsko sliko, ki se sama prilagodi, da prepreči popačenje. Sprememba se izvede reaktivno s poslušanjem dogodka spreminjanja velikosti okna.
Težava je v izvajanju dejanja, ki je odvisno od spreminjanja velikosti okna, kar je mogoče zelo jedrnato upravljati s tipkanjem in manipulacijo DOM. Za organizacijo naše rešitve bomo izkoristili tipsko preverjanje in razširljivost Typescripta.
window.addEventListener('resize', () => {
naj širina = window.innerWidth;
if(width <= 768){ // dejanje za izvedbo, ko je velikost okna manjša ali enaka 768px }else{ // dejanje za izvedbo, ko je velikost okna večja od 768px } }); [/Koda]
Razumevanje kodeksa
Priložena koda deluje tako, da takoj prikliče anonimno funkcijo ob vsaki spremembi velikosti okna. Ta anonimna funkcija nam omogoča dostop do predmeta dogodka, ki nosi dragocene informacije o incidentu 'spreminjanja velikosti'. Znotraj funkcije definiramo dva pogoja; enega, ko je notranja širina okna manjša ali enaka 768 pikslov, drugega pa, ko je večja od tega. Ta ločnica se običajno uporablja za razlikovanje med mobilnimi in namiznimi napravami.
Razvoj spreminjanja velikosti oken
Window Resizing je produkt razvitega sveta odzivnega spletnega oblikovanja. Za razliko od prejšnjih dni, ko so bila spletna mesta izdelana za standardne velikosti zaslona, so se trenutne zahteve močno spremenile. Z nedvomno širokim naborom naprav z različnimi ločljivostmi zaslona je ključnega pomena, da se naša zasnova prilagaja posameznim platformam za gledanje ter ponuja optimizirano in za oči prijazno postavitev.
Javascript dogodki in Typescript
Če se vrnemo k naši rešitvi, je bistveni del tukaj razumevanje uporabe dogodkov JavaScript s Typescriptom. Dogodek 'spreminjanje velikosti' je le eden od številnih dogodkov, ki jih JavaScript ponuja za določanje različnih stanj in dejanj na spletni strani. 'click', 'hover', 'mousedown' je nekaj primerov. Spajanje teh dogodkov s tipkopisom razvijalcem omogoča ustvarjanje čistejše kode, primerne za vzdrževanje, z močnimi tipkanje Typescript in prilagodljivost JavaScripta.
Odbijanje za učinkovitost
Še zadnja točka, ki jo je treba upoštevati, je, da se dogodek 'spreminjanje velikosti' nenehno sproža, dokler se okno vleče. To lahko pomeni kritičen udarec za zmogljivost, če je vaša funkcija poslušalca dogodkov težka. Da bi to ublažili, uporabljamo koncept, imenovan "Debouncing". Debouncing v JavaScriptu je praksa, ki se uporablja za omejevanje časa med klici funkcije. Tukaj je primer, kako lahko odpravimo odboj naše funkcije za spreminjanje velikosti.
let debounceTimeout;
window.addEventListener('resize', () => {
clearTimeout(debounceTimeout);
debounceTimeout = setTimeout(() => {
naj širina = window.innerWidth;
if(width <= 768){ // dejanje za izvedbo, ko je velikost okna manjša ali enaka 768px }else{ // dejanje za izvedbo, ko je velikost okna večja od 768px } }, 100); }); [/code] To je približno to. Ko je razlaga končana, bi moralo biti preprosto razumljivo in implementirati funkcije, kot je spreminjanje velikosti oken z JavaScriptom in Typescriptom. Veselo kodiranje!
