जावास्क्रिप्ट में चेनिंग के फायदे और नुकसान
इस तथ्य के बावजूद कि चेनिंग कोड को छोटा करती है,
ज्यादातर मामलों में एक वेरिएबल का परिचय देना
वास्तव में अधिक सुविधाजनक होता है। दो उदाहरणों की तुलना करें -
अभी मैंने एक वेरिएबल elem पेश किया है और मैं
किसी भी संख्या में एट्रिब्यूट्स सेट कर सकता हूं, इसके दौरान
querySelector केवल एक बार
कॉल किया जाता है:
let elem = document.querySelector('#elem');
elem.value = 'www';
elem.type = 'submit';
और अभी मैं कोई नया वेरिएबल नहीं पेश कर रहा हूं और इसलिए
मुझे querySelector को
दो बार कॉल करना पड़ रहा है:
document.querySelector('#elem').value = 'www';
document.querySelector('#elem').type = 'submit';
मेरी राय में, यह कोड अधिक जटिल हो गया है, हालांकि
यह एक लाइन कम लेता है। इसके अलावा,
अगर मैं id का मान
'elem' से कुछ और बदलना चाहूं, तो मुझे
यह कई जगहों पर करना होगा, जो बहुत सुविधाजनक नहीं है।
एक और समस्या भी है - ब्राउज़र पर लोड।
पेज पर एलिमेंट्स को ढूंढना, जो
querySelector मेथड करती है, एक काफी
धीमा ऑपरेशन है (और आम तौर पर पेज के एलिमेंट्स के साथ कोई भी काम
- एक धीमा ऑपरेशन है
- यह याद रखें)।
हमारे मामले में, अगर हम हर बार
querySelector का उपयोग करते हैं, तो ब्राउज़र हर बार
HTML पेज को प्रोसेस करेगा और
दिए गए id वाले एलिमेंट को कई बार
ढूंढेगा (इससे कोई फर्क नहीं पड़ता कि id समान हैं - ब्राउज़र
सभी एक्शन कई बार दोहराएगा), बेकार के ऑपरेशन करते हुए,
जो ब्राउज़र के काम को धीमा कर सकते हैं।
अगर हम elem वेरिएबल का उपयोग करते हैं
- पेज पर कोई खोज नहीं होती है
(एलिमेंट पहले ही मिल चुका है और उसका रेफरेन्स
वेरिएबल में स्टोर है)।
निम्नलिखित कोड दिया गया है:
<img id="image" src="avatar.png" width="300" height="500">
console.log(document.querySelector('#image').src);
console.log(document.querySelector('#image').width);
console.log(document.querySelector('#image').height);
इस कोड की कमियों को इंगित करें। उन्हें सही करें।
