जावास्क्रिप्ट में क्लोजर के माध्यम से मॉड्यूल में पैरेंट एलिमेंट पास करना

मान लीजिए कि हमारे पास निम्नलिखित एलिमेंट हैं:

<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');

इस प्रकार यह होगा कि पैरेंट एलिमेंट हम मॉड्यूल में बाहर से पास करते हैं और आसानी से इसे बदल सकते हैं। और चाइल्ड एलिमेंट मॉड्यूल का आंतरिक मामला बन जाते हैं।