Практическо приложение

Нека имаме два дива с числа:

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 - всеки в своята променлива на своя модул. Ако тук нямаше модули, щеше да се наложи да въвеждаме различни променливи за съхраняване на нашите елементи. А с модули можем спокойно да използваме нашата променлива, без да се страхуваме, че някой друг ще иска също да използва тази променлива.