Praktinis pritaikymas

Tarkime, kad turime du div elementus su skaičiais:

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

Padarykime taip, kad paspaudus pirmąjį div jo reikšmė būtų pakelta kvadratu, o paspaudus antrajį div - kubu.

Organizuosime savo kodą kaip du modulius:

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

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

Dabar kiekviename modulyje galime naudoti bet kokius kintamuosius ir funkcijas, nebijodami, kad jie konfliktuos su kitais kintamaisiais ir mūsų scenarijaus funkcijomis.

Pavyzdžiui, abu elementus saugome kintamajame elem - kiekvienas savo modulio kintamajame. Jei modulių čia nebūtų, tektų įvesti skirtingus kintamuosius mūsų elementams saugoti. O su moduliais galime ramiai naudoti savo kintamuosius, nebijodami, kad kažkas norės taip pat naudoti šį kintamąjį.