Ikkunan koon muuttaminen saattaa tuntua merkityksettömältä tehtävältä verkkokehityksessä, mutta itse asiassa se yhdistää useita käsitteitä JavaScriptistä ja Typescriptistä, ja sillä on ratkaiseva rooli reagoivan ja käyttäjäystävällisen suunnittelun varmistamisessa. Dynaamisen käyttöliittymän/UX:n yhteydessä "ikkunan koon muuttaminen" on ensiarvoisen tärkeä. Päivittäisiä esimerkkejä voivat olla sivupalkki, joka kutistuu ikkunan kokoa muuttaessa, jolloin saadaan saumaton lukutila, tai galleriakuva, joka säätyy vääristymisen estämiseksi. Muokkaus tehdään reaktiivisesti kuuntelemalla ikkunan koon muutostapahtumaa.
Käsillä oleva ongelma on ikkunan koon muuttamiseen liittyvän toiminnon suorittaminen, joka voidaan hallita Typescript- ja DOM-manipulaatiolla erittäin ytimekkäästi. Hyödynnämme Typescriptin tyypintarkistusta ja skaalautuvuutta ratkaisumme järjestämisessä.
window.addEventListener('resize', () => {
anna leveys = window.innerWidth;
if(width <= 768){ // toiminto, joka suoritetaan, kun ikkunan koko on pienempi tai yhtä suuri kuin 768 kuvapistettä }else{ // toiminto, joka suoritetaan, kun ikkunan koko on yli 768 kuvapistettä } }); [/koodi]
Koodin ymmärtäminen
Tarjottu koodi toimii kutsumalla välittömästi nimettömän toiminnon aina, kun ikkunan kokoa muutetaan. Tämä anonyymi toiminto antaa meille pääsyn tapahtumaobjektiin, joka sisältää arvokasta tietoa "muuta kokoa" tapahtuvasta tapahtumasta. Määritämme funktion sisällä kaksi ehtoa; yksi, kun ikkunan sisäleveys on pienempi tai yhtä suuri kuin 768 pikseliä ja toinen, kun se on suurempi. Tätä jakoa käytetään yleensä erottamaan mobiililaitteet ja pöytäkoneet.
Ikkunoiden koon muuttamisen kehitys
Window Resizing on responsiivisen web-suunnittelun kehittyneen maailman tuote. Toisin kuin aikaisempina päivinä, jolloin verkkosivustot rakennettiin vakiokokoisille näyttökokoille, nykyiset vaatimukset ovat muuttuneet valtavasti. Kiistatta laajan valikoiman laitteita, joissa on vaihteleva näyttöresoluutio, on tärkeää, että suunnittelumme mukautuu yksittäisiin katselualustoihin ja tarjoaa optimoidun ja silmiä säästävän asettelun.
Javascript-tapahtumat ja konekirjoitus
Palatakseni ratkaisuumme, olennainen osa tässä on ymmärtää, kuinka JavaScript-tapahtumia käytetään Typescriptin kanssa. "Resize"-tapahtuma on vain yksi monista tapahtumista, jotka JavaScript tarjoaa verkkosivun eri tilojen ja toimien määrittämiseksi. "click", "hover", "mousedown" ovat muutamia esimerkkejä. Näiden tapahtumien yhdistäminen Typescriptin kanssa avulla kehittäjät voivat luoda puhtaampaa, ylläpidettävää koodia vahvoilla Typescriptin kirjoittaminen ja JavaScriptin joustavuus.
Palauttaminen tehokkuuden vuoksi
Viimeinen huomioitava seikka on se, että "muuta kokoa" -tapahtuma käynnistyy jatkuvasti niin kauan kuin ikkunaa vedetään. Tämä voi tarkoittaa kriittistä osumaa esitykseen, jos tapahtumakuuntelutoimintosi on raskas. Tämän lievittämiseksi käytämme "Debouncing"-nimistä käsitettä. JavaScriptin palautus on käytäntö, jota käytetään rajoittamaan funktion kutsujen välistä aikaa. Tässä on esimerkki siitä, kuinka voimme kumota koonmuutosfunktiomme.
anna debounceTimeout;
window.addEventListener('resize', () => {
clearTimeout(debounceTimeout);
debounceTimeout = setTimeout(() => {
anna leveys = window.innerWidth;
if(width <= 768){ // toiminto, joka suoritetaan, kun ikkunan koko on pienempi tai yhtä suuri kuin 768 kuvapistettä }else{ // toiminto, joka suoritetaan, kun ikkunan koko on yli 768 kuvapistettä } }, 100); }); [/code] Siinä se. Kun selitys on valmis, sen pitäisi nyt olla helppo ymmärtää ja toteuttaa toimintoja, kuten ikkunoiden koon muuttaminen JavaScriptillä ja Typescriptillä. Hyvää koodausta!
