Käytännön sovellus

Oletetaan, että meillä on kaksi diviä numeroilla:

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

Tehdään niin, että ensimmäiseen diviin klikkaaminen nostaa sen arvon neliöön, ja toiseen diviin klikkaaminen - kuutioon.

Järjestetään koodimme kahdeksi moduuliksi:

;(function() {
	let elem = document.querySelector('#div1'); // ensimmäinen div
	
	function func(num) {
		return num * num; // nostetaan neliöön
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

;(function() {
	let elem = document.querySelector('#div2'); // toinen div
	
	function func(num) {
		return num * num * num; // nostetaan kuutioon
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

Nyt kussakin moduulissa voimme käyttää mitä tahansa muuttujia ja funktioita pelkäämättä, että ne ristiriitaisevat muiden muuttujien ja funktioiden kanssa skriptissämme.

Esimerkiksi molemmat elementit säilytämme muuttujassa elem - kukin omassa moduulinsa muuttujassaan. Ilman moduuleja joutuisi käyttämään eri muuttujia elementtiemme tallentamiseen. Moduuleilla voimme rauhassa käyttää muuttujiamme pelkäämättä, että joku muu haluaisi myös käyttää tätä muuttujaa.