Mfano wa Kutenga kwa data- attributes katika JavaScript

Acha wakati ukurasa unapopakuliwa, seva itatengeneza msimbo wa HTML ambao huhifadhi jina, bei na kiasi cha bidhaa iliyonunuliwa:

<div id="product" data-product="apple" data-price="1000" data-amount="5"></div>

Wacha tufanye utendaji, ambao utakubali kiunga cha kipengee chenye bidhaa na kupata gharama kamili ya bidhaa (bei zidishwe kwa kiasi):

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

Wacha tupate gharama ya bidhaa yetu:

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

alert(cost);

Hebu tuchukulie hali ifuatayo: kwa sababu ya baadhi ya hitilafu kwenye seva, ilitutumia bidhaa ambayo inakosa bei au kiasi (au zote mbili mara moja), kwa mfano, kama hivi:

<div id="product" data-product="apple" data-price="1000"></div>

Ikiwa sasa utajaribu kuhesabu gharama ya bidhaa, matokeo kwenye skrini yataonyesha NaN. Unakubaliana, hayawezi kueleweka vyema.

Inamaanisha, tunahitaji kujilinda kwa namna fulani kutokana na ukosefu wa sifa tulizohitaji. Hii inaweza kufanyika kwa njia mbili. Njia ya kwanza - ni kusema kwamba hii ni tabia ya kawaida na tu kuangalia kwa kutumia 'if' uwepo wa sifa tunazohitaji:

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		return 0; // turudishe kitu, kwa mfano, 0 au null au false
	}
}

Chaguo la pili - ni kusema kwamba kutokuwepo kwa sifa data-price au data-amount - ni hali ya ubaguzi. Katika kesi hii tutatupa ubaguzi:

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		throw {
			name: 'ProductCostError',
			message: 'bei au kiasi kimekosekana kwenye bidhaa'
		};
	}
}

Ni ipi kati ya chaguzi hizi mbili inafaa zaidi kutumia hapa - hii ni uchaguzi wa programu. Anaweza kuchukulia tatizo kama kazi ya kawaida ya hati au kama hali ya ubaguzi.

Wacha tuache tumeamua, kwamba hali ni ya ubaguzi. Basi msimbo wa kupata gharama ya bidhaa utaonekana hivi:

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

try {
	let cost = getCost(product);
	alert(cost);
} catch (error) {
	// tutathmini kwa namna fulani ubaguzi
}

Badilisha msimbo wangu ili utendaji getCost utape aina mbili za vibaguzi: ikiwa bei haipo na ikiwa kiasi kimekosekana. Fikiria kwa umakini kuhusu majina ya vibaguzi hivi. Katika kizuizi catch onyesha ujumbe tofauti wa hitilafu kwa vibaguzi vya aina tofauti.