Գործնական կիրառություն

Ենթադրենք ունենք երկու դիվ թվերով.

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

Եկեք այնպես անենք, որ առաջին դիվի վրա կտտացնելիս նրա արժեքը բարձրացվի քառակուսի, իսկ երկրորդ դիվի վրա կտտացնելիս՝ խորանարդ:

Կազմակերպենք մեր կոդը երկու մոդուլի տեսքով.

javascript;(function() {
  let elem = document.querySelector('#div1'); // առաջին դիվ
  
  function func(num) {
    return num * num; // բարձրացնել քառակուսի
  }
  
  elem.addEventListener('click', function() {
    this.textContent = func(elem.textContent);
  });
})();

;(function() {
  let elem = document.querySelector('#div2'); // երկրորդ դիվ
  
  function func(num) {
    return num * num * num; // բարձրացնել խորանարդ
  }
  
  elem.addEventListener('click', function() {
    this.textContent = func(elem.textContent);
  });
})();

Այժմ յուրաքանչյուր մոդուլում մենք կարող ենք օգտագործել ցանկացած փոփոխական և ֆունկցիա՝ առանց վախենալու, որ դրանք կհակասեն մեր սկրիպտի այլ փոփոխականների և ֆունկցիաների հետ:

Օրինակ, երկու տարրերն էլ պահում ենք elem փոփոխականում՝ յուրաքանչյուրը իր մոդուլի իր փոփոխականում: Եթե մոդուլներ չլինեին, ստիպված կլինեինք ներմուծել տարբեր փոփոխականներ մեր տարրերը պահելու համար: Իսկ մոդուլներով մենք կարող ենք հանգիստ օգտագործել մեր փոփոխականը՝ առանց վախենալու, որ ինչ-որ մեկը նույնպես ցանկանա օգտագործել այս փոփոխականը: