Meneruskan Parameter ke Modul melalui Closure di JavaScript
Merupakan praktik yang baik untuk tidak menanamkan nilai-nilai tertentu secara langsung ke dalam modul, melainkan meneruskannya sebagai parameter ke modul itu sendiri (yaitu sebagai parameter dari fungsi yang dipanggil secara langsung):
;(function(arg1, arg2) { // parameter masuk ke dalam variabel
})(1, 2); // meneruskan beberapa parameter
Mari kita lihat sebuah contoh. Misalkan kita memiliki sebuah div dengan angka dan sebuah tombol:
<div id="div">3</div>
<button id="btn">click me</button>
Misalkan kita juga memiliki sebuah 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);
});
})();
Seperti yang Anda lihat, selector elemen-elemen kita tertanam secara kaku dalam kode modul. Solusi yang lebih baik adalah dengan meneruskannya sebagai parameter modul - dengan begitu kita dapat dengan mudah mengubahnya di kemudian hari. Mari perbaiki modul kita:
;(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');
Diberikan sebuah tombol dan tiga input, di mana angka dimasukkan ke dalamnya. Saat tombol ditekan, cetaklah jumlah dari angka-angka yang dimasukkan ke konsol. Implementasikan tugas ini menggunakan sebuah modul.
