Praktiese Toepassing

Laat ons twee dive met nommers gee:

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

Kom ons maak dit so dat wanneer op die eerste div geklik word, sy waarde tot die vierkant verhef word, en wanneer op die tweede div geklik word - tot die derdemag.

Ons sal ons kode organiseer as twee modules:

;(function() {
	let elem = document.querySelector('#div1'); // eerste div
	
	function func(num) {
		return num * num; // sal tot die vierkant verhef
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

;(function() {
	let elem = document.querySelector('#div2'); // tweede div
	
	function func(num) {
		return num * num * num; // sal tot die derdemag verhef
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

Nou kan ons in elk van die modules enige veranderlikes en funksies gebruik, sonder om te vrees dat hulle met ander veranderlikes en funksies in ons skrip sal bots.

Byvoorbeeld, ons stoor beide elemente in die veranderlike elem - elkeen in sy eie veranderlike van sy eie module. As daar nie modules was nie, sou ons moes verskillende veranderlikes instel om ons elemente te stoor. Maar met modules kan ons ons veranderlike gerus gebruik sonder om te vrees dat iemand anders ook hierdie veranderlike wil gebruik.