5 nguyên nhân phổ biến của lỗi JavaScript (và cách tránh chúng)

JavaScript (JS) là ngôn ngữ lập trình phổ biến, linh hoạt và phổ biến rộng rãi, mặc dù vậy, nó cũng dễ bị lỗi và lỗi khiến hầu hết các nhà phát triển cau mày và sợ hãi.


JS được sử dụng rộng rãi để tăng sức mạnh tương tác của 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 có thể là vô hồn và không thể tin được. Tuy nhiên, ngôn ngữ Lướt và chảy đôi khi khiến các nhà phát triển có mối quan hệ yêu-ghét với nó.

Lỗi JavaScript khiến các ứng dụng tạo ra kết quả không mong muốn và gây hại cho trải nghiệm người dùng. Mới đây học bởi Đại học British Columbia (UBC) đã tìm cách tìm ra nguyên nhân gốc và tác động của lỗi và lỗi JavaScript. Kết quả nghiên cứu đã phát hiện ra 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.

Dưới đây là biểu đồ hình tròn cho thấy những gì các nhà nghiên cứu tìm ra:

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 nêu bật trong nghiên cứu (cộng với các nguyên nhân khác mà chúng tôi gặp hàng ngày) và cách làm cho các ứng dụng của bạn ít bị lỗi hơn.

Liên quan đến DOM

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 thao tác nội dung, kiểu và cấu trúc của trang web. Làm cho các trang web HTML đơn giản tương tác với nhau hoặc thao túng DOM 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ả khi giới thiệu các công nghệ JavaScript phụ trợ như Node.js, làm việc với DOM vẫn tạo thành một khối lớn của những gì ngôn ngữ làm. 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.

Nó không ngạc nhiên khi nghiên cứu báo cáo lỗi JavaScript phát hiện ra rằng các vấn đề liên quan đến DOM chịu trách nhiệm cho hầu hết các lỗi, ở mức 68%.

Ví dụ: một số lập trình viên JavaScript thường mắc lỗi khi tham chiếu phần tử DOM trước khi tải xuống, dẫn đến lỗi mã.

document.getEuityById ("thùng đựng hàng") .innerHTML = "Lỗi và lỗi JS phổ biến";

Nếu mã ở trên được chạy trên trình duyệt Chrome, nó sẽ xuất hiện lỗi, có thể thấy trên bảng điều khiển dành cho nhà phát triển:

Lỗi được đưa ra vì mã JavaScript thường được thực thi theo thứ tự xuất hiện trên tài liệu. Như vậy, trình duyệt không biết đến phần tử được tham chiếu khi mã chạy.

Để 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 rằng DOM được tải trước khi có thể truy cập.

document.getEuityById ("thùng đựng hàng") .innerHTML = "Lỗi và lỗi JS phổ biến";

Dựa trên cú pháp

Lỗi cú pháp diễn ra khi trình thông dịch JavaScript không thực thi được mã cú pháp sai. Nếu tạo một ứng dụng và trình thông dịch quan sát các mã thông báo không khớp với cú pháp chuẩn của ngôn ngữ lập trình JavaScript, nó sẽ gây ra lỗi. Theo nghiên cứu báo cáo lỗi JavaScript, các lỗi như vậy chịu trách nhiệm cho 12% tất cả các lỗi trong ngôn ngữ.

Các lỗi ngữ pháp, chẳng hạn như dấu ngoặc đơn bị thiếu hoặc dấu ngoặc không khớp, là nguyên nhân chính gây ra lỗi cú pháp trong JavaScript.

Ví dụ: khi bạn phải sử dụng các câu lệnh có điều kiện để giải quyết nhiều điều kiện, bạn có thể bỏ lỡ việc cung cấp dấu ngoặc đơn theo yêu cầu, dẫn đến lỗi cú pháp.

Hãy để xem xét ví dụ sau đây.

