Амалий қўллаш

Иккита сонли див берилган бўлсин:

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);
  });
})();

Энди ҳар бир модулда биз турли ўзгарuvчилар ва функциялардан фойдаланишимиз мумкин, уларнинг скриптнинг бошқа ўзгарuvчилари ва функциялари билан зидлашишидан қўрқмасдан.

Мисол учун, икки элементни ҳам elem ўзгарuvчисида сақлаймиз - ҳар бири ўз модулининг ўзгарuvчисида. Агар модуллар бўлмаганида, элементларимизни сақлаш учун турли ўзгарuvчиларни киритишга тўғри келар эди. Модуллар билан биз ўзгарuvчимиздан тинч фойдаланишимиз мумкин, кимдир ўша ўзгарuvчидан фойдаланмоқчи бўлишидан қўрқмасдан.