Praktična uporaba

Naj imamo podana dva div elementa s številkami:

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

Naredimo tako, da se ob kliku na prvi div njegova vrednost kvadrira, ob kliku na drugi div pa povzdigne na kub.

Organizirajmo našo kodo v obliki dveh modulov:

javascript;(function() {
  let elem = document.querySelector('#div1'); // prvi div
  
  function func(num) {
    return num * num; // kvadrirajmo
  }
  
  elem.addEventListener('click', function() {
    this.textContent = func(elem.textContent);
  });
})();

;(function() {
  let elem = document.querySelector('#div2'); // drugi div
  
  function func(num) {
    return num * num * num; // povzdignimo na kub
  }
  
  elem.addEventListener('click', function() {
    this.textContent = func(elem.textContent);
  });
})();

Zdaj lahko v vsakem od modulov uporabljamo poljubne spremenljivke in funkcije, ne da bi se bali, da bodo v konfliktu z drugimi spremenljivkami in funkcijami našega skripta.

Na primer, oba elementa hranimo v spremenljivki elem - vsak v svoji spremenljivki svojega modula. Če modulov ne bi bilo, bi morali uvesti različne spremenljivke za shranjevanje naših elementov. Z moduli pa lahko mirno uporabljamo našo spremenljivko, ne da bi se bali, da jo bo kdo drug želel prav tako uporabiti.