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):
;(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:
<div id="div">3</div>
<button id="btn">clique aqui</button>
Suponha também que temos um determinado módulo:
;(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:
;(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');
Dado um botão e três inputs, onde números são inseridos. Ao clicar no botão, exiba no console a soma dos números inseridos. Implemente a tarefa usando um módulo.
