Passagem de parâmetros para um módulo através de closures em JavaScript

É considerada uma boa prática não embutir valores diretamente no módulo, mas passá-los como parâmetro do próprio módulo (ou seja, como parâmetro da função de invocação imediata):

javascript;(function(arg1, arg2) { // os parâmetros são atribuídos às variáveis
  
})(1, 2); // passamos alguns parâmetros

Vamos ver um exemplo. Suponha que temos uma div com um número e um botão:

html<div id="div">3</div>
<button id="btn">clique aqui</button>

Suponha também que temos um determinado módulo:

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

Como você pode ver, os seletores dos nossos elementos estão rigidamente embutidos no código do módulo. Uma solução mais elegante seria passá-los como parâmetros do módulo - assim, no futuro, poderemos alterá-los facilmente. Vamos corrigir nosso módulo:

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