Transmiterea elementului părinte într-un modul prin închideri în JavaScript

Să presupunem că avem următoarele elemente:

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

Să presupunem că cu aceste elemente lucrează următorul modul:

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

După cum vedeți, numărul de parametri transmiși în modul este oarecum prea mare și creează inconveniențe. De obicei, în acest caz, se procedează astfel: se transmite în modul părintele comun al tuturor elementelor cu care lucrează modulul nostru, iar apoi în interiorul modulului se extrag din acest părinte diverse elemente.

Să dăm elementelor noastre un părinte comun:

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

Să refacem acum codul modulului:

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

Astfel, se va obține că elementul părinte îl transmitem în modul din exterior și îl putem schimba cu ușurință. Iar elementele descendente sunt o problemă internă a modulului.