Käytännön sovellus

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

html<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:

javascript;(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.