Praktiline rakendamine

Oletagem, et meil on kaks numbritega divi:

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

Teeme nii, et esimesele divile klõpsates see ruutu läheks ja teisele divile klõpsates - kuupi.

Korraldame oma koodi kahe moodulina:

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

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

Nüüd saame igas moodulis kasutada suvalisi muutujaid ja funktsioone, kartmata, et need konfliktivad teiste muutujate ja funktsioonidega meie skriptis.

Näiteks mõlemad elemendid hoime muutujas elem - igaüks oma muutujas oma moodulis. Kui siin poleks mooduleid, peaksime sisestama erinevad muutujad meie elementide hoidmiseks. Moodulitega saame rahulikult kasutada meie muutujat, kartmata, et keegi tahab samuti seda muutujat kasutada.