Praktiskais pielietojums

Pieņemsim, ka mums ir doti divi divi ar skaitļiem:

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

Izveidosim tā, lai, uzklikšķinot uz pirmā div, tā vērtība tiktu pacelta kvadrātā, bet, uzklikšķinot uz otrā div - kubā.

Organizēsim mūsu kodu divu moduļu veidā:

;(function() {
	let elem = document.querySelector('#div1'); // pirmais div
	
	function func(num) {
		return num * num; // pacelsim kvadrātā
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

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

Tagad katrā no moduļiem mēs varam izmantot jebkurus mainīgos un funkcijas, nebaidoties no tā, ka tie konfliktēs ar citiem mūsu skripta mainīgajiem un funkcijām.

Piemēram, abus elementus mēs glabājam mainīgajā elem - katrs savā mainīgajā savā modulī. Ja šeit nebūtu moduļu, būtu jāievieš dažādi mainīgie, lai saglabātu mūsu elementus. Bet ar moduļiem mēs varam droši izmantot mūsu mainīgo, nebaidoties, ka kāds cits arī gribēs izmantot šo mainīgo.