Praktisk Anvendelse

Lad os sige, at vi har to div'er med tal:

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

Lad os gøre sådan, at ved klik på den første div bliver dens værdi kvadreret, og ved klik på den anden div - i kubik.

Lad os organisere vores kode som to moduler:

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

;(function() {
	let elem = document.querySelector('#div2'); // anden div
	
	function func(num) {
		return num * num * num; // opløft i kubik
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

Nu kan vi i hvert af modulerne bruge ethvert variabler og funktioner, uden at være bange for, at de vil komme i konflikt med andre variable og funktioner i vores script.

For eksempel gemmer vi begge elementer i variablen elem - hver i deres egen variabel i deres modul. Hvis der ikke var moduler her, ville vi være nødt til at indføre forskellige variable for at gemme vores elementer. Men med moduler kan vi roligt bruge vores variabel, uden at være bange for, at nogen også vil bruge denne variabel.