ප්රායෝගික යෙදුම
අපට අංක සහිත div කොටස් දෙකක් ලබා දී ඇතැයි සිතමු:
<div id="div1">10</div>
<div id="div2">10</div>
පළමු div කොටස මත ක්ලික් කළ විට එහි අගය වර්ග කිරීමටත්, දෙවන div කොටස මත ක්ලික් කළ විට එය ඝන කිරීමටත් සකසමු.
අපගේ කේතය මොඩියුල දෙකක ආකාරයෙන් සකස් කරමු:
;(function() {
let elem = document.querySelector('#div1'); // පළමු div කොටස
function func(num) {
return num * num; // වර්ග කරන්න
}
elem.addEventListener('click', function() {
this.textContent = func(elem.textContent);
});
})();
;(function() {
let elem = document.querySelector('#div2'); // දෙවන div කොටස
function func(num) {
return num * num * num; // ඝන කරන්න
}
elem.addEventListener('click', function() {
this.textContent = func(elem.textContent);
});
})();
දැන් එක් එක් මොඩියුලයේදී, අපට ඕනෑම විචල්යයන් හා ශ්රිත භාවිතා කළ හැකිය, ඒවා අපගේ ස්ක්රිප්ට් තුළ ඇති වෙනත් විචල්ය හෝ ශ්රිත සමඟ ගැටුම් වලට ලක් වේ යැයි බිය නොවී.
උදාහරණයක් වශයෙන්, අපි අංග දෙකම elem විචල්යයේ
ගබඩා කරමු - එක් එක් තමන්ගේම මොඩියුලයේ තමන්ගේම විචල්යයේ.
මෙහි මොඩියුල නොතිබුනේ නම්, අපගේ අංග ගබඩා කිරීම සඳහා
වෙනස් විචල්ය නාමයන් හඳුන්වා දීමට සිදුවනු ඇත.
මොඩියුල සමඟින්, අපගේ විචල්යය භාවිතා කිරීමට අවසර ඇත,
වෙනත් අයෙකුද මෙම විචල්යය භාවිතා කිරීමට අවශ්ය විය හැකි
බවට බිය නොවී.
