Пример за изключения с 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 изведете различни съобщения за грешка за изключения от различни типове.