Các phương pháp hay nhất để liên kết dữ liệu với các đối tượng HTMLElement?

Question

Tôi đi qua 3 cách để lưu trữ bất kỳ dữ liệu nào với đối tượng HTMLElement.

Ai đó có thể đề xuất phương pháp hay nhất để liên kết bất kỳ dữ liệu nào với đối tượng phần tử không?

Tôi thích số 3 vì nó không đặt bất kỳ thuộc tính HTML nào như trong trường hợp 1 và 2. Giống như cài đặt và nhận bất kỳ thuộc tính nào trên đối tượng.

1. Sử dụng setAttribute ('nonStandardDataProperty')
2. Sử dụng tài sản dữ liệu của phần tử html đối tượng ví dụ dataset.x cho dữ liệu xattribute
3. phần tử html là đối tượng, vì vậy xác định bất kỳ tài sản và nó sẽ đóng vai trò lưu trữ dữ liệu cho phần tử đó

Answer 1

Tùy chọn # 2 dường như với tôi là "tuân thủ tiêu chuẩn" nhất, nếu đó là những gì bạn đang tìm kiếm; Ngoài ra, nó cho phép bạn thiết lập các thuộc tính đó từ bên trong HTML trong khi vẫn duy trì đánh dấu hợp lệ. Nó thường là sở thích của tôi, nhưng nó thực sự bất cứ điều gì làm việc tốt nhất cho bạn trong tình huống của bạn: nếu nó hoạt động, đi với nó.

Answer 2

Tùy chọn thứ ba là lưu trữ dữ liệu trong DOM có thể không phải là ý tưởng tồi nếu dữ liệu không lớn. Nếu có, lưu trữ và truy xuất dữ liệu có thể ảnh hưởng đến hiệu suất của ứng dụng.

Answer 3

Twitter Bootstrap sử dụng tùy chọn một.

Hãy xem tài liệu Twitter Bootstrap, bạn sẽ thấy sử dụng nhiều dữ liệu lưu trữ trong các phần tử html thuộc tính không chuẩn.

dụ

<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel"> 
    ... 
</ul> 


<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 

Answer 4

tôi sẽ sử dụng tùy chọn # 1 vì đó là di động nhất.

Tuy nhiên, tôi sẽ sử dụng tiền tố data- của HTML5 cho các thuộc tính tùy chỉnh đó để tương thích với phương thức .data() của jQuery.

Answer 5

Tôi đoán cách tốt nhất là sử dụng dữ liệu HTML5- * Thuộc tính và hàm .data() của jQuery. Nó có thể sẽ có cách tốt nhất để lưu trữ dữ liệu trong các phần tử HTML built-in và cập nhật các công nghệ mới nhất trong tương lai, vì vậy bạn có thể tựa lưng và chỉ được sản xuất

<div id="myDiv" data-my-var="my-var-value"></div>

thể được sử dụng trong JavaScript như thế này : (jQuery cần)

console.log($('#myDiv').data('my-var'))

Edit: và thiết lập như thế này

$('#myDiv').data('my-var', 'my-new-var-value');

đó cũng sẽ cập nhật các đĩa dữ liệu * thuộc tính trong trường hợp này

Answer 6

Lựa chọn 4: lưu trữ định danh trên DOMNode mà bạn có thể sử dụng để tìm kiếm mọi thứ trong một bản đồ tách ra (vâng, đây là cách jQuery làm nó - trên tất cả các thuộc tính data- * trong init, tất nhiên).

Đi với # 3 là tốt nếu bạn nhớ tên thuộc tính của mình. # 2 chỉ nên cho phép các giá trị Integer và String, # 1 có thể có cùng một vấn đề.

Tôi muốn đi với số 4, đơn giản vì tôi không thích tỷ lệ cược của thông số mới xuất hiện và tuyên bố tên thuộc tính tôi đã sử dụng cho dữ liệu của riêng mình…