Akna suuruse muutmine võib tunduda veebiarenduses tähtsusetu ülesandena, kuid tegelikult seob see üsna palju JavaScripti ja Typescripti kontseptsioone ning mängib üliolulist rolli tundliku ja kasutajasõbraliku disaini tagamisel. Dünaamilise kasutajaliidese/UX-i kontekstis on akna suuruse muutmise funktsioon ülimalt oluline. Igapäevased näited võivad hõlmata külgriba, mis kahaneb akna suuruse muutmisel, et luua sujuv lugemisruum, või galerii pilt, mis reguleerib ennast moonutuste vältimiseks. Muutmine toimub reaktiivselt, kuulates akna suuruse muutmise sündmust.
Käsitletav probleem on akna suuruse muutmisest sõltuva toimingu sooritamine, mida saab Typescripti ja DOM-i manipuleerimisega väga lühidalt hallata. Oma lahenduse korraldamiseks kasutame Typescripti tüübikontrolli ja skaleeritavust.
window.addEventListener('resize', () => {
las laius = window.innerWidth;
if(width <= 768){ // toiming, mida tehakse, kui akna suurus on väiksem või võrdne 768 piksliga }else{ // toiming, mida tehakse, kui akna suurus on suurem kui 768 pikslit } }); [/kood]
Koodeksi mõistmine
Pakutav kood töötab iga kord, kui akna suurust muudetakse, viivitamatult anonüümset funktsiooni. See anonüümne funktsioon annab meile juurdepääsu sündmuse objektile, mis kannab väärtuslikku teavet suuruse muutmise juhtumi kohta. Funktsiooni sees määratleme kaks tingimust; üks, kui akna siselaius on väiksem või võrdne 768 piksliga ja teine, kui see on suurem. Seda jaotust kasutatakse tavaliselt mobiilseadmete ja lauaarvutite eristamiseks.
Akende suuruse muutmise areng
Akende suuruse muutmine on tundliku veebidisaini arenenud maailma toode. Erinevalt varasematest aegadest, mil veebisaidid loodi standardsete ekraanisuuruste jaoks, on praegused nõudmised tohutult muutunud. Vaieldamatult laias valikus erineva ekraani eraldusvõimega seadmeid on ülioluline, et meie disain kohandub üksikute vaatamisplatvormidega, pakkudes optimeeritud ja silmale lihtsat paigutust.
Javascripti sündmused ja masinakiri
Meie lahenduse juurde tagasi tulles on siin oluline osa JavaScripti sündmuste kasutamisest Typescriptiga. Suuruse muutmise sündmus on vaid üks paljudest sündmustest, mida JavaScript pakub veebilehe erinevate olekute ja toimingute määramiseks. 'kliki', 'hover', 'mousedown' on mõned näited. Nende sündmuste ühendamine koos masinakirjaga võimaldab arendajatel luua tugevama abil puhtamat ja hooldatavat koodi Typescripti tippimine ja JavaScripti paindlikkus.
Tõhususe suurendamine
Üks viimane punkt, mida tuleb arvesse võtta, on see, et suuruse muutmise sündmus käivitub pidevalt nii kaua, kuni akent lohistatakse. See võib tähendada esituse kriitilist lööki, kui teie sündmuste kuulaja funktsioon on raske. Selle leevendamiseks kasutame kontseptsiooni nimega 'Debouncing'. JavaScriptis tagasipöördumine on tava, mida kasutatakse funktsiooni kutsumiste vahelise aja piiramiseks. Siin on näide selle kohta, kuidas saaksime oma suuruse muutmise funktsiooni tagasi lükata.
lase debounceTimeout;
window.addEventListener('resize', () => {
clearTimeout(debounceTimeout);
debounceTimeout = setTimeout(() => {
las laius = window.innerWidth;
if(width <= 768){ // toiming, mida tehakse, kui akna suurus on väiksem või võrdne 768 piksliga }else{ // toiming, mida tehakse, kui akna suurus on suurem kui 768 pikslit } }, 100); }); [/code] Umbes nii. Kui selgitus on valmis, peaks nüüd olema lihtne mõista ja rakendada funktsioone, nagu akna suuruse muutmine JavaScripti ja Typescripti abil. Head kodeerimist!
