პრაქტიკული გამოყენება

დავუშვათ, გვაქვს ორი div ელემენტი რიცხვებით:

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

მოდით, გავაკეთოთ ისე, რომ პირველ div-ზე დაწკაპუნებისას მისი მნიშვნელობა აიყვანოს კვადრატში, ხოლო მეორე div-ზე დაწკაპუნებისას - კუბში.

ორგანიზება გავუკეთოთ ჩვენს კოდს ორი მოდულის სახით:

;(function() {
	let elem = document.querySelector('#div1'); // პირველი div
	
	function func(num) {
		return num * num; // ავიყვანოთ კვადრატში
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

;(function() {
	let elem = document.querySelector('#div2'); // მეორე div
	
	function func(num) {
		return num * num * num; // ავიყვანოთ კუბში
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

ახლა თითოეულ მოდულში ჩვენ შეგვიძლია გამოვიყენოთ ნებისმიერი ცვლადი და ფუნქცია, არც ისე ვშიშობთ, რომ ისინი შეეჯახებიან სხვა ცვლადებს და ფუნქციებს ჩვენს სკრიპტში.

მაგალითად, ორივე ელემენტს ვინახავთ ცვლადში elem - თითოეული თავისი ცვლადით თავის მოდულში. თუ აქ მოდულები არ იქნებოდა, მოგვიწევდა სხვადასხვა ცვლადების შემოღება ჩვენი ელემენტების შესანახად. მოდულებთან კი ჩვენ შეგვიძლია მშვიდად გამოვიყენოთ ჩვენი ცვლადი, არც ისე ვშიშობთ, რომ ვინმეს ასევე სურს ამ ცვლადის გამოყენება.