Làm thế nào để truyền dữ liệu (Data Binding/Storage) an toàn gắn liền với một phần tử DOM mà không làm ô nhiễm thuộc tính HTML bằng jQuery?

Question

Accepted Answer

Phân tích bản chất
Trước đây, lập trình viên thường dùng các thuộc tính tùy chỉnh trên HTML (như data-* hoặc tự chếattr('custom-id', 123)) để lưu trữ trạng thái dữ liệu. Cách này có nhược điểm là làm lộ dữ liệu ra DOM, khó quản lý kiểu dữ liệu phức tạp (chỉ lưu được chuỗi) và dễ gây xung đột.
Giải pháp với jQuery
Phương thức .data() của jQuery cung cấp một cơ chế lưu trữ dữ liệu nội bộ gắn liền với đối tượng DOM thông qua hệ thống cache nội bộ của jQuery, hoàn toàn tách biệt với thuộc tính HTML attributes.
Ví dụ minh họa
// Lưu trữ dữ liệu phức tạp (Object, Array, Function) vào phần tử DOM
const userData = { id: 42, role: 'Admin', permissions: ['read', 'write'] };
$('#userProfileCard').data('userInfo', userData);

// Đọc dữ liệu đã lưu
const currentUser = $('#userProfileCard').data('userInfo');
console.log(currentUser.role); // In ra: Admin

// Xóa dữ liệu khi không còn dùng đến
$('#userProfileCard').removeData('userInfo');
Lưu ý thực chiến
Cần phân biệt rõ giữa hàm .data() và thuộc tính HTML5 data-* attributes. Khi bạn dùng $('#el').data('foo', 'bar'), giá trị này nằm trong bộ nhớ JavaScript của jQuery. Nếu bạn thay đổi trực tiếp trên HTML bằngattr('data-foo', 'baz'), jQuery có thể tự động đồng bộ trong một số phiên bản, nhưng việc lạm dụng cả hai mà không phân định rõ sẽ gây khó khăn khi debug. Hãy sử dụng .data() làm kho chứa trạng thái ứng dụng cấp độ client cho các thành phần UI.

Làm thế nào để truyền dữ liệu (Data Binding/Storage) an toàn gắn liền với một phần tử DOM mà không làm ô nhiễm thuộc tính HTML bằng jQuery?

Phân tích bản chất

Làm Chủ Phỏng Vấn & Nâng Cao Trình Độ Chuyên Nghiệp

Tải Tuyển Tập 100+ Câu Hỏi Phỏng Vấn Chuyên Sâu (PDF)

Cần Mentor Phỏng Vấn Thử 1-1 & Tối Ưu CV?

Kiểm Tra CV Chuẩn ATS Miễn Phí

Câu hỏi jquery liên quan cùng chủ đề