Class Selectors trong JavaScript có nên sử dụng?

Chắc hẳn bạn đã từng hoặc rất nhiều lần sử dụng câu lệnh document.querySelector('.class'). Nhưng bạn có biết răng hiện nay, có giải pháp tốt hơn để thay thế câu lệnh trên và mang đến hiệu suất cao hơn nhiều. Đó là gì?

Data Attributes là gì?

Cách tốt hơn để chọn các phần tử là bằng cách sử dụng các thuộc tính dữ liệu (Data Attributes). Nếu bạn chưa quen thuộc với Data Attributes, chúng thực chất là các thuộc tính tùy chỉnh mà bạn có thể thêm vào bất kỳ phần tử HTML nào và luôn bắt đầu bằng "data-". Ví dụ, bạn có thể có một phần tử như sau: <div data-accordion-container>...</div> với thuộc tính data-accordion-container. Bạn cũng có thể chỉ định giá trị cho các Data Attributes tùy chỉnh như sau: <div data-children-count="3">...</div>.

Tại sao việc sử dụng Data Attributes được khuyến khích trong JavaScript? Việc sử dụng Data Attributes sẽ giúp code của bạn tường minh hơn. Vì một Data Attribute có thể có một giá trị, và có thể sử dụng giá trị đó một cách dễ dàng.

Ví dụ, hãy tưởng tượng chúng ta có một phần tử có thể chuyển đổi giữa trạng thái hoạt động và không hoạt động khi được nhấp vào. Nếu sử dụng cách tiếp cận dựa trên lớp (class), thì sẽ cần có một lớp cho trạng thái hoạt động và một lớp cho trạng thái không hoạt động, nó được viết dưới dạng sau:

<div class="active">...</div>
<div class="inactive">...</div>

Điều này sẽ khiến code của bạn khá rối, đặc biệt khi chúng ta phải sử dụng JavaScript để thêm/xóa các lớp, do đó việc loai bỏ các thẻ class này và không có định nghĩa cụ thể của từng thẻ html bằng các thẻ class sẽ làm cho mã JavaScript trở nên sạch hơn và mã HTML sẽ trông giống như sau:

<div>...</div>
<div class="inactive">...</div>

Vấn đề với cách tiếp cận này là bây giờ không rõ ràng rằng phần tử đó đang hoạt động vì không có lớp nào cho biết nó đang hoạt động và bạn cần phải nhớ rằng không có lớp nào có nghĩa là hoạt động. Để khắc phục vấn đề này, chúng ta có thể sử dụng các Data Attributes. Điều này sẽ làm cho các phần tử trông như sau:

<div data-active="true">...</div>
<div data-active="false">...</div>

Đoạn mã HTML mô tả một chức năng cụ thể, và chỉ cần một Data Attribute duy nhất để xử lý nhiều chắc năng theo từng sự kiện mà không cần định nghĩa bới các class riêng biệt.