Перадача параметраў у модуль праз замыканні ў JavaScript
Добрай практыкай лічыцца не зашываць якія-небудзь значэнні ў модуль, а перадаваць іх параметрам самага модуля (гэта значыць параметрам выклікаючайся на месцы функцыі):
;(function(arg1, arg2) { // параметры трапляюць у зменныя
})(1, 2); // перадаем якія-небудзь параметры
Давайце паглядзім на прыкладзе. Хай у нас ёсць дыў з лікам і кнопка:
<div id="div">3</div>
<button id="btn">click me</button>
Хай у нас таксама ёсць нейкі модуль:
;(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);
});
})();
Як вы бачыце, селектары нашых элементаў жорстка зашытыя ў кодзе модуля. Больш удалым рашэннем будзе перадаць іх параметрамі модуля - так у далейшым мы лёгка зможам іх змяніць. Выправім наш модуль:
;(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');
Дадзена кнопка і тры інпута, у якія ўводзяцца лікі. Пасля націску на кнопку вывядзіце ў кансоль суму ўведзеных лікаў. Рэалізуйце задачу з дапамогай модуля.
