Амалий қўллаш

Иккита сонли див берилган бўлсин:

<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);
	});
})();

Энди ҳар бир модулда биз турли ўзгарuvчилар ва функциялардан фойдаланишимиз мумкин, уларнинг скриптнинг бошқа ўзгарuvчилари ва функциялари билан зидлашишидан қўрқмасдан.

Мисол учун, икки элементни ҳам elem ўзгарuvчисида сақлаймиз - ҳар бири ўз модулининг ўзгарuvчисида. Агар модуллар бўлмаганида, элементларимизни сақлаш учун турли ўзгарuvчиларни киритишга тўғри келар эди. Модуллар билан биз ўзгарuvчимиздан тинч фойдаланишимиз мумкин, кимдир ўша ўзгарuvчидан фойдаланмоқчи бўлишидан қўрқмасдан.