Data- ատրիբուտների բացառության օրինակ JavaScript-ում

Թող էջը բեռնվելիս սերվերը ստեղծի 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 բլոկում ցուցադրեք տարբեր սխալի հաղորդագրություններ տարբեր տեսակի բացառությունների համար: