JavaScript-те data- атрибуттерінің мысалымен ерекше жағдайлар

Бет жүктелген кезде сервер HTML кодты жасайды, онда атауы, бағасы және сатып алынған өнімнің саны сақталады:

html<div id="product" data-product="алма" data-price="1000" data-amount="5"></div>

Өнімге сілтемесі бар элементті қабылдайтын және тауардың толық құнын табатын функция жасайық (бағаны санға көбейту):

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

Өніміміздің құнын табайық:

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

alert(cost);

Енді келесі жағдайды елестетейік: сервердегі қандай да бір ақаулықтан ол бізге бағасы немесе саны (немесе екеуі де) жоқ тауар жіберді, мысалы, мынадай:

html<div id="product" data-product="алма" data-price="1000"></div>

Енді тауардың құнын есептеге тырыссак, нәтиже ретінде экранда NaN шығады. Сіз де келісесіз, бұл өте ақпаратты емес.

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

javascriptfunction 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 атрибуттарының жоқ болуы - ерекше жағдай деп айту. Бұл жағдайда біз ерекше жағдайды құрастырамыз:

javascriptfunction getCost(elem) {
  if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
    return elem.dataset.price * elem.dataset.amount;
  } else {
    throw {
      name: 'ProductCostError',
      message: 'өнімнің бағасы немесе саны жоқ'
    };
  }
}

Осы екі нұсқаның қайсысын қолдану дұрыс - бұл бағдарламашының таңдауы. Ол мәселені скрипттің қалыпты жұмысы немесе ерекше жағдай деп есептей алады.

Біз жағдайды ерекше деп шештік делік. Сонда тауар құнын алу коды мынадай болады:

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

try {
  let cost = getCost(product);
  alert(cost);
} catch (error) {
  // ерекше жағдайға қандай да бір реакция
}