Passage de paramètres dans un module via des fermetures en JavaScript
Il est considéré comme une bonne pratique de ne pas coder en dur certaines valeurs dans un module, mais de les passer en tant que paramètre du module lui-même (c'est-à-dire en tant que paramètre de la fonction invoquée immédiatement) :
;(function(arg1, arg2) { // les paramètres sont affectés aux variables
})(1, 2); // nous passons quelques paramètres
Regardons un exemple. Supposons que nous ayons une div avec un nombre et un bouton :
<div id="div">3</div>
<button id="btn">click me</button>
Supposons également que nous ayons un certain 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);
});
})();
Comme vous pouvez le voir, les sélecteurs de nos éléments sont codés en dur dans le module. Une meilleure solution serait de les passer en paramètres du module - ainsi, nous pourrons facilement les modifier à l'avenir. Corrigeons notre module :
;(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');
Un bouton et trois champs de saisie sont donnés, dans lesquels des nombres sont saisis. Lorsque vous cliquez sur le bouton, affichez dans la console la somme des nombres saisis. Implémentez la tâche en utilisant un module.
