tập dữ liệu vs .data - Sự khác biệt?

Question

Tôi đang đọc một số giá trị trong trường thuộc tính dữ liệu. Tôi đã thấy hai cách dễ dàng để đọc dữ liệu như hình dưới đây:

var webappData = document.getElementById('web-app-data'), 
    rating = webappData.dataset.rating; 

HOẶC

var effectData = $('.effects-list li'), 
    creative = effectData.filter('[data-creative]').data("creative"); 

Câu hỏi của tôi là mà trong số này có hiệu suất tốt hơn hay họ thực sự khác nhau?

Tôi có một trang có nhiều thuộc tính dữ liệu mà tôi đang truy cập và tôi muốn sử dụng phương pháp có hiệu suất tốt nhất.

Bất kỳ hướng dẫn nào về sự hiểu biết về sự khác biệt giữa hai yếu tố này sẽ được đánh giá cao. Trong khi tôi đang xem xét hiệu suất đặc biệt nếu có những lý do khác để sử dụng một trong những khác tôi muốn biết điều này là tốt.

Answer 1

dataset là một tài sản có nguồn gốc của một phần tử có chứa các thuộc tính dữ liệu, đó là một mới (ish) Ngoài ra và như vậy chỉ được hỗ trợ trong IE11 +, Chrome 8+, FF 6 +, vv

Một hơn chéo giải pháp trình duyệt sẽ được để có được những thuộc tính trực tiếp

webappData.getAttribute('data-rating'); 

---

data() là một phương pháp jQuery, và khác so với sử dụng thuộc tính dữ liệu HTML5 để thiết lập giá trị inital nếu không tồn tại trong nội bộ, nó không có gì chung với tập dữ liệu .

data() cửa hàng bất kỳ dữ liệu bạn vượt qua nó trong một đối tượng bên trong tạo ra bởi jQuery, vì vậy đây ví dụ sẽ thất bại

$(element).data('key', 'value'); 

element.dataset.key // undefined 

như dữ liệu không được lưu trữ trong các thuộc tính ở tất cả, nhưng trong nội bộ bằng jQuery.
Các jQuery tương đương với nhận và thiết lập các thuộc tính dữ liệu sẽ được attr()

$(element).attr('data-key', 'value'); 

---

Các phương pháp tự nhiên có lẽ nhanh hơn, nhưng khi họ không thực sự tương đương với jQuery data() nó không thực sự quan trọng, nhưng để nhận thuộc tính dữ liệu, tôi nghĩ phương pháp nhanh nhất với hỗ trợ trình duyệt tốt nhất sẽ là

var rating = webappData.getAttribute('data-rating');