Praktická aplikace

Předpokládejme, že máme dva divy s čísly:

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

Udělejme to tak, aby po kliknutí na první div se jeho hodnota umocnila na druhou, a po kliknutí na druhý div - na třetí.

Uspořádejme náš kód jako dva moduly:

;(function() {
	let elem = document.querySelector('#div1'); // první div
	
	function func(num) {
		return num * num; // umocníme na druhou
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

;(function() {
	let elem = document.querySelector('#div2'); // druhý div
	
	function func(num) {
		return num * num * num; // umocníme na třetí
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

Nyní můžeme v každém z modulů používat libovolné proměnné a funkce, aniž bychom se museli bát, že budou konfliktovat s jinými proměnnými a funkcemi našeho skriptu.

Například oba elementy ukládáme do proměnné elem - každý ve své proměnné svého modulu. Kdyby zde moduly nebyly, museli bychom zavádět různé proměnné pro ukládání našich elementů. S moduly můžeme klidně používat naši proměnnou, aniž bychom se báli, že ji bude chtít někdo jiný také použít.