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

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

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

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

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

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

javascript;(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 ကို ပြုပြင်ကြပါစို့။

javascript;(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');