Cách xây dựng UX tốt hơn với dữ liệu HTML5- * Thuộc tính
Bạn đã bao giờ muốn thêm dữ liệu tùy chỉnh vào một thành phần HTML cụ thể để sau này truy cập nó bằng JavaScript chưa? Trước khi HTML5 xuất hiện trên thị trường, việc lưu trữ dữ liệu tùy chỉnh được liên kết với DOM là một vấn đề thực sự và các nhà phát triển phải sử dụng tất cả các loại hack khó chịu, chẳng hạn như giới thiệu các thuộc tính không chuẩn hoặc sử dụng phương thức setUserData () lỗi thời để khắc phục sự cố.
May mắn thay, bạn không phải làm như vậy nữa, vì HTML5 đã giới thiệu toàn cầu mới dữ liệu-* các thuộc tính cho phép nhúng thông tin bổ sung vào bất kỳ thành phần HTML nào. Cái mới dữ liệu-* thuộc tính làm cho HTML mở rộng hơn, vì thế cho phép bạn xây dựng các ứng dụng phức tạp hơn, và tạo trải nghiệm người dùng tinh vi hơn mà không phải sử dụng các kỹ thuật sử dụng nhiều tài nguyên như các cuộc gọi Ajax hoặc truy vấn cơ sở dữ liệu phía máy chủ.
Hỗ trợ trình duyệt của các thuộc tính toàn cầu mới tương đối tốt, vì chúng được hỗ trợ bởi tất cả các trình duyệt hiện đại (IE8-10 hỗ trợ một phần cho chúng).
Cú pháp của dữ liệu-* Thuộc tính
Cú pháp của cái mới dữ liệu-* các thuộc tính tương tự như các thuộc tính có tiền tố aria. Bạn có thể chèn bất kỳ chuỗi chữ thường vào vị trí của * ký tên. Bạn cũng cần gán giá trị cho từng thuộc tính dưới dạng chuỗi.
Giả sử bạn muốn tạo một Về chúng tôi và lưu tên của bộ phận nơi mỗi nhân viên làm việc. Bạn không phải làm gì khác ngoài việc thêm bộ phận dữ liệu thuộc tính tùy chỉnh cho thành phần HTML thích hợp theo cách sau:
- John Doe
- Jane Doe
Tập quán dữ liệu-* thuộc tính là toàn cầu, giống như lớp học và ID các thuộc tính, vì vậy bạn có thể sử dụng chúng trên mọi thành phần HTML. Bạn cũng có thể thêm bao nhiêu dữ liệu-* thuộc tính cho một thẻ HTML như bạn muốn. Trong ví dụ trên, ví dụ bạn có thể giới thiệu một thuộc tính tùy chỉnh mới được gọi là người sử dụng dữ liệu lưu trữ tên người dùng của nhân viên.
- John Doe
- Jane Doe
Theo nguyên tắc chung, nếu bạn muốn thêm thuộc tính tùy chỉnh của riêng mình vào thành phần HTML, bạn luôn phải đặt tiền tố cho nó bằng dữ liệu- chuỗi. Tương tự, khi bạn thấy một thuộc tính tiền tố dữ liệu trong mã của người khác, bạn có thể biết chắc chắn đó là thuộc tính tùy chỉnh được giới thiệu bởi tác giả.
Khi nào nên sử dụng và khi nào không sử dụng thuộc tính tùy chỉnh
W3C định nghĩa tùy chỉnh dữ liệu-* các thuộc tính như vậy:
“Thuộc tính dữ liệu tùy chỉnh được dự định để lưu trữ dữ liệu tùy chỉnh riêng tư cho trang hoặc ứng dụng mà không có thuộc tính hoặc yếu tố phù hợp hơn.”
Thật đáng để xem xét sử dụng dữ liệu-* thuộc tính khi bạn không thể tìm thấy bất kỳ thuộc tính ngữ nghĩa nào khác cho dữ liệu bạn muốn lưu trữ.
Đây không phải là ý tưởng tốt nhất để sử dụng chúng cho mục đích tạo kiểu, vì bạn có thể chọn từ lớp học và Phong cách thuộc tính. Nếu bạn muốn lưu trữ một kiểu dữ liệu mà HTML5 có thuộc tính ngữ nghĩa, chẳng hạn như ngày giờ thuộc tính cho phần tử, sử dụng phần tử đó thay cho thuộc tính tiền tố dữ liệu.
Điều quan trọng cần lưu ý là dữ liệu-* thuộc tính giữ dữ liệu đó riêng tư với trang hoặc ứng dụng, điều đó có nghĩa là chúng sẽ bị bỏ qua bởi các tác nhân người dùng, chẳng hạn như bot công cụ tìm kiếm và các ứng dụng bên ngoài. Các thuộc tính tiền tố dữ liệu chỉ có thể được truy cập bằng mã đang chạy trên trang web lưu trữ HTML.
Tập quán dữ liệu-* các thuộc tính được sử dụng rộng rãi bởi các khung frontend, chẳng hạn như Bootstrap và Zurb Foundation. Tin vui là bạn không nhất thiết phải biết cách viết JavaScript nếu bạn muốn sử dụng các thuộc tính có tiền tố dữ liệu như một phần của khung, vì bạn chỉ cần thêm chúng vào mã HTML để kích hoạt chức năng của một plugin JavaScript được viết sẵn.
Đoạn mã dưới đây thêm một chú giải công cụ ở bên trái vào một nút trong Bootstrap bằng cách sử dụng chuyển đổi dữ liệu và vị trí dữ liệu các thuộc tính tùy chỉnh và gán các giá trị phù hợp cho chúng.
Mục tiêu dữ liệu-* Các thuộc tính với CSS
Mặc dù không nên sử dụng dữ liệu-* các thuộc tính chỉ dành cho mục đích tạo kiểu, bạn có thể chọn các thành phần HTML mà chúng thuộc về với sự trợ giúp của các bộ chọn thuộc tính chung. Nếu bạn muốn chọn từng thành phần có thuộc tính tiền tố dữ liệu nhất định, hãy sử dụng cú pháp này trong CSS của bạn:
li [data-user] color: blue;
Lưu ý rằng đó không phải là tên người dùng sẽ được hiển thị màu xanh lam trong đoạn mã ở trên - sau khi tất cả dữ liệu được lưu trữ trong các thuộc tính tùy chỉnh không hiển thị - nhưng tên của nhân viên có trong các yếu tố (trong ví dụ “John Doe” và “Jane Doe”).
Nếu bạn chỉ muốn chọn các phần tử trong đó thuộc tính tiền tố dữ liệu có một giá trị nhất định, đây là cú pháp để sử dụng:
li [data-Division = "IT"] Border: solid blue 1px;
Bạn có thể sử dụng tất cả các bộ chọn thuộc tính CSS phức tạp hơn, chẳng hạn như bộ chọn kết hợp anh chị em chung ([dữ liệu-giá trị ~ = "foo"]) hoặc bộ chọn ký tự đại diện ([giá trị dữ liệu * = "foo"]), với các thuộc tính tiền tố dữ liệu là tốt.
Truy cập dữ liệu-* Các thuộc tính với JavaScript
Bạn có thể truy cập dữ liệu được lưu trữ trong tùy chỉnh dữ liệu-* các thuộc tính với JavaScript bằng cách sử dụng thuộc tính bộ dữ liệu hoặc jQuery dữ liệu() phương pháp.
Vani JavaScript
Các tập dữ liệu tài sản là tài sản của HTMLE bổ sung giao diện, điều đó có nghĩa là bạn có thể sử dụng nó trên bất kỳ thẻ HTML nào. Các tập dữ liệu tài sản cho phép truy cập vào tất cả các tùy chỉnh dữ liệu-* các thuộc tính của phần tử HTML đã cho. Các thuộc tính được trả về như một Bản đồ DOMString đối tượng chứa một mục nhập cho mỗi mục dữ liệu-* thuộc tính.
Trong chúng tôi Về chúng tôi ví dụ trang bạn có thể dễ dàng kiểm tra các thuộc tính tùy chỉnh “Jane Doe” có bằng cách sử dụng tập dữ liệu tài sản theo cách sau:
var jane = document.getEuityById ("jane"); console.log (jane.dataset); // DOMStringMap người dùng: "janedoe", bộ phận: "IT" Bạn có thể thấy rằng trong trả lại Bản đồ DOMString phản đối dữ liệu- tiền tố được xóa khỏi tên của các thuộc tính (người dùng thay vì người sử dụng dữ liệu, và bộ phận thay vì bộ phận dữ liệu). Bạn cần sử dụng các thuộc tính theo cùng định dạng nếu bạn chỉ muốn truy cập giá trị của một thuộc tính tiền tố dữ liệu nhất định (thay vì danh sách tất cả các thuộc tính tùy chỉnh như trong đoạn mã ở trên).
Bạn có thể lấy giá trị của một cụ thể dữ liệu-* thuộc tính như một thuộc tính của tập dữ liệu bất động sản. Như tôi đã đề cập trước đây, bạn cần bỏ qua dữ liệu- tiền tố từ tên của tài sản, vì vậy nếu bạn muốn truy cập giá trị của Jane's người sử dụng dữ liệu thuộc tính, bạn có thể làm theo cách này:
var jane = document.getEuityById ("jane"); console.log (jane.dataset.user) // janedoe jQuery dữ liệu() phương pháp
Các dữ liệu() Phương thức jQuery làm cho nó có thể nhận được giá trị của thuộc tính tiền tố dữ liệu. Ở đây bạn cũng phải bỏ qua dữ liệu- tiền tố từ tên của thuộc tính để truy cập nó đúng cách. Trong ví dụ của chúng tôi, bạn có thể hiển thị một thông báo cảnh báo với tên của bộ phận nơi “Jane” hoạt động với mã sau:
$ ("# jane"). hover (function () var Division = $ ("# jane"). data ("cục"); alert (cục);); Các dữ liệu() phương pháp cần được sử dụng cẩn thận, vì nó không chỉ hoạt động như một phương tiện để lấy giá trị của thuộc tính tiền tố dữ liệu, mà còn gắn dữ liệu vào một phần tử DOM theo cách sau:
var town = $ ("# jane"). dữ liệu ("thị trấn", "New York"); Dữ liệu bổ sung mà bạn đính kèm với jQuery dữ liệu() Phương thức rõ ràng sẽ không xuất hiện trong mã HTML như một phương thức mới dữ liệu-* thuộc tính, vì vậy nếu cả hai kỹ thuật được sử dụng cùng một lúc, phần tử HTML đã cho sẽ lưu trữ hai bộ dữ liệu, một bộ có HTML và bộ kia có jQuery.
Trong ví dụ của chúng tôi “Jane” có dữ liệu tùy chỉnh mới ("thị trấn") với jQuery, nhưng cặp khóa-giá trị mới này sẽ không xuất hiện trong HTML dưới dạng mới thị trấn dữ liệu thuộc tính. Lưu trữ dữ liệu theo hai cách khác nhau không phải là cách tốt nhất để nói ít nhất, vì vậy chỉ sử dụng một trong hai phương pháp cùng một lúc.
Khả năng tiếp cận và dữ liệu-* Thuộc tính
Như dữ liệu được giữ trong tùy chỉnh dữ liệu-* thuộc tính là riêng tư, công nghệ hỗ trợ có thể không thể truy cập nó. Nếu bạn muốn giữ cho nội dung của mình có thể truy cập được đối với người dùng bị vô hiệu hóa, không nên lưu trữ nội dung có thể quan trọng đối với người dùng theo cách này.