nếu ((x > y) && (y < 77) {
// thêm mã ở đây
}

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 với mã ở trên không?

Hãy để sửa nó.

nếu ((x > y) && (y < 77)) {
// thêm mã ở đây
}

Để tránh các 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 vận chuyển chúng với ứng dụng đã phát triển của bạn.

Việc sử dụng từ khóa không xác định / null không đúng cách

Một số nhà phát triển JavaScript không biết cách sử dụng chưa xác địnhvô giá trị từ khóa chính xác. Trên thực tế, nghiên cứu đã báo cáo rằng việc sử dụng từ khóa không đúng cách chiếm 5% trong tất cả các lỗi JavaScript.

Các vô giá trị từ khóa 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. Thật ngạc nhiên, vô giá trị cũng là một đối tượng JavaScript.

Đây là một ví dụ:

mã varJS = null;

console.log (codeJS);
// đầu ra là null

console.log (typeof codeJS);
// đầu ra là đối tượng

Mặt khác, chưa 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, thiếu giá trị được gán. Nó cũng có thể ngụ ý rằng không có gì đã được tuyên bố. chưa xác định là một loại của chính nó.

Đây là một ví dụ:

mã varJS;

console.log (codeJS);
// đầu ra không xác định

console.log (typeof codeJS);
// đầu ra không xác định

Thậ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 vô giá trịchưa xác định từ khóa, sau này không coi chúng là như nhau.

console.log (null == không xác định);
// đầu ra là đúng

console.log (null === không xác định);
// đầu ra là sai

Do đó, biết sử dụng đúng vô giá trịchưa xác định từ khóa có thể giúp bạn trong việc tránh giới thiệu các lỗi trong chương trình JavaScript của bạn.

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à thực hiện cuộc gọi đến một phương thức mà không cung cấp định nghĩa trước đó. Các nhà nghiên cứu của UBC phát hiện ra rằng lỗi này dẫn đến 4% tất cả các lỗi JavaScript.

Đây là một ví dụ:

bộ mã hóa var = {
Tên: "Peter",
tuổi: 27,
nói() {
console.log (this.name);
}
};
coder.speakNow ();

Đây là lỗi được nhìn thấy trên 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 được gọi, speakNow (), chưa được xác định trong mã JavaScript.

Cách sử dụng không đúng của câu lệnh return

Trong JavaScript, trở về câu lệnh được sử dụng để dừng hoạt động của hàm để có thể xuất ra giá trị của nó. Nếu sử dụng sai, câu lệnh return có thể làm giảm hiệu suất tối ưu của các ứng dụng. Theo nghiên cứu, việc sử dụng sai câu lệnh return dẫn đến 2% tất cả các lỗi trong ứng dụng JavaScript.

Ví dụ: một số lập trình viên JavaScript thường mắc lỗi phá vỡ câu lệnh return.

Mặc dù bạn có thể ngắt một câu lệnh JavaScript thành hai dòng và vẫn nhận được đầu ra cần thiết, nhưng việc phá vỡ câu lệnh return đang mời gọi thảm họa vào ứng dụng của bạn.

Đây là một ví dụ:

số chức năng (n) {
var thêm = 5;
trở về;
n + thêm;
}
console.log (số (10));

Khi đoạn mã trên được chạy, một lỗi không xác định được nhìn thấy trên bảng điều khiển dành cho nhà phát triển Chrome:

Vì vậy, bạn nên thoát khỏi phá vỡ trở về báo cáo trong mã JavaScript của bạn.

Phần kết luận

Ngôn ngữ lập trình JavaScript phía máy khách đi kèm với các khả năng mở rộng tuyệt vời để cung cấp năng lượng cho các 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 các yêu cầu làm cho ngôn ngữ hoạt động, hiệu suất của các ứng dụng của bạn có thể bị tê liệt.

Hơn nữa, Các nhà phát triển JavaScript yêu cầu các công cụ đa năng để khắc phục sự cố hiệu năng của các ứng dụng của họ và nhanh chóng phát hiện lỗi và lỗi.

Do đó, với bộ công cụ kiểm tra toàn diện, bạn có thể tự tin xác định những bất thường làm giảm hiệu suất của trang web của bạn. Nó có những gì bạn cần để cải thiện hiệu suất trang web của bạn và đạt được trải nghiệm người dùng tối ưu.

Chúc mừng lập trình JavaScript không có lỗi!

Bài viết của Alfrick Opidi

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map