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 шығады. Сіз де келісесіз, бұл өте ақпаратты емес.

Бізге қажетті атрибуттардың жоқ болуынан қалай да қорғану керек сияқты. Бұны екі жолмен жасауға болады. Бірінші жол - бұл қалыпты жағдай деп айтып, тек қана бар-жоғын тексеру:

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 блогінде әр түрлі ерекше жағдайлар үшін әр түрлі қате хабарламаларын шығарыңыз.