Người Viết : ViKiMi Editor

Thực hiện Bắt lỗi và Gỡ lỗi trong lập trình jQuery sử dụng lệnh Try … Catch … Finally hiệu quả
Lập trình Website cho phép bạn thực hiện nhiều ý tưởng và mang đến cho cộng đồng. Nhưng khi áp dụng thư viện jQuery có thể bạn gặp nhiều khó khăn hoặc sẽ không biết cách xử lý như thế nào với những trường hợp khó khăn. Công việc lập trình khó điều khiển hơn nếu cứ phải phỏng đoán các lỗi xảy ra. Thực tế cách làm việc sẽ như thế nào khi tìm lỗi?
Thư viện jQuery thật sự có khác biệt so với các ngôn ngữ lập trình về cách xử lý lỗi. Nếu câu hỏi này được đặt ra chắc hẳn bạn cũng không còn bỡ ngỡ nhiều và hướng giải quyết cũng sẽ có.
Lập trình với thư viện jQuery cho phép bạn gỡ lỗi một cách hiệu quả và giống như các ngôn ngữ lập trình hiện đại.
+ Thư viện jQuery cho phép bạn sử dụng lệnh để Try … Catch … Finally để bắt lỗi một cách đơn giản
+ Điều này rất giống với mọi ngôn ngữ lập trình khác
Để làm rõ điều này chúng ta sẽ xem cách sử dụng bắt và gỡ lỗi với thư viện jQuery trong lập trình Website.
SỬ DỤNG TRY … CATCH … FINALLY
Throw, and Try…Catch…Finally
Cú pháp :
try {
Khối lệnh thực thi với try
}
catch(err) {
Khối lệnh để xử lý lỗi sẽ xảy ra
}
finally {
Khối lệnh sẽ thực thi bất kể lỗi có xảy ra hay không
}
+ Câu lệnh try xác định một khối mã để chạy (to try).
+ Câu lệnh catch xác định một khối mã để xử lý bất kỳ lỗi nào.
+ Câu lệnh finally xác định một khối mã sẽ chạy bất kể kết quả như thế nào (Có lỗi hay không có lỗi thì đều thực thi).
+ Câu throw xác định một lỗi tùy chỉnh sẽ được đưa ra.
Chúng ta sẽ xem một vài ví dụ sau đây :
Example 1 ::
$(function () {
// declare function
$.fn.myfunction1 = function () {
try {
$(".tbl_company tr:even").css("background-color", "red");
} catch(err) {
throw err;
} finally {
//code for finally block
}
};
});
$(document).ready(function(){
/** Call Function **/
// $.fn.myfunction();
$(".tbl_company").myfunction();
});
Example 2 ::
$(function () {
$.fn.myfunction2 = function () {
var x = $("input").val();
try {
if( $.trim(x) == "") throw "empty";
if( $.isNumeric(x) ){
// do something
} else throw "not a number";
x = Number(x);
if(x < 5) throw "too low";
if(x > 10) throw "too high";
} catch(err) {
alert("Input is " + err);
}
}
});
$(document).ready(function(){
$("button").click(function(){
$.fn.myfunction2();
});
});
Chúng ta có thể thấy việc sử dụng lệnh Try … Catch … Finally rất đơn giản nhưng mang lại hiệu quả khi lamg việc. Điều này cho phép kiểm soát lỗi rất tốt, đặc biệt với nhưng chương trình mang tính độ lớn.
+ Chúng ta sẽ xem một chương trình đầy đủ như sau :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$.fn.myfunction2 = function () {
var x = $("input").val();
try {
if( $.trim(x) == "") throw "empty";
if( $.isNumeric( $("input").val() ) ){
// do something
} else throw "not a number";
x = Number(x);
if(x < 5) throw "too low";
if(x > 10) throw "too high";
}
catch(err) {
alert("Input is " + err);
}
}
});
$(document).ready(function(){
/** Call Function **/
$("button").click(function(){
$.fn.myfunction2();
});
});
</script>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<input type="text">
<button type="button">Test Input</button>
</body>
</html>
Trên đây là một chương trình hoạt động đầy đủ khi lập trình với thư viện jQuery. Chương trình cho phép bạn kiểm tra các giá trị đầu vào với một input. Chương trình thật dễ dàng phát triển, đặc biệt những lỗi xảy ra bạn đều có thể biết đó là lỗi gì và đưa ra cách xử lý phù hợp nhất.
+ Nếu bạn muốn xem lỗi cụ thể bằng cách xem trên Console của trình duyệt thì bạn cũng có thể dùng lệnh như sau :
Throw “Input is ” + err;
+ Tất cả các lệnh Throw đều mục đích cho phép bạn đưa ra một lỗi tuỳ chỉnh. Như vậy, những phần không có lỗi xảy ra thì bạn hãy lập trình một cách bình thường và phát triển chương trình. Chương trình ví dụ chỉ mang tính tham khảo, thực tế do bạn đưa ra cách phù hợp theo yêu cầu.