Applicazione Pratica

Supponiamo di avere due div con numeri:

<div id="div1">10</div>
<div id="div2">10</div>

Facciamo in modo che al click sul primo div il suo valore venga elevato al quadrato, e al click sul secondo div - al cubo.

Organizziamo il nostro codice sotto forma di due moduli:

;(function() {
	let elem = document.querySelector('#div1'); // primo div
	
	function func(num) {
		return num * num; // eleviamo al quadrato
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

;(function() {
	let elem = document.querySelector('#div2'); // secondo div
	
	function func(num) {
		return num * num * num; // eleviamo al cubo
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

Ora in ciascuno dei moduli possiamo utilizzare qualsiasi variabile e funzione, senza temere che entrino in conflitto con altre variabili e funzioni del nostro script.

Ad esempio, entrambi gli elementi li memorizziamo nella variabile elem - ciascuno nella propria variabile del proprio modulo. Se qui non ci fossero moduli, sarebbe stato necessario introdurre variabili diverse per memorizzare i nostri elementi. Mentre con i moduli possiamo tranquillamente utilizzare la nostra variabile, senza temere che qualcun altro voglia utilizzare questa stessa variabile.