Penyebaran Parameter ke dalam Modul melalui Penutupan dalam JavaScript
Amalan yang baik adalah dengan tidak menetapkan nilai-nilai tertentu secara keras dalam modul, tetapi menyebarkannya sebagai parameter kepada modul itu sendiri (iaitu parameter kepada fungsi yang dipanggil serta-merta):
;(function(arg1, arg2) { // parameter masuk ke dalam pembolehubah
})(1, 2); // menyebarkan beberapa parameter
Mari kita lihat contoh. Katakan kita mempunyai sebuah div dengan nombor dan sebuah butang:
<div id="div">3</div>
<button id="btn">click me</button>
Katakan juga kita mempunyai 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, pemilih (selector) untuk elemen-elemen kita tertanam secara keras dalam kod modul. Penyelesaian yang lebih baik adalah dengan menyebarkannya sebagai parameter kepada modul - dengan ini, kita boleh mengubahnya dengan mudah pada masa hadapan. Mari betulkan 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 butang dan tiga input, di mana nombor dimasukkan. Apabila butang ditekan, paparkan dalam konsol hasil tambah nombor-nombor yang dimasukkan. Laksanakan tugas ini menggunakan modul.
