Penghantaran Elemen Induk kepada Modul melalui Penutupan dalam JavaScript

Katakan kita mempunyai elemen-elemen berikut:

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

Katakan modul berikut berfungsi dengan elemen-elemen ini:

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

Seperti yang anda lihat, bilangan parameter yang dihantar kepada modul agak banyak dan menyebabkan ketidakselesaan. Biasanya dalam kes ini, tindakan berikut diambil: hantar induk umum semua elemen yang berfungsi dengan modul kami kepada modul, dan kemudian di dalam modul, dapatkan pelbagai elemen dari induk ini.

Mari kita buat induk umum untuk tag kami:

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

Sekarang mari kita ubah suai kod modul:

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

Oleh itu, hasilnya ialah elemen induk kita hantar kepada modul dari luar dan boleh dengan mudah menukarnya. Manakala elemen anak adalah urusan dalaman modul.