Übergabe von Parametern an ein Modul durch Closures in JavaScript
Es gilt als gute Praxis, keine Werte im Modul fest zu codieren, sondern sie als Parameter des Moduls selbst zu übergeben (also als Parameter der sich sofort aufrufenden Funktion):
;(function(arg1, arg2) { // Parameter gelangen in die Variablen
})(1, 2); // wir übergeben einige Parameter
Schauen wir uns ein Beispiel an. Angenommen, wir haben eine Div mit einer Zahl und einen Button:
<div id="div">3</div>
<button id="btn">click me</button>
Angenommen, wir haben auch ein bestimmtes 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);
});
})();
Wie Sie sehen, sind die Selektoren unserer Elemente stark im Modulcode fest codiert. Eine bessere Lösung wäre, sie als Parameter des Moduls zu übergeben - so können wir sie später leicht ändern. Korrigieren wir unser 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');
Gegeben ist ein Button und drei Inputs, in die Zahlen eingegeben werden. Geben Sie beim Klicken auf den Button die Summe der eingegebenen Zahlen in der Konsole aus. Implementieren Sie die Aufgabe mit einem Modul.
