Näide eranditest data-atribuutidega JavaScriptis

Oletagem, et lehe laadimisel loob server HTML koodi, kus on salvestatud toote nimetus, hind ja ostetud kogus:

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

Teeme funktsiooni, mis võtab vastu viite tootega elemendile ja leiab kauba kogumaksumuse (hind korrutatud kogusega):

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

Leiame oma toote maksumuse:

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

alert(cost);

Oletagem nüüd järgmist olukorda: mingi tõrke tõttu serveris saatis ta meile toote, millest puudub hind või kogus (või mõlemad korraga), näiteks nii:

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

Kui nüüd proovida arvutada toote maksumust, siis ekraanile kuvatakse tulemuseks NaN. Nõustu, mitte eriti informatiivne.

Selgub, et peame kuidagi end kaitsma selle eest, et vajalikud meile atribuudid puuduvad. Seda saab teha kahel viisil. Esimene viis on öelda, et see on normaalne käitumine ja lihtsalt kontrollida if-idega vajalike atribuutide olemasolu:

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		return 0; // tagastame midagi, näiteks 0 või null või false
	}
}

Teine variant on öelda, et atribuudi data-price või data-amount puudumine - on erandlik olukord. Sel juhul viskame me erandi:

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		throw {
			name: 'ProductCostError',
			message: 'tootelt puudub hind või kogus'
		};
	}
}

Kumb kahest variandist on siin sobivam rakendada - on programmeerija valik. Ta võib pidada probleemi skripti normaalseks tööks või erandlikuks olukorraks.

Oletagem, et me otsustasime, et olukord on erandlik. Siis näeb toote maksumuse saamise kood välja selline:

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

try {
	let cost = getCost(product);
	alert(cost);
} catch (error) {
	// reageerime kuidagi erandile
}

Muutke minu kood nii, et funktsioon getCost viskaks kaht tüüpi erandeid: kui puudub hind ja kui puudub kogus. Mõelge hästi nende erandite nimede üle. Plokis catch kuvage erinevate erandite tüüpide kohta erinevad veateated.