Sự khác nhau giữa việc sử dụng thuộc tính dữ liệu và lớp/ID cho hành vi javascript là gì?

Question

Tôi đã làm việc trên một ứng dụng, giao diện người dùng chủ yếu sử dụng jQuery.

Chúng tôi dựa vào một số yếu tố được phân loại có mặt trên trang để chúng tôi có thể đính kèm hành vi cho họ. Ví dụ:

$('.block').on('click', clickHandler); 

Một trong những nhà phát triển khác cho biết chúng tôi phải tách rời bản trình bày khỏi logic (mà tôi đồng ý). Bởi vì các lớp học được sử dụng để trình bày, ông đề nghị sử dụng các thuộc tính dữ liệu:

$('[data-attribute-name~=value]').on('click', clickHandler); 

Tuy nhiên, tôi biết như sau về phương pháp này:

• Nó là đáng kể ít performant hơn một chọn dựa trên lớp
• Các lớp HTML được sử dụng để truyền đạt ý nghĩa ngữ nghĩa đến một phần tử DOM, và, như vậy, không bị giới hạn trong các sử dụng hiện tại.

Tôi không thấy bất kỳ đề cập cụ thể nào khi đọc lên trên unobtrusive javascript.

Sự khác biệt chính khi sử dụng [data-attribute] qua lớp học/ID là gì?

Đó có phải là vấn đề về hiệu suất/sở thích không?

Answer 1

Bởi vì các lớp học được sử dụng để trình bày

này chỉ đúng một phần. Các lớp được sử dụng cho cả trình bày và hành vi. Không có gì sai khi sử dụng các lớp để gắn hành vi vào nhiều phần tử.

Thuộc tính dữ liệu rất phù hợp để có thêm thông tin cụ thể về phần tử, nhưng tôi rất khuyên bạn không nên sử dụng các thuộc tính dữ liệu cho mục đích duy nhất là đính kèm hành vi.

Nếu bạn thực sự cần phải tách riêng việc sử dụng các lớp cho mục đích trình bày và hành vi, tôi khuyên bạn nên đặt tên cho chúng một cách thích hợp.Ví dụ, bạn có thể làm:

<div class="pres-alert">Watch Out!</div> 

vs

<div class="behav-alert">Watch Out!</div> 

hoặc

<div class="pres-alert behav-alert">Watch Out!</div> 

Tuy nhiên, tôi thấy quá mức cần thiết này. Tôi thường thấy mình sử dụng cùng một tên lớp cho cả hai, hành vi và trình bày. Cuối cùng, hành vi và cách trình bày thường liên quan chặt chẽ.

UPDATE:

Chịu nhận xét của bạn đồng nhà phát triển của một chút nữa, tôi tin rằng (s) ông thực sự là sai lầm khi kết class thuộc tính với trình bày. Các thông số kỹ thuật HTML5 cho class thuộc tính thậm chí nhà nước:

Không có hạn chế bổ sung đối với các thẻ tác giả có thể sử dụng trong các thuộc tính lớp, nhưng các tác giả được khuyến khích sử dụng các giá trị mô tả bản chất của nội dung, chứ không phải là giá trị mà mô tả bản trình bày mong muốn của nội dung.

http://www.w3.org/html/wg/drafts/html/master/dom.html#classes

Vì vậy, thay vì sử dụng class="big-red-box", bạn nên sử dụng class="alert". Bây giờ, bạn có thể đính kèm các kiểu vào lớp alert (color:red;font-size:bold) cũng như hành vi (ví dụ: cửa sổ bật lên khi di chuột).

Answer 2

Một lớp học có thể được liên kết với nhiều phần tử trong khi id chỉ được liên kết với một phần tử.

Tôi chỉ cần đọc câu hỏi của bạn một chút cẩn thận hơn và thấy rằng bạn cần thêm thông tin:

Cá nhân tôi sử dụng data thuộc tính để lưu trữ các biến cần thiết mà có thể được sử dụng khi xử lý một sự kiện và tôi sử dụng "sự kiện" class cho bất kỳ thứ gì sẽ được jQuery sử dụng thay vì CSS. Ví dụ:

<a class="event" data-action="Alert" data-id="123" href="#">Foo</a> 

<script> 

var Event = { 
    Alert: function(ele){ 
    alert(ele.attr("data-id")); //alerts "123" 
    }; 
}; 

$(".event").on("click",function(){ 
    var ele = $(this); 
    Event[ele.attr("data-action")](ele); 
}); 

</script> 

Hy vọng điều đó sẽ hữu ích!

Answer 3

Bạn có thể có nhiều lớp và bạn có thể kết hợp tên của một số với Logic và những người khác với trình bày và giữ hiệu suất của bộ chọn lớp.

<el class="block logicClass" /> 

Answer 4

Thuộc tính dữ liệu không chỉ dành cho các bộ chọn. Đôi khi bạn muốn cung cấp thêm ý nghĩa cho một thẻ mà tập lệnh có thể sử dụng.

Ví dụ: bạn có thể có một data-attribute-validate-repeat="firstpassword" trên trường lặp lại mật khẩu, trong đó giá trị tham chiếu đến mật khẩu đầu tiên. Sau đó, trình xác thực biểu mẫu có thể đọc thuộc tính này để tìm trường khác theo ID. Điều này không thể được thực hiện bởi chỉ các lớp và ID, trừ khi bạn sử dụng một quy ước đặt tên đặc biệt, mà sẽ không được rất gọn gàng.

Answer 5

Bạn chắc chắn nên gắn với ID khi bạn có thể nếu không có lý do nào khác hơn là nhanh nhất của bộ chọn. Tôi sẽ mở rộng thêm về điểm thứ hai của bạn: các lớp HTML nên chỉ được sử dụng để truyền đạt ý nghĩa ngữ nghĩa cho một phần tử DOM. Đó là sử dụng lớp CSS mà tôi cho rằng bạn có ở trên như:

.block { 
    display: block; 
} 

thực sự đi ngược lại tinh thần của HTML/CSS. Đó không phải là để nói rằng chúng ta không làm tất cả, nhưng vấn đề là bạn nên ít nhất có ý nghĩa ngữ nghĩa đằng sau các tên lớp mà bạn muốn liên kết với:

$(".show-popup").on('click', showPopup); 

Theo câu hỏi cụ thể của bạn, " là những khác biệt chính: "như bạn nói, việc sử dụng lớp học sẽ nhanh hơn/nhiều hơn. Cú pháp chắc chắn là sạch hơn. Thông số doesn't seem to say anything specific về cách sử dụng thuộc tính data- as selectors. Tuy nhiên, tôi đã luôn luôn giải thích các thuộc tính dữ liệu như được thiết kế để lưu trữ dữ liệu vô hướng có giá trị được sử dụng cho các thuật toán. Điều này có nghĩa là các giá trị có thể thay đổi thường xuyên và dữ liệu có thể được thêm vào/bị xóa khỏi các phần tử thường xuyên, điều này sẽ khiến chúng không bị xóa đối với các bộ chọn.