Att passera parametrar till en modul genom closures i JavaScript

Det anses vara god praxis att inte hårdkoda värden i en modul, utan att skicka dem som en parameter till modulen (det vill säga som en parameter till den funktion som anropas omedelbart):

javascript;(function(arg1, arg2) { // parametrar hamnar i variabler
  
})(1, 2); // skickar några parametrar

Låt oss titta på ett exempel. Låt oss säga att vi har en div med ett nummer och en knapp:

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

Låt oss också säga att vi har en 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);
  });
})();

Som du kan se är selektorerna för våra element hårdkodade i modulens kod. En bättre lösning vore att skicka dem som parametrar till modulen - på så sätt kan vi enkelt ändra dem i framtiden. Låt oss rätta till vår modul:

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');