Додани унсури волидайн ба модул тавассути маҳкамкунии дар JavaScript
Бигзор мо унсурҳои зеринро дорем:
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="res"></div>
<button id="btn">click me</button>
Бигзор ин унсурҳо бо модули зерин кор мекунанд:
;(function(selector1, selector2, selector3, selector4, selector5) {
let div1 = document.querySelector(selector1);
let div2 = document.querySelector(selector2);
let div3 = document.querySelector(selector3);
let res = document.querySelector(selector4);
let btn = document.querySelector(selector5);
btn.addEventListener('click', function() {
let num1 = Number(div1.textContent);
let num2 = Number(div2.textContent);
let num3 = Number(div3.textContent);
res.textContent = num1 + num2 + num3;
});
})('#div1', '#div2', '#div3', '#res', '#btn');
Чунонки шумо мебинед, шумораи параметрҳое, ки ба модул дода мешаванд, каме зиёд буда ва ноҳамворӣ меофарад. Одатан дар ин ҳолат ба тариқи зерин амал мекунанд: ба модул унсури волидайни умумии ҳамаи унсурҳое, ки бо онҳо модули мо кор мекунад, мефиристанд, ва сипас дар дохили модул аз ин волидайн унсурҳои гуногунро мегиранд.
Биёед барои тегҳои мо як волидайни умумӣ созем:
<div id="parent">
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="res"></div>
<button id="btn">click me</button>
</div>
Акнун рамзи модулро таҳрир кунем:
;(function(root) {
let parent = document.querySelector(root);
let div1 = parent.querySelector('#div1');
let div2 = parent.querySelector('#div2');
let div3 = parent.querySelector('#div3');
let res = parent.querySelector('#res');
let btn = parent.querySelector('#btn');
btn.addEventListener('click', function() {
let num1 = Number(div1.textContent);
let num2 = Number(div2.textContent);
let num3 = Number(div3.textContent);
res.textContent = num1 + num2 + num3;
});
})('#parent');
Ҳамин тавр, унсури волидайнро мо аз берун ба модул дода ва ба осонӣ метавонем онро иваз кунем. Ва унсурҳои фарзанд кори дохилии модул мебошанд.