JavaScript (JS) là một ngôn ngữ lập trình phổ biến, linh hoạt và rất phổ biến — mặc dù nó cũng dễ có lỗi và lỗi khiến hầu hết các lập trình viên cau mày và lo lắng.
JS được sử dụng rộng rãi để hỗ trợ tương tác người dùng phía máy khách của hầu hết các ứng dụng web. Không có JavaScript, có lẽ mọi thứ trên web sẽ chết và không hấp dẫn. Tuy nhiên, sự lên xuống của ngôn ngữ đôi khi khiến các lập trình viên có mối quan hệ yêu-ghét với nó.
Lỗi JavaScript khiến ứng dụng tạo ra kết quả không mong muốn và gây hại cho người dùng. Một nghiên cứu của Đại học British Columbia (UBC) đã tìm cách hiểu nguyên nhân gốc rễ và tác động của lỗi và lỗi JavaScript. Kết quả của nghiên cứu đã tiết lộ một số mẫu phổ biến làm giảm hiệu suất của các chương trình JS.
Trong bài đăng trên blog này, chúng tôi sẽ minh họa một số nguyên nhân phổ biến gây ra lỗi JavaScript được xác định trong nghiên cứu (và những nguyên nhân khác mà chúng tôi gặp phải hàng ngày) và các cách để giảm khả năng ứng dụng của bạn dễ bị treo.
Mô hình đối tượng tài liệu (DOM) đóng một vai trò quan trọng trong tính tương tác của các trang web. Giao diện DOM cho phép bạn thao tác nội dung, phong cách và cấu trúc của trang web. Làm cho các trang web HTML đơn giản có tính tương tác—hoặc thao tác với DOM—là lý do tại sao ngôn ngữ lập trình JavaScript được phát hành.
Vì vậy, ngay cả với sự ra đời của các công nghệ JavaScript phụ trợ như Node.js, làm việc với DOM vẫn là một phần quan trọng trong công việc của ngôn ngữ này. Do đó, DOM là một con đường quan trọng để giới thiệu các lỗi và lỗi trong các ứng dụng JavaScript.
Không có gì ngạc nhiên khi một nghiên cứu về báo cáo lỗi của JavaScript cho thấy các vấn đề về DOM là nguyên nhân gây ra phần lớn các lỗi (68%).
Ví dụ: một số lập trình viên JavaScript thường mắc lỗi khi tham chiếu một phần tử DOM trước khi nó được tải, dẫn đến lỗi mã.
Nếu đoạn mã trên được chạy trong Chrome, nó sẽ báo lỗi mà bạn có thể thấy trong bảng điều khiển dành cho nhà phát triển:
Lỗi được báo cáo vì mã JavaScript thường được thực thi theo thứ tự xuất hiện trong tài liệu. Do đó, trình duyệt không biết về mục được tham chiếu
khi chạy mã.
Để giải quyết vấn đề như vậy, bạn có thể sử dụng các phương pháp khác nhau. Phương pháp đơn giản nhất là đặt
trước khi bắt đầu thẻ script. Bạn cũng có thể sử dụng thư viện JavaScript như jQuery để đảm bảo DOM được tải trước khi có thể truy cập.
<!DOCTYPE html>
<html>
<body>
<div id="container"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
document.getElementById("container").innerHTML = "Common JS Bugs and Errors";
</script>
</body>
</html>dựa trên cú pháp
Lỗi cú pháp xảy ra khi trình thông dịch JavaScript không thể thực thi mã không đúng cú pháp. Nếu trình thông dịch nhìn thấy các mã thông báo không tuân theo cú pháp tiêu chuẩn của ngôn ngữ lập trình JavaScript trong quá trình phát triển ứng dụng, nó sẽ phát sinh lỗi. Theo nghiên cứu báo cáo lỗi JavaScript, những lỗi như vậy chiếm 12% tổng số lỗi trong ngôn ngữ.
Các lỗi ngữ pháp như thiếu dấu ngoặc đơn hoặc dấu ngoặc đơn không khớp là nguyên nhân chính gây ra lỗi cú pháp trong JavaScript.
Ví dụ, khi cần sử dụng câu điều kiện để chỉ nhiều điều kiện, bạn có thể bỏ qua dấu ngoặc đơn bắt buộc, dẫn đến lỗi cú pháp.
Hãy xem ví dụ sau.
if((x > y) && (y < 77) {
//more code here
}Có, dấu ngoặc đơn cuối cùng của câu lệnh điều kiện bị thiếu. Bạn có nhận thấy lỗi trong đoạn mã trên không?
Hãy sửa nó.
if ((x > y) && (y < 77)) {
//more code here
}Để tránh những lỗi cú pháp như vậy, bạn nên dành thời gian tìm hiểu các quy tắc ngữ pháp của ngôn ngữ lập trình JavaScript. Với thực hành mã hóa rộng rãi, bạn có thể dễ dàng phát hiện ra các lỗi ngữ pháp và tránh gửi chúng cùng với ứng dụng của mình.
Sử dụng sai từ khóa không xác định/từ khóa trống
Một số lập trình viên JavaScript không biết cách sử dụng chính xác các từ khóa không xác định và null. Trên thực tế, nghiên cứu cho thấy việc sử dụng sai từ khóa chiếm 5% của tất cả các lỗi JavaScript.
Từ khóa null là một giá trị gán thường được gán cho một biến để biểu thị một giá trị không tồn tại. Đáng ngạc nhiên, null cũng là một đối tượng JavaScript.
Đây là một ví dụ:
var codeJS = null;
console.log(codeJS);
//output is null
console.log(typeof codeJS);
//output is objectMặt khác, không xác định chỉ ra rằng một biến hoặc bất kỳ thuộc tính nào khác đã được khai báo không có giá trị được gán cho nó. Nó cũng có thể có nghĩa là không có gì đã được khai báo. không xác định là một loại của chính nó.
Đây là một ví dụ:
var codeJS;
console.log(codeJS);
//output is undefined
console.log(typeof codeJS);
//output is undefinedThật thú vị, nếu toán tử đẳng thức và toán tử nhận dạng được sử dụng để so sánh các từ khóa null và không xác định, thì toán tử sau không coi chúng bằng nhau.
console.log(null==undefined); //output is true console.log(null===undefined); //output is false
Do đó, biết cách sử dụng đúng từ khóa null và undefined có thể giúp bạn tránh lỗi trong chương trình JavaScript của mình.
phương pháp không xác định
Một nguyên nhân phổ biến khác gây ra lỗi trong JavaScript là gọi một phương thức mà không đưa ra định nghĩa trước cho nó. Các nhà nghiên cứu tại UBC phát hiện ra rằng lỗi này dẫn đến 4% của tất cả các lỗi JavaScript.
Đây là một ví dụ:
var coder = {
name: "Peter",
age: 27,
speak() {
console.log(this.name);
}
};
coder.speakNow();Đây là lỗi nhìn thấy trong bảng điều khiển dành cho nhà phát triển Chrome:
Lỗi trên xảy ra do hàm speakNow() được gọi không được xác định trong mã JavaScript.
Sử dụng sai câu lệnh return
Trong JavaScript, câu lệnh return được sử dụng để ngăn một hàm chạy để giá trị của nó có thể được hiển thị. Nếu bị lạm dụng, câu lệnh return có thể làm giảm hiệu suất ứng dụng tối ưu. Theo nghiên cứu, việc sử dụng sai câu lệnh return dẫn đến 2% của tất cả các lỗi trong các ứng dụng JavaScript.
Ví dụ, một số lập trình viên JavaScript thường mắc lỗi ngắt câu lệnh return không chính xác.
Mặc dù bạn có thể chia câu lệnh JavaScript thành hai dòng mà vẫn nhận được đầu ra cần thiết, nhưng việc phá vỡ câu lệnh return sẽ dẫn đến thảm họa trong ứng dụng của bạn.
Đây là một ví dụ:
function number(n) {
var add = 5;
return;
n + add;
}
console.log(number(10));Khi tôi chạy đoạn mã trên trong bảng điều khiển dành cho nhà phát triển Chrome, tôi gặp lỗi không xác định:
Do đó, bạn nên hạn chế vi phạm câu lệnh trả về trong mã JavaScript.
Đăng kí
Ngôn ngữ lập trình JavaScript phía máy khách cung cấp các khả năng tuyệt vời, mạnh mẽ để hỗ trợ chức năng của các ứng dụng web hiện đại. Tuy nhiên, nếu bạn không hiểu những điều kỳ quặc khiến ngôn ngữ này hoạt động, hiệu suất của các ứng dụng của bạn có thể bị tê liệt.
Ngoài ra, các nhà phát triển JavaScript yêu cầu các công cụ toàn diện để khắc phục các vấn đề về hiệu suất của ứng dụng và phát hiện lỗi một cách nhanh chóng.
Do đó, với một bộ công cụ kiểm tra toàn diện, bạn có thể tự tin xác định các điểm bất thường đang làm giảm hiệu suất trang web của mình. Đây là những gì bạn cần để cải thiện hiệu suất của trang web và đạt được trải nghiệm người dùng tối ưu.
Chúc bạn lập trình JavaScript hoàn hảo!
Bài báo được viết bởi Alfrick Opidi
