Transmiterea parametrilor în modul prin închideri în JavaScript

O bună practică este să nu fixezi anumite valori în modul, ci să le transmiți ca parametru modulului însuși (adică ca parametru al funcției care se apelează imediat):

javascript;(function(arg1, arg2) { // parametrii ajung în variabile
  
})(1, 2); // transmitem niște parametri

Să vedem un exemplu. Să presupunem că avem un div cu un număr și un buton:

html<div id="div">3</div>
<button id="btn">click me</button>

Să presupunem că avem, de asemenea, un anumit modul:

javascript;(function() {
  let div = document.querySelector('#div');
  let btn = document.querySelector('#btn');
  
  function func(num) {
    return num * num;
  }
  
  btn.addEventListener('click', function() {
    div.textContent = func(div.textContent);
  });
})();

După cum vedeți, selectorii elementelor noastre sunt fixați rigid în codul modulului. O soluție mai bună ar fi să îi transmiți ca parametri ai modulului - astfel, pe viitor, le vom putea schimba cu ușurință. Să corectăm modulul nostru:

javascript;(function(selector1, selector2) {
  let div = document.querySelector(selector1);
  let btn = document.querySelector(selector2);
  
  function func(num) {
    return num * num;
  }
  
  btn.addEventListener('click', function() {
    div.textContent = func(div.textContent);
  });
})('#div', '#btn');