Praktická aplikace

Předpokládejme, že máme dva divy s čísly:

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

Udělejme to tak, aby po kliknutí na první div se jeho hodnota umocnila na druhou, a po kliknutí na druhý div - na třetí.

Uspořádejme náš kód jako dva moduly:

javascript;(function() {
  let elem = document.querySelector('#div1'); // první div
  
  function func(num) {
    return num * num; // umocníme na druhou
  }
  
  elem.addEventListener('click', function() {
    this.textContent = func(elem.textContent);
  });
})();

;(function() {
  let elem = document.querySelector('#div2'); // druhý div
  
  function func(num) {
    return num * num * num; // umocníme na třetí
  }
  
  elem.addEventListener('click', function() {
    this.textContent = func(elem.textContent);
  });
})();

Nyní můžeme v každém z modulů používat libovolné proměnné a funkce, aniž bychom se museli bát, že budou konfliktovat s jinými proměnnými a funkcemi našeho skriptu.

Například oba elementy ukládáme do proměnné elem - každý ve své proměnné svého modulu. Kdyby zde moduly nebyly, museli bychom zavádět různé proměnné pro ukládání našich elementů. S moduly můžeme klidně používat naši proměnnou, aniž bychom se báli, že ji bude chtít někdo jiný také použít.