Praktinis pritaikymas

Tarkime, kad turime du div elementus su skaičiais:

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

Padarykime taip, kad paspaudus pirmąjį div jo reikšmė būtų pakelta kvadratu, o paspaudus antrajį div - kubu.

Organizuosime savo kodą kaip du modulius:

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

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

Dabar kiekviename modulyje galime naudoti bet kokius kintamuosius ir funkcijas, nebijodami, kad jie konfliktuos su kitais kintamaisiais ir mūsų scenarijaus funkcijomis.

Pavyzdžiui, abu elementus saugome kintamajame elem - kiekvienas savo modulio kintamajame. Jei modulių čia nebūtų, tektų įvesti skirtingus kintamuosius mūsų elementams saugoti. O su moduliais galime ramiai naudoti savo kintamuosius, nebijodami, kad kažkas norės taip pat naudoti šį kintamąjį.