လက်တွေ့အသုံးချမှု

ဂဏန်းနှစ်ခုပါသော div နှစ်ခုကို ပေးထားသည်ဆိုပါစို့။

<div id="div1">10</div>
<div id="div2">10</div>

ပထမ div ကို နှိပ်လိုက်လျှင်ယင်း၏တန်ဖိုးကို နှစ်ထပ်ကိန်းတင်ရန်၊ ဒုတိယ div ကို နှိပ်လိုက်လျှင်ယင်း၏တန်ဖိုးကို သုံးထပ်ကိန်းတင်ရန် ပြုလုပ်ကြပါစို့။

ကျွန်ုပ်တို့၏ကုဒ်ကို module နှစ်ခုအဖြစ်စီစဉ်ပါမည်။

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

ယခုဆိုလျှင် module တစ်ခုစီအတွင်း၌ မည်သည့် variable နှင့် function ကိုမဆို ကျွန်ုပ်တို့၏ script ရှိ အခြား variable များနှင့် function များနှင့် ပဋိပက္ခဖြစ်မည်ကို စိုးရိမ်စရာမလိုဘဲ အသုံးပြုနိုင်ပါသည်။

ဥပမာ - element နှစ်ခုလုံးကို elem variable ထဲတွင် သိမ်းထားပါသည် - တစ်ခုစီကို ၎င်း၏ module ၏ ၎င်း၏ကိုယ်ပိုင် variable ထဲတွင် သိမ်းထားပါသည်။ ဤနေရာတွင် modules များမရှိပါက၊ ကျွန်ုပ်တို့၏ element များကိုသိမ်းဆည်းရန် variable အမျိုးမျိုးကို မိတ်ဆက်ပေးရပါမည်။ သို့သော် modules များနှင့်ဆိုလျှင်၊ မည်သူမဆို ဤ variable ကို အသုံးပြုလိုကြောင်း စိုးရိမ်စရာမလိုဘဲ ကျွန်ုပ်တို့၏ variable ကို အေးဆေးအသုံးပြုနိုင်ပါသည်။