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

Энди куйидаги вазьятни фараз қилайлик: сервердаги баъзи nosozlik сабаби, у бизга нархи ёки миқдори йўқ (ёки ҳар иккиласи) маҳсулотни юборди, масалан, шундай:

<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 блокада турли хил истиснолар учун хатолик ҳақида турли хабарлар чиқаринг.