વેબ ડેવલપમેન્ટમાં વિન્ડોનું કદ બદલવું એ એક નજીવા કાર્ય જેવું લાગે છે, પરંતુ તે વાસ્તવમાં JavaScript અને Typescript માંથી થોડીક વિભાવનાઓને જોડે છે, અને પ્રતિભાવશીલ અને વપરાશકર્તા-મૈત્રીપૂર્ણ ડિઝાઇનને સુનિશ્ચિત કરવામાં નિર્ણાયક ભાગ ભજવે છે. ડાયનેમિક UI/UX ના સંદર્ભમાં, 'વિન્ડો રિસાઈઝ' ફંક્શન સર્વોપરી છે. રોજિંદા ઉદાહરણોમાં એક સાઇડબાર શામેલ હોઈ શકે છે જે એકીકૃત વાંચન સ્થાન આપવા માટે વિન્ડો માપવા પર સંકોચાય છે, અથવા વિકૃતિ અટકાવવા માટે પોતાને સમાયોજિત કરતી ગેલેરી છબી. ફેરફાર વિન્ડો રીસાઈઝ ઈવેન્ટ સાંભળીને પ્રતિક્રિયાત્મક રીતે કરવામાં આવે છે.
હાથ પરનો મુદ્દો વિન્ડો માપ બદલવાની ક્રિયા આકસ્મિક કરી રહ્યો છે, આને ટાઇપસ્ક્રીપ્ટ અને DOM મેનીપ્યુલેશન સાથે ખૂબ જ સંક્ષિપ્ત રીતે સંચાલિત કરી શકાય છે. અમે અમારા સોલ્યુશનને ગોઠવવા માટે Typescript ના ટાઇપચેકિંગ અને માપનીયતાનો લાભ લઈશું.
window.addEventListener('resize', () => {
let width = window.innerWidth;
જો (પહોળાઈ <= 768){ // જ્યારે વિન્ડોનું કદ 768px કરતાં ઓછું હોય અથવા તેની બરાબર હોય ત્યારે કરવા માટેની ક્રિયા }ather{ // જ્યારે વિન્ડોનું કદ 768px કરતાં વધુ હોય ત્યારે કરવા માટેની ક્રિયા } }); [/કોડ]
કોડને સમજવું
પ્રદાન કરેલ કોડ દરેક વખતે જ્યારે વિન્ડોનું કદ બદલાય છે ત્યારે તરત જ એક અનામી ફંક્શનનો ઉપયોગ કરીને કાર્ય કરે છે. આ અનામિક કાર્ય અમને ઇવેન્ટ ઑબ્જેક્ટની ઍક્સેસ આપે છે, જે 'રીસાઈઝ' ઘટના વિશે મૂલ્યવાન માહિતી ધરાવે છે. કાર્યની અંદર, અમે બે શરતો વ્યાખ્યાયિત કરીએ છીએ; એક જ્યારે વિન્ડોની અંદરની પહોળાઈ 768 પિક્સેલ કરતાં ઓછી અથવા તેની બરાબર હોય ત્યારે અને બીજું જ્યારે તે તેનાથી વધુ હોય ત્યારે. આ વિભાજન સામાન્ય રીતે મોબાઇલ અને ડેસ્કટોપ ઉપકરણો વચ્ચે તફાવત કરવા માટે વપરાય છે.
વિન્ડો માપ બદલવાની ઉત્ક્રાંતિ
વિન્ડો રિસાઇઝિંગ એ રિસ્પોન્સિવ વેબ ડિઝાઇનના વિકસિત વિશ્વનું ઉત્પાદન છે. અગાઉના દિવસોથી વિપરીત જ્યારે વેબસાઇટ્સ પ્રમાણભૂત સ્ક્રીન માપો માટે બનાવવામાં આવી હતી, વર્તમાન માંગણીઓ સ્મારક રીતે બદલાઈ ગઈ છે. વૈવિધ્યસભર સ્ક્રીન રીઝોલ્યુશન સાથેના ઉપકરણોની નિર્વિવાદપણે વિશાળ શ્રેણી સાથે, તે મહત્વપૂર્ણ છે કે અમારી ડિઝાઇન વ્યક્તિગત જોવાના પ્લેટફોર્મને અનુકૂલિત થાય, જે આંખોના લેઆઉટ પર ઑપ્ટિમાઇઝ અને સરળ ઓફર કરે છે.
Javascript ઇવેન્ટ્સ અને Typescript
અમારા સોલ્યુશન પર પાછા ફરવું, અહીં આવશ્યક ભાગ એ સમજવું છે કે ટાઈપસ્ક્રિપ્ટ સાથે JavaScript ઇવેન્ટ્સનો ઉપયોગ કેવી રીતે કરવો. વેબપેજ પર વિવિધ સ્થિતિઓ અને ક્રિયાઓ નિર્ધારિત કરવા માટે JavaScript પ્રદાન કરે છે તે ઘણી બધી ઘટનાઓમાંથી 'રિસાઈઝ' ઇવેન્ટ માત્ર એક છે. 'ક્લિક', 'હોવર', 'માઉસડાઉન' થોડા ઉદાહરણો છે. આ ઘટનાઓનું જોડાણ ટાઈપસ્ક્રીપ્ટ સાથે વિકાસકર્તાઓને મજબૂત સાથે ક્લીનર, જાળવી શકાય તેવા કોડ બનાવવા દે છે ટાઇપસ્ક્રિપ્ટનું ટાઇપિંગ અને JavaScript ની લવચીકતા.
કાર્યક્ષમતા માટે ડિબાઉન્સિંગ
ધ્યાનમાં લેવાનો એક અંતિમ મુદ્દો એ છે કે જ્યાં સુધી વિન્ડોને ખેંચવામાં આવી રહી હોય ત્યાં સુધી 'માપ બદલો' ઇવેન્ટ સતત ફાયર થાય છે. જો તમારું ઇવેન્ટ લિસનર ફંક્શન ભારે હોય તો આનો અર્થ પરફોર્મન્સ પર ગંભીર અસર થઈ શકે છે. આને દૂર કરવા માટે, અમે 'ડિબાઉન્સિંગ' નામના કોન્સેપ્ટનો ઉપયોગ કરીએ છીએ. JavaScript માં ડીબાઉન્સિંગ એ એક પ્રેક્ટિસ છે જેનો ઉપયોગ ફંક્શનના ઇન્વોકેશન વચ્ચેના સમયને મર્યાદિત કરવા માટે થાય છે. અહીં એક ઉદાહરણ છે કે આપણે કેવી રીતે અમારા રીસાઈઝ ફંક્શનને ડિબાઉન્સ કરી શકીએ છીએ.
debounceTimeout દો;
window.addEventListener('resize', () => {
clearTimeout(debounceTimeout);
debounceTimeout = setTimeout(() => {
let width = window.innerWidth;
જો (પહોળાઈ <= 768){ // જ્યારે વિન્ડોનું કદ 768px કરતાં ઓછું હોય અથવા તેની બરાબર હોય ત્યારે કરવા માટેની ક્રિયા }ather{ // જ્યારે વિન્ડોનું કદ 768px કરતાં વધુ હોય ત્યારે કરવા માટેની ક્રિયા } }, 100); }); [/code] તે તેના વિશે છે. સમજૂતી પૂર્ણ થવાથી, તે હવે JavaScript અને Typescript સાથે વિન્ડો રિસાઇઝિંગ જેવી કાર્યક્ષમતાઓને સમજવા અને અમલમાં મૂકવું સરળ હોવું જોઈએ. હેપી કોડિંગ!
