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):
;(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:
<div id="div">3</div>
<button id="btn">click me</button>
Să presupunem că avem, de asemenea, un anumit modul:
;(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:
;(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');
Este dat un buton și trei câmpuri de introducere, în care se introduc numere. La apăsarea butonului, afișați în consolă suma numerelor introduse. Implementați sarcina cu ajutorul unui modul.
