জাভাস্ক্রিপ্টে data- অ্যাট্রিবিউট সহ একটি এক্সেপশন উদাহরণ

পৃষ্ঠা লোড হওয়ার সময় সার্ভারটি 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 দেখাবে। এটা খুব তথ্যপূর্ণ নয়, আপনি কি同意 করেন?

এর মানে হল, আমাদের প্রয়োজনীয় অ্যাট্রিবিউটগুলি অনুপস্থিত থাকার থেকে নিজেদের রক্ষা করতে হবে। এটি দুটি উপায়ে করা যেতে পারে। প্রথম উপায় হল এটিকে স্বাভাবিক আচরণ বলে ধরে নেওয়া এবং কেবল if দিয়ে প্রয়োজনীয় অ্যাট্রিবিউটগুলির উপস্থিতি পরীক্ষা করা:

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

দ্বিতীয় বিকল্প হল বলা যে 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 ব্লকে, বিভিন্ন ধরনের এক্সেপশনের জন্য ত্রুটির বিভিন্ন বার্তা প্রদর্শন করুন।