Overførsel af parametre til modul gennem lukninger i JavaScript
Det anses for god praksis ikke at hardkode værdier i modulet, men at overføre dem som en parameter af selve modulet (det vil sige en parameter for den funktion, der kaldes på stedet):
;(function(arg1, arg2) { // parametre går ind i variabler
})(1, 2); // overfører nogle parametre
Lad os se på et eksempel. Antag, at vi har en div med et tal og en knap:
<div id="div">3</div>
<button id="btn">click me</button>
Antag, at vi også har et eller andet 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);
});
})();
Som du kan se, er vores elementers selectorer hårdt kodet i modulet. En bedre løsning ville være at overføre dem som parametre til modulet - så vil vi nemt kunne ændre dem senere. Lad os rette vores modul:
;(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');
Der gives en knap og tre inputfelter, hvori der indtastes tal. Ved at klikke på knappen skal du udskrive summen af de indtastede tal til konsollen. Implementer opgaven ved hjælp af et modul.
