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 чыгат. Маалыматтуу эмес, туурабы?

Демек, бизге керектүү атрибуттардын жок болушунан коргонуу керек. Муну эки жол менен жасаса болот. Биринчи жол - бул кадимки жүрүм-турум деп айтуу жана керектүү атрибуттардын бар экенин if'тер менен текшерүү:

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) {
  // көрсөтүлгөнгө кандайдыр бир жооп беребиз
}