Paso de parámetros a un módulo mediante closures en JavaScript
Se considera una buena práctica no codificar valores en el módulo, sino pasarlos como parámetro del propio módulo (es decir, como parámetro de la función invocada inmediatamente):
;(function(arg1, arg2) { // los parámetros se asignan a variables
})(1, 2); // pasamos algunos parámetros
Veamos un ejemplo. Supongamos que tenemos un div con un número y un botón:
<div id="div">3</div>
<button id="btn">click me</button>
Supongamos también que tenemos algún 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 puedes ver, los selectores de nuestros elementos están codificados de forma rígida en el módulo. Una solución más adecuada sería pasarlos como parámetros del módulo - así podremos cambiarlos fácilmente en el futuro. Corrijamos nuestro 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 un botón y tres inputs, en los que se introducen números. Al hacer clic en el botón, muestre en la consola la suma de los números introducidos. Implemente la tarea utilizando un módulo.
