Практическо приложение

Нека имаме два дива с числа:

<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 - всеки в своята променлива на своя модул. Ако тук нямаше модули, щеше да се наложи да въвеждаме различни променливи за съхраняване на нашите елементи. А с модули можем спокойно да използваме нашата променлива, без да се страхуваме, че някой друг ще иска също да използва тази променлива.