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

สมมติว่าเมื่อโหลดหน้าเสร็จ เซิร์ฟเวอร์สร้าง โค้ด HTML ขึ้นมา ซึ่งเก็บชื่อ ราคา และจำนวนของสินค้าที่ซื้อไว้:

<div id="product" data-product="แอปเปิ้ล" data-price="1000" data-amount="5"></div>

ลองสร้างฟังก์ชันที่จะรับ ลิงก์ไปยังองค์ประกอบสินค้าและค้นหา ราคาสินค้ารวมทั้งหมด (ราคาคูณกับ จำนวน):

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

ลองหาต้นทุนสินค้าของเรา:

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

alert(cost);

สมมติสถานการณ์ต่อไปนี้: เนื่องจาก ข้อผิดพลาดบางอย่างบนเซิร์ฟเวอร์ มันส่ง สินค้าที่ไม่มีราคาหรือจำนวน (หรือทั้งสองอย่าง) มาให้เรา ตัวอย่างเช่น:

<div id="product" data-product="แอปเปิ้ล" data-price="1000"></div>

หากตอนนี้ลองคำนวณต้นทุน สินค้า ผลลัพธ์บนหน้าจอจะแสดง NaN ให้เห็น คุณคงเห็นว่า ไม่ค่อยให้ข้อมูลเท่าไหร่

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

function 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 เป็นสถานการณ์พิเศษ ในกรณีนี้ เราจะโยนข้อยกเว้น:

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		throw {
			name: 'ProductCostError',
			message: 'ราคาหรือจำนวนของสินค้าหายไป'
		};
	}
}

ควรใช้ตัวเลือกใดจากสองตัวเลือกนี้ - นั่นเป็นทางเลือกของโปรแกรมเมอร์ เขาอาจถือว่า ปัญหานี้เป็นงานปกติของสคริปต์หรือเป็นสถานการณ์พิเศษ

สมมติว่าเราตัดสินใจว่าสถานการณ์นี้เป็นพิเศษ ดังนั้นโค้ดการรับต้นทุนสินค้าจะ มีหน้าตาดังนี้:

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

try {
	let cost = getCost(product);
	alert(cost);
} catch (error) {
	// ตอบสนองต่อข้อยกเว้นในบางวิธี
}

ปรับเปลี่ยนโค้ดของฉัน เพื่อให้ฟังก์ชัน getCost โยนข้อยกเว้นสองประเภท: หากราคาหายไป และหากจำนวนหายไป ให้คิดให้ดี เกี่ยวกับชื่อของข้อยกเว้นเหล่านี้ ในบล็อก catch ให้แสดงข้อความแจ้ง ข้อผิดพลาดที่แตกต่างกันสำหรับข้อยกเว้นประเภทต่าง ๆ