Практикалық қолданысы

Бізде сандары бар екі див берілсін:

<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 айнымалысында сақтаймыз - әрқайсысы өз модулінің өз айнымалысында. Егер мұнда модульдер болмағанда, біздің элементтерді сақтау үшін әртүрлі айнымалылар енгізуге тура келер еді. Ал модульдермен біз біздің айнымалыны біреу бұл айнымалыны да пайдаланғысы келеді деп қорықпай, тыныш пайдалана аламыз.