Praktiki tetbiq

Tutaq ki, bizə iki ədəd div verilib:

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

Gəlin elə edək ki, birinci div-ə kliklənəndə onun dəyəri kvadratına yüksəltsin, ikinci div-ə kliklənəndə isə - kuba.

Kodumuzu iki modul şəklində təşkil edək:

;(function() {
	let elem = document.querySelector('#div1'); // birinci div
	
	function func(num) {
		return num * num; // kvadrata yüksəldək
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

;(function() {
	let elem = document.querySelector('#div2'); // ikinci div
	
	function func(num) {
		return num * num * num; // kuba yüksəldək
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

İndi hər bir modulda biz istənilən dəyişən və funksiyalardan istifadə edə bilərik, onların skriptimizin digər dəyişən və funksiyaları ilə toqquşacağından qorxmadan.

Məsələn, hər iki elementi biz elem dəyişənində saxlayırıq - hər biri öz modulunun öz dəyişənində. Əgər burada modullar olmasaydı, bizim elementlərimizi saxlamaq üçün müxtəlif dəyişənlər daxil etməli olacaqdıq. Modullarla isə biz, kiminsə bu dəyişəndən istifadə etmək istəyəcəyindən qorxmadan, rahat şəkildə dəyişənimizdən istifadə edə bilərik.