Истифодаи Амалӣ

Бигзор ду див бо рақамҳо дода шуда бошанд:

<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 нигоҳ медорем - ҳар кадоми онҳо дар тағйирёбандаи худ аз модули худ. Агар модулҳо инҷо намебуданд, мебоист тағйирёбандаҳои гуногунро барои нигоҳдории элементҳои мо дохил кардан мешуд. Ва бо модулҳо мо метавонем ба осонии тағйирёбандаи худро истифода барем, бидуни онки аз ин битарсем, ки касе ин тағйирёбандаро ҳамчунин истифода кардан мехоҳад.