Praktiline rakendamine

Oletagem, et meil on kaks numbritega divi:

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

Teeme nii, et esimesele divile klõpsates see ruutu läheks ja teisele divile klõpsates - kuupi.

Korraldame oma koodi kahe moodulina:

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

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

Nüüd saame igas moodulis kasutada suvalisi muutujaid ja funktsioone, kartmata, et need konfliktivad teiste muutujate ja funktsioonidega meie skriptis.

Näiteks mõlemad elemendid hoime muutujas elem - igaüks oma muutujas oma moodulis. Kui siin poleks mooduleid, peaksime sisestama erinevad muutujad meie elementide hoidmiseks. Moodulitega saame rahulikult kasutada meie muutujat, kartmata, et keegi tahab samuti seda muutujat kasutada.