Практычнае ўжыванне

Няхай у нас дадзены два дывы з лікамі:

<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 - кожны ў сваёй зменнай свайго модуля. Калі б модуляў тут не было, прыйшлося б уводзіць розныя зменныя для захоўвання нашых элементаў. А з модулямі мы можам спакойна выкарыстоўваць нашу зменную, не баючыся таго, што хто-небудзь захоча таксама выкарыстаць гэтую зменную.