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 блогуңузда ар кандай түрдөгү көрсөтүлгөндөр үчүн ар кандай ката жөнүндө билдирүүлөрдү чыгарыңыз.