Aplicare Practică

Să presupunem că avem două div-uri cu numere:

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

Să facem astfel încât la click pe primul div, valoarea sa să fie ridicată la pătrat, iar la click pe al doilea div - la cub.

Vom organiza codul nostru sub forma a două module:

;(function() {
	let elem = document.querySelector('#div1'); // primul div
	
	function func(num) {
		return num * num; // ridicăm la pătrat
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

;(function() {
	let elem = document.querySelector('#div2'); // al doilea div
	
	function func(num) {
		return num * num * num; // ridicăm la cub
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

Acum în fiecare dintre module putem folosi orice variabile și funcții, fără teama că acestea vor intra în conflict cu alte variabile și funcții din scriptul nostru.

De exemplu, ambele elemente le stocăm în variabila elem - fiecare în variabila sa din modulul său. Dacă nu ar exista module aici, ar trebui să introducem variabile diferite pentru a stoca elementele noastre. Iar cu modulele putem folosi în siguranță variabila noastră, fără teama că cineva va dori să folosească și el această variabilă.