JScript Katana

Hiểu về void 0 và javascript:void(0) trong JavaScript: Cách sử dụng an toàn, ví dụ và các giải pháp thay thế hiện đại

Hàm tiện ích khác
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. Giới thiệu

JavaScript là một ngôn ngữ lập trình thiết yếu trong phát triển web hiện đại. Đặc biệt, khi điều khiển hành vi liên kết hoặc xử lý các giá trị chưa định nghĩa, các biểu thức như “void 0” và “javascript:void(0)” thường được sử dụng.
Những biểu thức này có thể gây nhầm lẫn cho người mới bắt đầu, nhưng việc sử dụng chúng đúng cách có thể cải thiện cả khả năng đọc và chức năng. Bài viết này giải thích ý nghĩa và các trường hợp sử dụng của “void 0” và “javascript:void(0)” và giới thiệu các thực tiễn tốt nhất trong môi trường phát triển hiện đại.
Khi đọc bài này, bạn sẽ học được:

  • “void 0” là gì và vai trò của nó
  • Các ví dụ sử dụng và mục đích của “javascript:void(0)”
  • Các phương pháp triển khai hiện đại bằng các lựa chọn an toàn hơn

Tiếp theo, chúng ta sẽ đi qua các kiến thức cơ bản và ví dụ thực tế về “void 0” trong JavaScript.

2. “void 0” là gì?

Vai trò cơ bản của “void 0”

“void 0” được viết như sau:

console.log(void 0); // undefined

Mã này luôn trả về “undefined”.

Khác biệt so với undefined

Trong JavaScript, undefined là một biến và có thể bị ghi đè một cách không mong muốn. Ví dụ:

var undefined = "test";
console.log(undefined); // "test"

Nếu undefined bị ghi đè, nó sẽ mất ý nghĩa gốc.
Để tránh điều này, “void 0” truyền thống được dùng như một cách đảm bảo trả về “undefined”.

Ví dụ sử dụng

Dưới đây là một ví dụ về việc trả về “undefined” một cách rõ ràng từ một hàm.

function example() {
  return void 0;
}

console.log(example()); // undefined

Các trường hợp sử dụng thực tế của “void 0”

  1. Kiểm tra giá trị chưa khởi tạo
    var value = void 0;
console.log(value === undefined); // true
  1. Kiểm soát liên kết an toàn
    <a href="javascript:void(0)">Link</a>

Trong ví dụ này, việc nhấp vào liên kết sẽ không điều hướng tới trang khác.

3. Ý nghĩa và cách dùng javascript:void(0)

javascript:void(0) là gì?

javascript:void(0) sử dụng toán tử “void” của JavaScript để trả về “undefined”.

<a href="javascript:void(0)">A link that does not navigate</a>

Khi nhấp vào đoạn mã này, sẽ không có chuyển hướng trang hay hành động nào xảy ra.

Các ví dụ sử dụng

  1. Thực thi JavaScript khi nhấn nút
    <a href="javascript:void(0)" onclick="alert('Clicked!')">Button</a>
  1. Kiểm tra hợp lệ của biểu mẫu
    <a href="javascript:void(0)" onclick="validateForm()">Submit</a>

Ở đây, việc chuyển trang sẽ bị ngăn chặn cho đến khi kiểm tra hợp lệ của biểu mẫu hoàn tất.

4. Vấn đề và rủi ro của javascript:void(0)

Tác động tiêu cực đến SEO

Các công cụ tìm kiếm có thể không thu thập đúng các liên kết sử dụng scheme javascript:.
Đối với các trang web quan tâm đến SEO, nên tránh thực hành này.

Giảm khả năng truy cập

Trình đọc màn hình có thể xem “javascript:void(0)” như một liên kết bình thường, dẫn đến hành vi không rõ ràng cho người dùng dựa vào công nghệ hỗ trợ.

Vấn đề khi JavaScript bị tắt

Nếu JavaScript bị tắt, “javascript:void(0)” sẽ không hoạt động chút nào, gây trải nghiệm người dùng suy giảm.

5. Các lựa chọn thay thế cho javascript:void(0)

1. Sử dụng thẻ <button>

Việc dùng phần tử button duy trì cấu trúc HTML đúng chuẩn đồng thời cho phép kiểm soát đầy đủ bằng JavaScript.

<button type="button" onclick="alert('Clicked!')">Click</button>

2. Kết hợp thẻ <a> với event.preventDefault()

<a href="#" onclick="event.preventDefault(); alert('Clicked!')">Click</a>

Phương pháp này ngăn việc chuyển trang bằng JavaScript trong khi vẫn giữ href="#" để tương thích với SEO và khả năng truy cập.

6. Tóm tắt về javascript:void(0)

Tổng kết các điểm chính

  • “javascript:void(0)” vô hiệu hoá hành vi mặc định của liên kết và chỉ thực thi các sự kiện JavaScript.
  • Tuy nhiên, nó có nhược điểm về SEO và khả năng truy cập, khiến nó không phù hợp cho phát triển hiện đại.
  • Các lựa chọn an toàn và linh hoạt hơn bao gồm việc sử dụng thẻ <button> hoặc event.preventDefault().

7. Các thực tiễn tốt nhất được đề xuất

1. Duy trì cấu trúc HTML có ngữ nghĩa

Use meaningful and semantically appropriate HTML tags (e.g., <button>, <form>) to ensure proper SEO and accessibility.

2. Quản lý Kiểm soát Sự kiện trong JavaScript

Sử dụng các trình lắng nghe sự kiện và preventDefault() để xử lý tương tác một cách linh hoạt và hiện đại.

3. Di chuyển ra khỏi Mã Legacy

Nếu mã hiện có sử dụng “javascript:void(0)”, hãy cân nhắc thay thế dần bằng các giải pháp hiện đại.

8. Kết luận

Tổng kết chính

  • “void 0” luôn trả về “undefined”, giúp ngăn ngừa việc ghi đè không mong muốn lên giá trị toàn cục undefined.
  • “javascript:void(0)” vô hiệu hoá việc điều hướng liên kết và được dùng để kiểm soát việc thực thi JavaScript, nhưng lại gây ra các vấn đề về SEO và khả năng truy cập.
  • Phát triển web hiện đại khuyến nghị sử dụng các thẻ HTML ngữ nghĩa và preventDefault() để đạt được hành vi an toàn, tuân thủ tiêu chuẩn.

Lời khuyên cuối cùng

Mặc dù “void 0” và “javascript:void(0)” đã từng là những kỹ thuật hữu ích trong quá khứ, chúng không luôn là lựa chọn lý tưởng trong phát triển JavaScript hiện đại.
Đối với các dự án mới, nên áp dụng các phương pháp cập nhật, ưu tiên SEO, khả năng truy cập và khả năng bảo trì.
Xây dựng hiểu biết vững chắc về những khái niệm này và áp dụng chúng một cách hiệu quả trong phát triển thực tế.

広告