Kupeleka Kipengele Kizazi Kikuu kwenye Moduli Kupitia Kufunga kwa JavaScript

Wacha tuwe na vipengele vifuatavyo:

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

Wacha moduli ifuatayo ifanye kazi na vipengele hivi:

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

Kama unavyoona, idadi ya vigezo vinavyopitishwa kwenye moduli ni kubwa kidogo na huleta usumbufu. Kawaida katika hali hii hufanyika kama ifuatavyo: hupitisha kwenye moduli kizazi kikuu cha kawaida cha vipengele vyote, na kisha ndani ya moduli hupata kutoka kwa kizazi hiki kikuu vipengele mbalimbali.

Wacha tuwape vitags vyetu kizazi kikuu cha kawaida:

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

Wacha sasa tubadilishe msimbo wa moduli:

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

Kwa hivyo itatokea kwamba kipengele kizazi kikuu tunakipeleka kwenye moduli kutoka nje na kwa urahisi tunaweza kuibadilisha. Na vipengele vya watoto ni jambo la ndani la moduli.