জাভাস্ক্রিপ্টে চেইনিং-এর সুবিধা এবং অসুবিধা
যদিও চেইনিং কোড সংক্ষিপ্ত করে,
অধিকাংশ ক্ষেত্রেই একটি ভেরিয়েবল প্রবর্তন করাই
আরও সুবিধাজনক। দুটি উদাহরণের তুলনা করুন -
এখন আমি একটি ভেরিয়েবল 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);
এই কোডের ত্রুটিগুলি নির্দেশ করুন। সেগুলি সংশোধন করুন।
