Kalimi i elementit prind në modul përmes mbylljeve në JavaScript

Le të supozojmë se kemi elementet e mëposhtme:

<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>

Le të supozojmë se me këta elemente punon moduli në vijim:

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

Siç mund ta shihni, numri i parametrave të kaluar në modul është disi i madh dhe krijon vështirësi. Zakonisht në këtë rast veprohet si më poshtë: i kalohet modulit prindin e përbashkët të të gjithë elementëve me të cilët punon moduli ynë, dhe më pas brenda modulit merren nga ky prind elementë të ndryshëm.

Le t'u bëjmë etiketimeve tona një prind të përbashkët:

<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>

Tani le të modifikojmë kodin e modulit:

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

Kështu do të ndodhë që elementin prind e kalojmë në modul nga jashtë dhe lehtësisht mund ta ndryshojmë atë. Ndërsa elementët fëmijë janë çështje e brendshme e modulit.