Pavyzdys su išimtimis naudojant data- atributus JavaScript

Tegul puslapio užkrovimo metu serveris sukuria HTML kodą, kuriame saugomas pavadinimas, kaina ir nupirktos prekės kiekis:

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

Sukurkime funkciją, kuri priims nuorodą į elementą su preke ir ras bendrą prekės savikainą (kainą padaugintą iš kiekio):

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

Raskime mūsų prekės savikainą:

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

alert(cost);

Dabar tarkime tokią situaciją: dėl kokios nors serverio gedimo jis atsiuntė mums prekę, kurioje trūksta kainos ar kiekio (arba abiejų iš karto), pavyzdžiui, taip:

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

Jei dabar bandysite apskaičiuoti savikainą prekės, rezultatas ekrane bus NaN. Sutikite, nelabai informatyvu.

Pasirodo, mes turime kaip nors apsisaugoti nuo to, kad trūks mums reikalingų atributų. Tai galima padaryti dviem būdais. Pirmas būdas - tai pasakyti, kad tai normalus elgesys ir tiesiog patikrinti if sąlygomis reikalingų atributų buvimą:

javascriptfunction getCost(elem) {
  if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
    return elem.dataset.price * elem.dataset.amount;
  } else {
    return 0; // grąžinsime ką nors, pavyzdžiui, 0 arba null arba false
  }
}

Antras variantas - tai pasakyti, kad atributo data-price arba data-amount trūkumas - yra išimtinė situacija. Tokiu atveju mes mėsime išimtį:

javascriptfunction getCost(elem) {
  if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
    return elem.dataset.price * elem.dataset.amount;
  } else {
    throw {
      name: 'ProductCostError',
      message: 'trūksta kainos ar kiekio prekei'
    };
  }
}

Kuris iš dviejų variantų čia tinkamesnis - tai programuotojo pasirinkimas. Jis gali manyti problemą normaliu scenarijaus veikimu arba išimtine situacija.

Tarkime, nusprendėme, kad situacija yra išimtinė. Tada prekės savikainos gavimo kodas atrodys taip:

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

try {
  let cost = getCost(product);
  alert(cost);
} catch (error) {
  // kaip nors reaguojame į išimtį
}