Oordrag van ouerelement na module deur sluitings in JavaScript

Laat ons die volgende elemente hê:

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

Laat die volgende module met hierdie elemente werk:

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

Soos jy kan sien, is die aantal parameters wat na die module oorgedra word ietwat groot en veroorsaak dit ongerief. Gewoonlik word in hierdie geval as volg gehandel: die algemene ouer van al die elemente waarmee ons module werk, word na die module oorgedra, en dan word verskeie elemente vanuit hierdie ouer binne die module verkry.

Laat ons 'n algemene ouer vir ons etikette maak:

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

Laat ons nou die modulekode omskep:

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

Sodoende sal dit gebeur dat ons die ouerelement van buite af na die module oordra en dit maklik kan verander. En die kindelemente is 'n interne saak van die module.