5 Nguyên nhân Phổ biến của Lỗi JavaScript (và Cách Tránh Chúng)

Spread the love

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ù ngôn ngữ này cũng dễ mắc lỗi và lỗi khiến hầu hết các nhà phát triển cau mày và lo lắng.

JS được sử dụng rộng rãi để tăng cường khả năng 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 sẽ vô hồn 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 nhà phát triể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 trải nghiệm người dùng. Một nghiên cứu của Đại học British Columbia (UBC) đã tìm cách tìm ra nguyên nhân gốc rễ và tác động của các lỗi và lỗi JavaScript. Kết quả của 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à một biểu đồ hình tròn cho thấy những gì các nhà nghiên cứu đã phát hiện 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 những nguyên nhân khác mà chúng tôi gặp phải hàng ngày) và cách làm cho ứ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, 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—chính 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, việc làm việc với DOM vẫn tạo nên một phần lớn những gì ngôn ngữ này thực hiện. 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.

  Tôi nên sử dụng cài đặt máy ảnh nào cho ảnh thể thao?

Không có gì 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 tham chiếu phần tử DOM trước khi nó được tải, dẫn đến lỗi mã.

<!DOCTYPE html>
<html>
<body>
        <script>        
	document.getElementById("container").innerHTML = "Common JS Bugs and Errors";
    </script>
    <div id="container"></div>
    </body>
</html>

Nếu đoạn mã trên được chạy trên trình duyệt Chrome, nó sẽ xuất hiện một lỗi, bạn có thể thấy lỗi nà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. Do đó, trình duyệt không biết về 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 nhiều cách tiếp cận khác nhau. Phương pháp đơn giản nhất là đặt

trước phần đầu của 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.

<!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ực thi một mã không chính xác về mặt cú pháp. Nếu tạo một ứng dụng và trình thông dịch nhận thấy 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, những lỗi như vậy gây ra 12% tổng số lỗi trong ngôn ngữ.

Sai lầm về ngữ pháp, chẳng hạn như thiếu dấu ngoặc đơn hoặc dấu ngoặc không khớp, là những 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âu lệnh điều kiện để giải quyết nhiều điều kiện, bạn có thể bỏ sót 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 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 với đ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 học 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 đã phát triển của mình.

  Cách tải lên Xbox Custom Gamerpic

Sử dụng không đúng từ khóa không xác định/null

Một số nhà phát triể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 đã báo cáo rằng việc sử dụng từ khóa không đúng cách chiếm 5% tổng số 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 object

Mặ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, thiếu giá trị được gán. Nó cũng có thể ngụ ý rằng 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 undefined

Thật thú vị, nếu toán tử đẳng thức và toán tử định danh được sử dụng để so sánh các từ khóa null và không xác định, thì từ khóa sau không coi chúng là 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 chính xác các từ khóa null và không xác định có thể giúp bạn tránh đưa ra các 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 cung cấp định nghĩa trước của nó. 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% trong 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 đượ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.

Sử dụng câu lệnh trả lại không đúng cách

Trong JavaScript, câu lệnh return được sử dụng để dừng chạy một hàm để giá trị của nó có thể được xuất ra. 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ổng số lỗi trong các ứng dụng JavaScript.

  Cách sử dụng Systemd để liệt kê các dịch vụ

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ể ngắt câu lệnh JavaScript thành hai dòng mà vẫn nhận được kết quả đầu ra cần thiết, nhưng việc phá vỡ câu lệnh trả về đang mời gọi thảm họa vào ứ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 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:

Do đó, bạn nên ngừng phá vỡ các câu lệnh trả về trong mã JavaScript của mình.

Sự 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 nguyên tắc 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, Nhà phát triển JavaScript yêu cầu các công cụ linh hoạt để khắc phục sự cố hiệu suất của các ứng dụng của họ và phát hiện lỗi và sai sót 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 những điểm bất thường làm ảnh hưởng đến hiệu suất của trang web của bạn. Đó là những gì bạn cần để cải thiện hiệu suất trang web của mình và đạt được trải nghiệm người dùng tối ưu.

Chúc bạn lập trình JavaScript không có lỗi!

Bài viết do Alfrick Opidi viết

x