JavaScript တွင် Closure များမှတစ်ဆင့် Module သို့ Parameters များပေးပို့ခြင်း

တန်ဖိုးအချို့ကို module အတွင်း ပုံသေထည့်သွင်းခြင်းမဟုတ်ဘဲ ၎င်းတို့ကို module ၏ parameter အဖြစ် (ဆိုလိုသည်မှာ တစ်ချိန်တည်း ခေါ်ယူနေသော function ၏ parameter အဖြစ်) ပေးပို့ခြင်းသည် ကောင်းမွန်သောအလေ့အကျင့်တစ်ခုဖြစ်သည်။

;(function(arg1, arg2) { // parameter များသည် variable များထဲသို့ ရောက်ရှိလာသည်
	
})(1, 2); // parameter အချို့ကို ပေးပို့ပါ

ဥပမာတစ်ခုကို ကြည့်ကြပါစို့။ ကျွန်ုပ်တို့တွင် ဂဏန်းတစ်ခုပါသော div တစ်ခုနှင့် ခလုတ်တစ်ခုရှိသည်ဆိုပါစို့။

<div id="div">3</div>
<button id="btn">click me</button>

ကျွန်ုပ်တို့တွင် module တစ်ခုလည်းရှိသည်ဆိုပါစို့။

;(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);
	});
})();

သင်မြင်တွေ့ရသည့်အတိုင်း၊ ကျွန်ုပ်တို့၏ element selector များကို module code အတွင်း ပုံသေထည့်သွင်းထားသည်။ ပိုမိုကောင်းမွန်သောဖြေရှင်းနည်းမှာ ၎င်းတို့ကို module ၏ parameter အဖြစ် ပေးပို့ခြင်းဖြစ်သည် - ဤနည်းဖြင့် နောက်ပိုင်းတွင် ကျွန်ုပ်တို့သည် ၎င်းတို့ကို အလွယ်တကူပြောင်းလဲနိုင်မည်ဖြစ်သည်။ ကျွန်ုပ်တို့၏ module ကို ပြုပြင်ကြပါစို့။

;(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 တွင်ပြသပါ။ ဤလုပ်စဉ်ကို module အသုံးပြု၍ အကောင်အထည်ဖော်ပါ။