Praktisk tillämpning

Låt oss säga att vi har två divar med siffror:

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

Låt oss göra så att när man klickar på den första diven kvadreras dess värde, och när man klickar på den andra diven - kubik.

Låt oss organisera vår kod som två moduler:

;(function() {
	let elem = document.querySelector('#div1'); // första diven
	
	function func(num) {
		return num * num; // kvadrera
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

;(function() {
	let elem = document.querySelector('#div2'); // andra diven
	
	function func(num) {
		return num * num * num; // kubik
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

Nu kan vi i varje modul använda vilka variabler och funktioner som helst, utan att vara rädda för att de kommer att konfliktera med andra variabler och funktioner i vårt skript.

Till exempel lagrar vi båda elementen i variabeln elem - var och en i sin egen variabel i sin modul. Om det inte fanns moduler här skulle vi vara tvungna att införa olika variabler för att lagra våra element. Men med moduler kan vi lugnt använda vår variabel, utan att vara rädda för att någon annan också skulle vilja använda denna variabel.