Truyền tham số vào module thông qua closures trong JavaScript
Một phương pháp hay là không nên "hardcode" các giá trị vào bên trong module, mà nên truyền chúng dưới dạng tham số của chính module đó (tức là tham số của hàm được gọi ngay lập tức):
;(function(arg1, arg2) { // các tham số được đưa vào biến
})(1, 2); // truyền một số tham số
Hãy xem xét một ví dụ. Giả sử chúng ta có một thẻ div chứa số và một nút bấm:
<div id="div">3</div>
<button id="btn">click me</button>
Giả sử chúng ta cũng có một module nào đó:
;(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);
});
})();
Như bạn thấy, bộ chọn (selector) của các phần tử chúng ta đã bị "hardcode" cứng trong mã module. Một giải pháp tốt hơn là truyền chúng dưới dạng tham số cho module - bằng cách này, chúng ta có thể dễ dàng thay đổi chúng sau này. Hãy sửa lại module của chúng ta:
;(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');
Cho một nút bấm và ba ô nhập liệu, dùng để nhập các số. Khi nhấn vào nút, hãy in ra console tổng của các số đã nhập. Hãy triển khai bài toán này bằng cách sử dụng một module.
