Praktična uporaba

Naj imamo podana dva div elementa s številkami:

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

Naredimo tako, da se ob kliku na prvi div njegova vrednost kvadrira, ob kliku na drugi div pa povzdigne na kub.

Organizirajmo našo kodo v obliki dveh modulov:

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

;(function() {
	let elem = document.querySelector('#div2'); // drugi div
	
	function func(num) {
		return num * num * num; // povzdignimo na kub
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

Zdaj lahko v vsakem od modulov uporabljamo poljubne spremenljivke in funkcije, ne da bi se bali, da bodo v konfliktu z drugimi spremenljivkami in funkcijami našega skripta.

Na primer, oba elementa hranimo v spremenljivki elem - vsak v svoji spremenljivki svojega modula. Če modulov ne bi bilo, bi morali uvesti različne spremenljivke za shranjevanje naših elementov. Z moduli pa lahko mirno uporabljamo našo spremenljivko, ne da bi se bali, da jo bo kdo drug želel prav tako uporabiti.