Պարամետրերի փոխանցում մոդուլին փակումների միջոցով JavaScript-ում
Լավ պրակտիկա է համարվում որոշ արժեքներ մոդուլի մեջ չկոդավորելը, այլ դրանք փոխանցելը որպես հենց մոդուլի պարամետր (այսինքն՝ անմիջապես կանչվող ֆունկցիայի պարամետր).
;(function(arg1, arg2) { // պարամետրերը հայտնվում են փոփոխականներում
})(1, 2); // փոխանցում ենք որոշակի պարամետրեր
Եկեք նայենք օրինակով: Ենթադրենք, մենք ունենք div թիվով և կոճակ.
<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');
Տրված է կոճակ և երեք input դաշտեր, որոնցում մուտքագրվում են թվեր: Կոճակը սեղմելիս արտածեք console-ում մուտքագրված թվերի գումարը: Իրականացրեք խնդիրը մոդուլի միջոցով: