Kuxazululiwe: ekushintsheni usayizi wewindi

Ukushintsha usayizi wewindi kungase kubonakale kuwumsebenzi ongabalulekile ekuthuthukisweni kwewebhu, kodwa empeleni kuhlanganisa imiqondo embalwa evela ku-JavaScript kanye ne-Typescript, futhi kudlala indima ebalulekile ekuqinisekiseni idizayini ephendulayo nesebenziseka kalula. Kumongo we-UI/UX eguquguqukayo, umsebenzi 'wokushintsha usayizi wewindi' ubalulekile. Izibonelo zansuku zonke zingafaka ibha eseceleni eshwabene lapho iwindi lishintsha usayizi ukuze linikeze indawo yokufunda engenamthungo, noma isithombe segalari esizilungisayo ukuze sigweme ukuhlanekezela. Ukulungiswa kwenziwa ngokusebenza ngokulalela umcimbi wokushintsha usayizi wewindi.

Inkinga ekhona yenza isenzo esincike ekushintsheni usayizi wewindi, lokhu kungaphathwa nge-Typescript kanye nokukhohlisa kwe-DOM ngamafuphi. Sizothuthukisa ukuthayipha kwe-Typescript kanye nokulinganisa ukuze sihlele isisombululo sethu.

window.addEventListener('resize', () => {
vumela ububanzi = iwindi.innerWidth;
uma(ububanzi <= 768){// isenzo esizokwenziwa lapho usayizi wewindi ungaphansi noma ulingana no-768px }okunye{// isenzo okumele senziwa lapho usayizi wewindi ungaphezu kuka-768px }}); [/ikhodi]

Ukuqonda Ikhodi

Ikhodi enikeziwe isebenza ngokucela umsebenzi ongaziwa ngaso sonke isikhathi uma iwindi lishintshwa usayizi. Lo msebenzi ongaziwa usinika ukufinyelela entweni yomcimbi, ephethe ulwazi olubalulekile mayelana nesigameko 'sokushintsha usayizi'. Ngaphakathi komsebenzi, sichaza izimo ezimbili; enye ngeyalapho ububanzi bangaphakathi bewindi bungaphansi noma bulingana namaphikseli angu-768 futhi enye uma ingaphezu kwalokho. Lokhu kuhlukaniswa kuvame ukusetshenziselwa ukuhlukanisa phakathi kwamadivayisi eselula nawedeskithophu.

Ukuvela Kokushintsha Usayizi Wewindi

Ukushintsha Usayizi Wewindi kuwumkhiqizo womhlaba oshintshile womklamo wewebhu ophendulayo. Ngokungafani nezinsuku zangaphambili lapho amawebhusayithi akhelwe osayizi besikrini abajwayelekile, izimfuno zamanje zishintshe kakhulu. Ngohlu olubanzi ngokungenakuphikwa lwamadivayisi anokulungiswa kwesikrini okuhlukahlukene, kubalulekile ukuthi idizayini yethu ivumelane nezinkundla zokubuka ngazinye, inikeze ukwakheka kwamehlo okuthuthukisiwe nokulula.

Imicimbi ye-Javascript kanye ne-Typescript

Ukubuyela kusixazululo sethu, ingxenye ebalulekile lapha ukuqonda indlela yokusebenzisa imicimbi ye-JavaScript nge-Typescript. Umcimbi 'wokushintsha usayizi' ungomunye nje wemicimbi eminingi ehlinzekwa yi-JavaScript ukucacisa izimo nezenzo ezihlukile ekhasini lewebhu. 'chofoza', 'hambisa phezulu', 'i-mousedown' yizibonelo ezimbalwa. Ukuhlanganisa lezi zenzakalo nge-Typescript ivumela onjiniyela bakhe ikhodi ehlanzekile, egcinekayo nenamandla ukuthayipha kwe-Typescript kanye nokuguquguquka kwe-JavaScript.

Ukuphikisa Ukuphumelela

Iphuzu lokugcina okufanele licatshangelwe ukuthi umcimbi 'wokushintsha usayizi' uvutha ngokuqhubekayo, inqobo nje uma iwindi lisadonswa. Lokhu kungasho ukushaya okubalulekile ekusebenzeni uma umsebenzi wakho womlaleli womcimbi unzima. Ukunciphisa lokhu, sisebenzisa umqondo othi 'Debouncing'. Ukukhipha i-JavaScript kuwumkhuba osetshenziselwa ukukhawulela isikhathi phakathi kwezicelo zomsebenzi. Nasi isibonelo sendlela esingahlehlisa ngayo umsebenzi wethu wokushintsha usayizi.

vumela i-debounceTimeout;
window.addEventListener('resize', () => {
clearTimeout(debounceTimeout);
debounceTimeout = setTimeout(() => {
vumela ububanzi = iwindi.innerWidth;
uma(ububanzi <= 768){// isenzo esizokwenziwa lapho usayizi wewindi ungaphansi noma ulingana no-768px }okunye{// isenzo okumele senziwa lapho usayizi wewindi ungaphezu kuka-768px } }, 100); }); [/code] Imayelana nayo. Njengoba incazelo isiqediwe, manje kufanele kube lula ukuyiqonda nokusebenzisa imisebenzi efana nokushintsha usayizi wewindi nge-JavaScript kanye ne-Typescript. Jabulela ukubhala ngekhodi!

Okuthunyelwe okuhlobene:

Shiya amazwana