Amaliy qoʻllanish

Faraz qilaylik, bizda ikkita raqamli div berilgan:

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

Keling, birinchi div ustiga bosilganda uning qiymati kvadratga, ikkinchi div ustiga bosilganda esa kubga koʻtarilishi uchun qilaylik.

Kodimizni ikkita modul shaklida tashkil qilamiz:

;(function() {
	let elem = document.querySelector('#div1'); // birinchi div
	
	function func(num) {
		return num * num; // kvadratga koʻtaramiz
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

;(function() {
	let elem = document.querySelector('#div2'); // ikkinchi div
	
	function func(num) {
		return num * num * num; // kubga koʻtaramiz
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

Endi har bir modulda biz o'zgaruvchilar va funksiyalarning skriptimizning boshqa o'zgaruvchilari va funksiyalari bilan ziddiyatga kirishishidan qo'rqmasdan, istalgan o'zgaruvchilar va funksiyalardan foydalanishimiz mumkin.

Masalan, ikkala elementni ham elem o'zgaruvchisida saqlaymiz - har biri o'z modulining o'z o'zgaruvchisida. Agar bu yerda modullar bo'lmaganda, bizning elementlarimizni saqlash uchun turli o'zgaruvchilarni kiritish kerak bo'lar edi. Modullar bilan esa, kimdir bu o'zgaruvchidan yana foydalanishni xohlaydi deb qo'rqmasdan, o'zgaruvchimizdan bemalol foydalanishimiz mumkin.