Μεταβίβαση γονικού στοιχείου σε module μέσω κλειστών περιβάλλονων (closures) σε JavaScript

Ας υποθέσουμε ότι έχουμε τα ακόλουθα στοιχεία:

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

Ας υποθέσουμε ότι με αυτά τα στοιχεία λειτουργεί το ακόλουθο module:

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

Όπως βλέπετε, ο αριθμός των παραμέτρων που μεταβιβάζονται στο module είναι κάπως μεγάλος και δημιουργεί inconveniences. Συνήθως σε αυτή την περίπτωση ακολουθούν την ακόλουθη μέθοδο: μεταβιβάζουν στο module έναν κοινό γονέα όλων των στοιχείων με τα οποία αλληλεπιδρά το module μας, και έπειτα μέσα στο module ανακτούν από αυτόν τον γονέα τα διάφορα στοιχεία.

Ας δώσουμε στα tags μας έναν κοινό γονέα:

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

Ας τροποποιήσουμε τώρα τον κώδικα του module:

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

Έτσι, θα προκύψει ότι το γονικό στοιχείο το μεταβιβάζουμε στο module από έξω και μπορούμε εύκολα να το αλλάξουμε. Ενώ τα θυγατρικά στοιχεία αποτελούν εσωτερική υπόθεση του module.