Zbatimi Praktik

Le të themi se kemi dy div me numra:

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

Le t'i bëjmë të tillë që me klikim në div-in e parë vlera e tij të ngrihet në katror, kurse me klikim në div-in e dytë - në kub.

Le ta organizojmë kodin tonë në formë të dy moduleve:

;(function() {
	let elem = document.querySelector('#div1'); // div-i i parë
	
	function func(num) {
		return num * num; // ngremë në katror
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

;(function() {
	let elem = document.querySelector('#div2'); // div-i i dytë
	
	function func(num) {
		return num * num * num; // ngremë në kub
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

Tani në secilin prej moduleve ne mund të përdorim çdo variabël dhe funksion, pa u frikësuar se ato do të konfliktojnë me variabla dhe funksione të tjera të skriptit tonë.

Për shembull, të dy elementët i ruajmë në variablin elem - secili në variablin e vet të modulit të vet. Po të mos kishte module këtu, do të duhej të vendosnim variabla të ndryshme për të ruajtur elementët tanë. Kurse me module ne mund të përdorim me qetësi variablin tonë, pa u frikësuar se dikush tjetër do të dëshirojë të përdorë gjithashtu këtë variabël.