JavaScript တွင် data- attributes များနှင့် ခြွင်းချက် ဥပမာ

စာမျက်နှာ စတင်တင်လိုက်သည့်အခါ ဆာဗာမှ ထုတ်ကုန်အမည်၊ ဈေးနှုန်းနှင့် ဝယ်ယူထားသော အရေအတွက်ကို သိမ်းဆည်းထားသည့် HTML ကုဒ်ကို ဖန်တီးပေးသည်ဆိုပါစို့။

<div id="product" data-product="ပန်းသီး" data-price="1000" data-amount="5"></div>

ထုတ်ကုန်ပါဝင်သည့် element ဆီသို့ လက်ခံရရှိသည့် လင့်ခ်ကို ယူ၍ ထုတ်ကုန်၏ စုစုပေါင်းကုန်ကျမှု (ဈေးနှုန်းနှင့် အရေအတွက်ကို မြှောက်ခြင်း) ကို ရှာဖွေပေးမည့် function တစ်ခု ပြုလုပ်ကြည့်ရအောင်။

function getCost(elem) {
	return elem.dataset.price * elem.dataset.amount;
}

ကျွန်ုပ်တို့၏ ထုတ်ကုန်၏ ကုန်ကျမှုကို ရှာကြည့်ပါမည်။

let product = document.querySelector('#product');
let cost = getCost(product);

alert(cost);

ယခု အောက်ပါအခြေအနေကို မှတ်ယူပါမည်။ ဆာဗာပေါ်ရှိ အချို့ချို့ယွင်းချက်များကြောင့် ဈေးနှုန်း (သို့မဟုတ်) အရေအတွက် (သို့မဟုတ်) နှစ်မျိုးလုံး ပျောက်ဆုံးနေသည့် ထုတ်ကုန်တစ်ခုကို ပို့လိုက်သည်၊ ဥပမာအားဖြင့် ဤကဲ့သို့ဖြစ်သည်။

<div id="product" data-product="ပန်းသီး" data-price="1000"></div>

ယခု ထုတ်ကုန်၏ ကုန်ကျမှုကို တွက်ကြည့်ပါက ရလဒ်အဖြစ် NaN ကို မျက်နှာပြင်ပေါ်တွင် ပြသပေးမည်။ အချက်အလက် မပြည့်စုံသည်မှာ သဘောတူပါလိမ့်မည်။

ဆိုလိုသည်မှာ ကျွန်ုပ်တို့လိုအပ်သည့် attributes များ ပျောက်ဆုံးနေခြင်းမှ အကာအကွယ်ပေးရန် လိုအပ်သည်။ ၎င်းကို နည်းလမ်း နှစ်မျိုးဖြင့် လုပ်ဆောင်နိုင်သည်။ ပထမနည်းလမ်းမှာ ၎င်းသည် သာမန် အပြုအမူတစ်ခုဖြစ်သည်ဟု ဆိုပြီး if များဖြင့် လိုအပ်သည့် attributes များ ရှိမရှိ စစ်ဆေးခြင်း ဖြစ်သည်။

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		return 0; // တစ်ခုခုကို ပြန်ပေးမည်၊ ဥပမာ 0 သို့မဟုတ် null သို့မဟုတ် false
	}
}

ဒုတိယ ရွေးချယ်စရာမှာ data-price သို့မဟုတ် data-amount attribute မရှိခြင်းသည် ခြွင်းချက်ဖြစ်ရပ်တစ်ခုဟု ဆိုခြင်းဖြစ်သည်။ ဤအခြေအနေတွင် ကျွန်ုပ်တို့သည် ခြွင်းချက်ကို ပစ်ထုတ်မည်ဖြစ်သည်။

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		throw {
			name: 'ProductCostError',
			message: 'ထုတ်ကုန်တွင် ဈေးနှုန်း သို့မဟုတ် အရေအတွက် ပျောက်ဆုံးနေသည်'
		};
	}
}

ဤနေရာတွင် မည်သည့်ရွေးချယ်မှုကို အသုံးပြုရန် ပိုမိုသင့်လျော်သည် ဆိုသည်မှာ ပရိုဂရမ်မာ၏ ရွေးချယ်မှုပေါ်တွင် မူတည်သည်။ ၎င်းသည် ပြဿနာကို စက္ကရစ်၏ သာမန်အလုပ်တစ်ခုအဖြစ် သို့မဟုတ် ခြွင်းချက်ဖြစ်ရပ်တစ်ခုအဖြစ် ယူဆနိုင်သည်။

ကျွန်ုပ်တို့သည် အခြေအနေသည် ခြွင်းချက်ဖြစ်သည်ဟု ဆုံးဖြတ်လိုက်သည်ဆိုပါစို့။ ထိုအခါ ထုတ်ကုန်ကုန်ကျမှုကို ရယူသည့်ကုဒ်သည် အောက်ပါအတိုင်း ဖြစ်လာမည်။

let product = document.querySelector('#product');

try {
	let cost = getCost(product);
	alert(cost);
} catch (error) {
	// ခြွင်းချက်ကို တစ်နည်းနည်းဖြင့် တုံ့ပြန်မည်
}

�ျွန်ုပ်၏ကုဒ်ကို getCost function မှ ခြွင်းချက်နှစ်မျိုးကို ပစ်ထုတ်နိုင်ရန် ပြန်လည်ပြင်ဆင်ပါ။ ဈေးနှုန်း ပျောက်ဆုံးပါက နှင့် အရေအတွက် ပျောက်ဆုံးပါက ဟူ၍ဖြစ်သည်။ ထိုခြွင်းချက်များ၏ အမည်များကို ကောင်းစွာ စဉ်းစားပါ။ catch ဘလောက်အတွင်းတွင် အမျိုးအစားကွဲပြားသည့် ခြွင်းချက်များအတွက် ကွဲပြားသည့် အမှားမှတ်တမ်းစာသားများကို ပြသပါ။