जावास्क्रिप्ट में चेनिंग के फायदे और नुकसान

इस तथ्य के बावजूद कि चेनिंग कोड को छोटा करती है, ज्यादातर मामलों में एक वेरिएबल का परिचय देना वास्तव में अधिक सुविधाजनक होता है। दो उदाहरणों की तुलना करें - अभी मैंने एक वेरिएबल elem पेश किया है और मैं किसी भी संख्या में एट्रिब्यूट्स सेट कर सकता हूं, इसके दौरान querySelector केवल एक बार कॉल किया जाता है:

javascriptlet elem = document.querySelector('#elem');
elem.value = 'www';
elem.type  = 'submit';

और अभी मैं कोई नया वेरिएबल नहीं पेश कर रहा हूं और इसलिए मुझे querySelector को दो बार कॉल करना पड़ रहा है:

javascriptdocument.querySelector('#elem').value = 'www';
document.querySelector('#elem').type  = 'submit';

मेरी राय में, यह कोड अधिक जटिल हो गया है, हालांकि यह एक लाइन कम लेता है। इसके अलावा, अगर मैं id का मान 'elem' से कुछ और बदलना चाहूं, तो मुझे यह कई जगहों पर करना होगा, जो बहुत सुविधाजनक नहीं है।

एक और समस्या भी है - ब्राउज़र पर लोड। पेज पर एलिमेंट्स को ढूंढना, जो querySelector मेथड करती है, एक काफी धीमा ऑपरेशन है (और आम तौर पर पेज के एलिमेंट्स के साथ कोई भी काम - एक धीमा ऑपरेशन है - यह याद रखें)।

हमारे मामले में, अगर हम हर बार querySelector का उपयोग करते हैं, तो ब्राउज़र हर बार HTML पेज को प्रोसेस करेगा और दिए गए id वाले एलिमेंट को कई बार ढूंढेगा (इससे कोई फर्क नहीं पड़ता कि id समान हैं - ब्राउज़र सभी एक्शन कई बार दोहराएगा), बेकार के ऑपरेशन करते हुए, जो ब्राउज़र के काम को धीमा कर सकते हैं।

अगर हम elem वेरिएबल का उपयोग करते हैं - पेज पर कोई खोज नहीं होती है (एलिमेंट पहले ही मिल चुका है और उसका रेफरेन्स वेरिएबल में स्टोर है)।

html<img id="image" src="avatar.png" width="300" height="500">

javascriptconsole.log(document.querySelector('#image').src);
console.log(document.querySelector('#image').width);
console.log(document.querySelector('#image').height);