JavaScript හි data- ගුණාංග සමඟ උදාහරණ අවස්ථාවක්

පිටුව පූරණය වන විට සේවාදායකය විසින් HTML කේතයක් සාදන බවට සිතමු, එහි නිෂ්පාදනයේ නම, මිල හා මිලදී ගත් ප්‍රමාණය ගබඩා කර ඇත:

<div id="product" data-product="ඇපල්" data-price="1000" data-amount="5"></div>

නිෂ්පාදනය සමඟ අංගයකට සම්බන්ධකයක් ලබා ගන්නා සහ සම්පූර්ණ භාණ්ඩ වටිනාකම සොයා ගන්නා කාර්යයක් කරමු (ප්‍රමාණයෙන් ගුණ කළ මිල):

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 ලෙස පෙන්වනු ඇත. එය ඉතා තොරතුරු සහිත නොවන බව ඔබ එකඟ වනු ඇත.

එබැවින්, අවශ්‍ය ගුණාංග නොමැතිවීමෙන් ආරක්ෂා වීමට අපට යම් ආකාරයකින් හැකි විය යුතුය. මෙය කළ හැක්කේ ක්‍රම දෙකකිනි. පළමු ක්‍රමය නම්, මෙය සාමාන්‍ය අංගයක් බව පැවසීමයි සහ සරලව if පරීක්ෂා කිරීම් මගින් අවශ්‍ය ගුණාංග පවතින බවට වග බලා ගැනීම:

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 ගුණාංගය නොමැති වීම ව්‍යතිරේක තත්වයක් ලෙස පැවසීමයි. මෙම අවස්ථාවේ දී අපි ව්‍යතිරේකයක් ඉවත දමන්නෙමු:

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 ශ්‍රිතය ව්‍යතිරේක වර්ග දෙකක් ඉවත දමන ආකාරයට මගේ කේතය ප්‍රතිසංස්කරණය කරන්න: මිල නොමැතිවීම සහ ප්‍රමාණය නොමැතිවීම. මෙම ව්‍යතිරේකවල නම් සඳහා හොඳින් සිතන්න. catch ගොනුව තුළ, විවිධ වර්ගවල ව්‍යතිරේක සඳහා විවිධ දෝෂ පණිවිඩ පෙන්වන්න.