JavaScript-de data- atributlary bilen ýagdaýyň görnüşi

Serwer sahypa ýüklenende, satyn alynýan önümiň adyny, bahasyny we mukdaryny saklaýan HTML koduny döretse:

<div id="product" data-product="apple" data-price="1000" data-amount="5"></div>

Önüme salgy alyp, onuň jemi bahasyny (bahasyny mukdara köpeltmek) tapýan funksiýa ýasaýarys:

function getCost(elem) {
	return elem.dataset.price * elem.dataset.amount;
}

Önümiziň bahasyny tapýarys:

let product = document.querySelector('#product');
let cost = getCost(product);

alert(cost);

Indi şeýle bir ýagdaýy göz öňüne getireliň: serwerde döreýän bir näsazlyk sebäpli, ol bize bahasy ýa-da mukdary (ýa-da ikisi hem) ýok önümi iberdi, mysal üçin, şeýle:

<div id="product" data-product="apple" data-price="1000"></div>

Eger indi önümiň bahasyny hasaplamaga synanyşsaňyz, netije NaN bolar. Ylalaşyň, ýeterlik derejede maglumat berýän däl.

Şeýle çykyar, biz gerek bolan atributlaryň ýok bolmagyndan özümizi nädip goramaly. Muny iki ýoly bilen etmek bolýar. Birinci ýol, bu normal işleýiş diýip, diňe gerek bolan atributlaryň bardygyny IF bilen barlamak:

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		return 0; // 0 ýa-da null ýa-da false ýaly bir zat gaýtaryň
	}
}

Ikinji wariant, data-price ýa-da data-amount atributynyň ýoklugyny ýagdaý hökmünde kabul etmek. Bu ýagdaýda biz ýagdaý ýüz tutdurarys:

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		throw {
			name: 'ProductCostError',
			message: 'önüm üçin baha ýa-da mukdar ýok'
		};
	}
}

Iki wariantdan haýsynyň bu ýerde has amatlydygy - programmist saýlap alýar. Problemany skriptiň normal işi ýa-da ýagdaý hökmünde kabul edip biler.

Ýagdaýyň ýagdaýdygyny kabul edeliň. Onda önümiň bahasyny alyş kody şeýle görüner:

let product = document.querySelector('#product');

try {
	let cost = getCost(product);
	alert(cost);
} catch (error) {
	// ýagdaýa nädiredir reaksiýa görkezýäris
}

getCost funksiýasy iki görnüşli ýagdaý ýüz tutduryşy üçin meniň kodymy üýtgediň: baha ýok bolsa we mukdar ýok bolsa. Bu ýagdaýlaryň atlary barada gowy oýlaň. catch-blokda, dürli ýagdaý görnüşleri üçin dürli ýalňyş habarlary çykaryň.