Applicazione Pratica

Supponiamo di avere due div con numeri:

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

Facciamo in modo che al click sul primo div il suo valore venga elevato al quadrato, e al click sul secondo div - al cubo.

Organizziamo il nostro codice sotto forma di due moduli:

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

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

Ora in ciascuno dei moduli possiamo utilizzare qualsiasi variabile e funzione, senza temere che entrino in conflitto con altre variabili e funzioni del nostro script.

Ad esempio, entrambi gli elementi li memorizziamo nella variabile elem - ciascuno nella propria variabile del proprio modulo. Se qui non ci fossero moduli, sarebbe stato necessario introdurre variabili diverse per memorizzare i nostri elementi. Mentre con i moduli possiamo tranquillamente utilizzare la nostra variabile, senza temere che qualcun altro voglia utilizzare questa stessa variabile.