ตัวอย่างข้อยกเว้นด้วย data- attributes ใน JavaScript

สมมติว่าเมื่อโหลดหน้าเสร็จ เซิร์ฟเวอร์สร้าง โค้ด 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 ให้เห็น คุณคงเห็นว่า ไม่ค่อยให้ข้อมูลเท่าไหร่

ปรากฏว่า เราต้องป้องกัน ไม่ให้ attribute ที่ต้องการของเราขาดหายไป ซึ่งสามารถทำได้สองวิธี วิธีแรก คือ บอกว่านี่เป็นพฤติกรรมปกติ และเพียงตรวจสอบด้วย if ว่ามี attribute ที่เราต้องการหรือไม่:

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
  }
}

ตัวเลือกที่สอง คือ บอกว่าการขาดหายไปของ attribute 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) {
  // ตอบสนองต่อข้อยกเว้นในบางวิธี
}