jQuery: Sử dụng attr với thuộc tính tuỳ chỉnh

Question

Ngay bây giờ tôi đang làm điều không hợp lệ khác nhau như:

<span time="50" distance="60"></span> 

Và sau đó grabbing rằng thông tin với:

var time = $('span').attr('time'); 
var distance = $('span').attr('distance'); 

Và sau đó làm những việc khác nhau với thời gian và khoảng cách trong jS/jQuery.

Với tôi, điều này cảm thấy sai. Đó là insemantic, nhưng tôi thực sự không thể quan tâm hơn về điều đó (dữ liệu thực tế không phải là thời gian và khoảng cách nhưng một cái gì đó khá vô giá trị và cụ thể, không có gì mà SE quan tâm). Nhưng có một số lý do khác tại sao đây là một ý tưởng tồi?

Tôi biết có một plugin siêu dữ liệu thực hiện điều gì đó tương tự theo cách 'chính thức' hơn và tôi đã nghĩ đến việc sử dụng nó. Nhưng công cụ .attr này phù hợp với nhu cầu của tôi và tôi không thấy bất kỳ lý do thuyết phục nào để sử dụng plugin.

Vì vậy, về cơ bản, đây có phải là một mẫu phù hợp để sử dụng không và nếu không, tại sao không và tôi nên quan tâm đến plugin siêu dữ liệu.

Cảm ơn.

Answer 1

HTML5 bao gồm hỗ trợ nhúng dữ liệu trong thuộc tính tương thích ngược. Dưới đây là một ví dụ:

<li class="user" data-name="John Resig" data-city="Boston" 
    data-lang="js" data-food="Bacon"> 
    <b>John says:</b> <span>Hello, how are you?</span> 
</li> 

Useragents có lẽ sẽ thực hiện các ý tưởng .dataset vào javascript, trong đó sẽ giúp bạn dễ dàng kéo ra các bit dữ liệu riêng rẽ, nhưng bây giờ chỉ cần thay đổi lớp học của bạn để bao gồm đĩa dữ liệu là đủ tốt. Điều này sẽ xác thực là HTML5.

Với tôi điều này tốt hơn nhiều so với ý tưởng jquery siêu dữ liệu đó - điều đó dường như có vẻ ngớ ngẩn đối với tôi.

See here for more info.

Answer 2

Nếu bạn định sử dụng thuộc tính tùy chỉnh và đang sử dụng XHTML, bạn nên đặt tên cho chúng và cung cấp định nghĩa 'xmlns' thích hợp như một phần của phần tử 'html'. Tôi làm điều này bất cứ lúc nào tôi cần phải thêm các thuộc tính để cung cấp một số thông tin theo ngữ cảnh và nó đã làm việc khá tốt cho đến nay, đặc biệt là với jQuery. Thay vào đó, bạn chỉ cần sử dụng .attr('ns:name').

Answer 3

Tại sao không sử dụng: trang của bạn sẽ không validate on XHTML.

Nhưng điều đó phụ thuộc vào cách bạn thấy xác thực.

Answer 4

Bạn có thể sử dụng metadata plugin. Sau đó, HTML của bạn sẽ trở thành:

<span class="{ time:'50', distance:'60'}"></span> 

và javascript của bạn sẽ là:

var data = $('span').metadata(); 
var time = data.time; 
var distance = data.distance; 

Bằng cách đó đánh dấu của bạn sẽ xác nhận và bạn có thể nhận dữ liệu vào javascript của bạn trên server-side.

chỉnh sửa: Chỉ cần nhận thấy rằng bạn đã đề cập đến plugin siêu dữ liệu rồi. Xin lỗi, tôi đã vui mừng và vừa mới đăng mà không đọc câu hỏi đúng cách. Tôi sẽ để lại câu trả lời của tôi ở đây mặc dù trong trường hợp ai đó thấy nó hữu ích.

Answer 5

Sự nhầm lẫn xuất phát từ thực tế là jQuery xử lý các thuộc tính và thuộc tính DOM là giống nhau và chúng không. Thuộc tính là siêu dữ liệu về đánh dấu của bạn; Các thuộc tính DOM là siêu dữ liệu về các đối tượng DOM. jQuery sử dụng đúng các thuộc tính DOM để thao tác siêu dữ liệu về các đối tượng DOM đại diện cho các phần tử đánh dấu. Nó sử dụng sai thuật ngữ "thuộc tính" để mô tả điều này.