Übergabe des übergeordneten Elements an ein Modul über Closures in JavaScript

Nehmen wir an, wir haben die folgenden 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>

Nehmen wir an, mit diesen Elementen arbeitet das folgende 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');

Wie Sie sehen, ist die Anzahl der an das Modul übergebenen Parameter etwas zu groß und erschwert die Handhabung. In diesem Fall geht man normalerweise wie folgt vor: Man übergibt an das Modul einen gemeinsamen übergeordneten Element aller Elemente, mit denen unser Modul arbeitet, und erhält dann innerhalb des Moduls aus diesem übergeordneten Element verschiedene Elemente.

Lassen Sie uns unseren Tags ein gemeinsames übergeordnetes Element geben:

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

Passen wir nun den Modulcode an:

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

Auf diese Weise wird das übergeordnete Element von außen an das Modul übergeben und kann leicht geändert werden. Während die untergeordneten Elemente eine interne Angelegenheit des Moduls sind.