Практикалык колдонушу

Анда бизде эки див сандар менен берилсин:

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

Келгиле, биринчи дивге чыкылдаганда анын мааниси квадратка көтөрүлсүн, ал эми экинчи дивге чыкылдаганда - кубга көтөрүлсүн кылалы.

Биздин кодду эки модул түрүндә уюштуралы:

;(function() {
	let elem = document.querySelector('#div1'); // биринчи див
	
	function func(num) {
		return num * num; // квадратка көтөрөбүз
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

;(function() {
	let elem = document.querySelector('#div2'); // экинчи див
	
	function func(num) {
		return num * num * num; // кубга көтөрөбүз
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

Эми ар бир модулдо биз каалаган өзгөрмөлөрдү жана функцияларды колдонсо болот, алардын биздин скрипттин башка өзгөрмөлөрү жана функциялары менен дал келишип калуусунан коркпой.

Мисал үчүн, эки элементти тең elem өзгөрмөсүндө сактайбыз - ар бири өз модулунун өзгөрмөсүндө. Эгерде модулдар бул жерде болбогондо, биздин элементтерди сактоо үчүн ар түрдүү өзгөрмөлөрдү киргизиш керек болмок. Ал эми модулдар менен биз бул өзгөрмөнү тынч колдоно алабыз, кимдир бирөө бул өзгөрмөнү ошондой эле колдонууну каалашы мүмкүн деген коркунучсуз.