Class vs data- vs Custom屬性

Question

我已經用div構建了一個自定義選擇框，我在功能上接線。 最初我使用類和jquery dom遍歷來連接所有內容。 但后來我開始考慮這是否是最好的方法，因為我混合功能和樣式。

接下來我查看了HTML 5的data- [something]屬性，但它對我來說不合適，因為我的代碼最終混亂了很多數據屬性，這些屬性沒有數據但只是dom遍歷的標記。 我也擔心JQuery性能，因為堆棧上的多篇文章說屬性查詢速度較慢，但​​文章已經過時了。

所以最后我在考慮自定義屬性，他們覺得數據更清晰 - 因為他們並不意味着他們應該持有數據。 但是他們遇到了相同的性能問題（可能是最糟糕的，因為他們不支持兼容/ JQuery）。 它們也符合非標准。

在旁注中，我知道angular使用自定義屬性，但是他們沒有參與dom遍歷（我知道）所以沒有性能命中，我覺得他們有一個更好的論據，需要它們然后一個簡單的小部件。

我的問題是：

• 使用屬性而不是類的性能仍然是個問題嗎？
• 使用完全自定義屬性只是不好的做法嗎？
• 當你沒有真正持有數據時，使用數據 - [某事]是不好的做法？
• 你會推薦哪種方法？為什么？

具有相同功能的類和數據屬性的代碼以及類的樣式。

<div class="ns-dropdown-zoom ns-toolbar-item " data-cns-type="cns-dropdown">
  <div class="cns-dropdown-top">
    <input type="text" class="cns-dropdown-selection-visible" value="75%" data-cns-dropdown-sel-visible />
    <div class="cns-dropdown-arrow">
    </div>
    <!-- once we wire up the javascript the true selected value goes here -->
    <input class="cns-dropdown-selection-hidden" type="hidden" data-cns-dropdown-sel-hidden/>
  </div>
  <div class="cns-dropdown-option-list" data-cns-dropdown-opt-list>
    <div class="cns-dropdown-option" data-cns-dropdown-opt>
      <span class="cns-dropdown-option-value" data-cns-dropdown-opt-value>10%</span>
      <div class="cns-dropdown-option-display" data-cns-dropdown-opt-display>10%</div>
    </div>
  </div>
</div>

啟動javascript，讓您了解我如何遍歷dom

var initDropDowns = function () {
// Init function for dropdowns
var dropDowns = $(".cns-drop");
var html = $("html");

html.click(function (event) {
  dropDowns.each(function (index, el) {
    var optionList = $(el).find(".cns-drop-option-list").get(0);
    var selVisible = $(el).find(".cns-drop-selection-visible");
    var selHidden = $(el).find(".cns-drop-selection-hidden");
    var target = event.target;
    var options;
    var opt;
    var i, iMax;

  // Clicking outside the element
  if (!$.contains(el, target)) {
    $(el).removeClass("cns-drop-expand");
  // Clicking inside the element, inclusive
  } else {

Answer 1

使用屬性而不是類的性能仍然是個問題嗎？

• 按屬性查詢仍然比通過id查詢更昂貴，但這是否是一個問題取決於您對性能的期望，或者您查詢的頻率。 我不認為你會注意到大多數情況的區別。 你可以在這個jsperf上看一下 。

使用完全自定義屬性只是不好的做法嗎？

• 是。 根據HTML的第5版，它不是有效的語法。 來自Angularjs文檔 ：

最佳實踐：首選使用划線分隔格式（例如ng-bind為ngBind）。 如果要使用HTML驗證工具，則可以使用數據前綴版本（例如，ngBind的data-ng-bind）。

當你沒有真正持有數據時，使用數據 - [某事]是不好的做法？

• 即使是一個簡單的布爾值仍然被認為是數據，所以我沒有看到說data-is-whatever='true'

你會推薦哪種方法？為什么？

• 如果性能不是主要因素，我會選擇數據屬性，因為您可以將行為聲明與樣式分開，並使您的代碼更易讀/更容易維護。