Parameters doorgeven aan module via closures in JavaScript
Het is een goede gewoonte om bepaalde waarden niet hard te coderen in een module, maar ze door te geven als parameter van de module zelf (dus als parameter van de direct uitgevoerde functie):
;(function(arg1, arg2) { // parameters komen in variabelen terecht
})(1, 2); // geven enkele parameters door
Laten we een voorbeeld bekijken. Stel we hebben een div met een getal en een knop:
<div id="div">3</div>
<button id="btn">click me</button>
Stel we hebben ook een bepaalde module:
;(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);
});
})();
Zoals je ziet, zijn de selectors van onze elementen hard gecodeerd in de modulecode. Een betere oplossing zou zijn om ze als parameters aan de module door te geven - zo kunnen we ze later gemakkelijk wijzigen. Laten we onze module verbeteren:
;(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');
Gegeven een knop en drie invoervelden, waarin getallen worden ingevoerd. Bij het klikken op de knop wordt de som van de ingevoerde getallen naar de console gestuurd. Implementeer de taak met behulp van een module.
