জাভাস্ক্রিপ্টে ক্লোজারের মাধ্যমে একটি মডিউলে প্যারেন্ট এলিমেন্ট পাস করা

ধরুন আমাদের নিম্নলিখিত এলিমেন্টগুলি আছে:

<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="res"></div>

<button id="btn">click me</button>

ধরুন এই এলিমেন্টগুলির সাথে নিম্নলিখিত মডিউলটি কাজ করে:

;(function(selector1, selector2, selector3, selector4, selector5) {
	let div1 = document.querySelector(selector1);
	let div2 = document.querySelector(selector2);
	let div3 = document.querySelector(selector3);
	let res  = document.querySelector(selector4);
	let btn  = document.querySelector(selector5);
	
	btn.addEventListener('click', function() {
		let num1 = Number(div1.textContent);
		let num2 = Number(div2.textContent);
		let num3 = Number(div3.textContent);
		
		res.textContent = num1 + num2 + num3;
	});
})('#div1', '#div2', '#div3', '#res', '#btn');

আপনি দেখতে পাচ্ছেন, মডিউলে পাস করা প্যারামিটারের সংখ্যা কিছুটা বেশি এবং অসুবিধা সৃষ্টি করে। সাধারণত এই ক্ষেত্রে নিম্নলিখিতভাবে এগনো হয়: মডিউলে সমস্ত এলিমেন্টের একটি কমন প্যারেন্ট পাস করা হয়, যেসব এলিমেন্ট আমাদের মডিউল নিয়ে কাজ করে, এবং তারপর মডিউলের ভিতরে এই প্যারেন্ট থেকে বিভিন্ন এলিমেন্ট পাওয়া যায়।

আসুন আমাদের ট্যাগগুলির একটি কমন প্যারেন্ট তৈরি করি:

<div id="parent">
	<div id="div1">1</div>
	<div id="div2">2</div>
	<div id="div3">3</div>
	<div id="res"></div>
	
	<button id="btn">click me</button>
</div>

এখন মডিউলের কোডটি পুনরায় লিখি:

;(function(root) {
	let parent = document.querySelector(root);
	
	let div1 = parent.querySelector('#div1');
	let div2 = parent.querySelector('#div2');
	let div3 = parent.querySelector('#div3');
	
	let res  = parent.querySelector('#res');
	let btn  = parent.querySelector('#btn');
	
	btn.addEventListener('click', function() {
		let num1 = Number(div1.textContent);
		let num2 = Number(div2.textContent);
		let num3 = Number(div3.textContent);
		
		res.textContent = num1 + num2 + num3;
	});
})('#parent');

এইভাবে, এটি দেখা যাচ্ছে যে প্যারেন্ট এলিমেন্টটি আমরা বাইরে থেকে মডিউলে পাস করি এবং সহজেই এটি পরিবর্তন করতে পারি। এবং চাইল্ড এলিমেন্টগুলি মডিউলের অভ্যন্তরীণ বিষয় হয়ে যায়।