Μεταβίβαση παραμέτρων σε module μέσω closures σε JavaScript

Μια καλή πρακτική είναι να μην κωδικοποιούμε ορισμένες τιμές απευθείας στο module, αλλά να τις μεταβιβάζουμε ως παράμετρο του ίδιου του module (δηλαδή ως παράμετρο της αμέσως επικαλούμενης συνάρτησης):

;(function(arg1, arg2) { // οι παράμετροι εισάγονται στις μεταβλητές
	
})(1, 2); // μεταβιβάζουμε κάποιες παραμέτρους

Ας δούμε ένα παράδειγμα. Ας υποθέσουμε ότι έχουμε ένα div με έναν αριθμό και ένα κουμπί:

<div id="div">3</div>
<button id="btn">click me</button>

Ας υποθέσουμε επίσης ότι έχουμε ένα module:

;(function() {
	let div = document.querySelector('#div');
	let btn = document.querySelector('#btn');
	
	function func(num) {
		return num * num;
	}
	
	btn.addEventListener('click', function() {
		div.textContent = func(div.textContent);
	});
})();

Όπως βλέπετε, οι επιλογείς των στοιχείων μας είναι σκληρά κωδικοποιημένοι στον κώδικα του module. Μια καλύτερη λύση θα ήταν να τους μεταβιβάσουμε ως παραμέτρους του module - έτσι στο μέλλον θα μπορούμε εύκολα να τους αλλάξουμε. Ας διορθώσουμε το module μας:

;(function(selector1, selector2) {
	let div = document.querySelector(selector1);
	let btn = document.querySelector(selector2);
	
	function func(num) {
		return num * num;
	}
	
	btn.addEventListener('click', function() {
		div.textContent = func(div.textContent);
	});
})('#div', '#btn');

Δίνεται ένα κουμπί και τρία πεδία εισαγωγής, στα οποία εισάγονται αριθμοί. Με το πάτημα του κουμπιού, εμφανίστε στην κονσόλα το άθροισμα των εισαγόμενων αριθμών. Υλοποιήστε την άσκηση με τη χρήση module.