javascript - HTML、JS : Using very large data-attributes to store content?

Question

我想知道使用非常大/很长的数据属性来更改网站元素的内容是否有任何问题？

下面是使用数据属性来存储和显示不同语言版本的文本的示例:

$(document).ready(function() {
  $(".content").children("p").text($(".content").data("content-de"));
})

$("button").on("click", function() {
  var lang = $(this).data("lang");
  var content = $(".content").data("content-" + lang);
  //
  $(".content").children("p").text(content);
})

button.de::after {
  content: "German";
}

button.en::after {
  content: "English";
}

button.fr::after {
  content: "French";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <!-- Controls -->
  <div>
    <button class="de" data-lang="de"></button>
    <button class="en" data-lang="en"></button>
    <button class="fr" data-lang="fr"></button>
  </div>
  
  <!-- Content -->
  <div class="content" 
       data-content-de="Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Er lag auf seinem panzerartig harten Rücken und sah, wenn er den Kopf ein wenig hob, seinen gewölbten, braunen, von bogenförmigen Versteifungen geteilten Bauch, auf dessen Höhe sich die Bettdecke, zum gänzlichen Niedergleiten bereit, kaum noch erhalten konnte. Seine vielen, im Vergleich zu seinem sonstigen Umfang kläglich dünnen Beine flimmerten ihm hilflos vor den Augen."
       data-content-en="One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment."
       data-content-fr="En se réveillant un matin après des rêves agités, Gregor Samsa se retrouva, dans son lit, métamorphosé en un monstrueux insecte. Il était sur le dos, un dos aussi dur qu’une carapace, et, en relevant un peu la tête, il vit, bombé, brun, cloisonné par des arceaux plus rigides, son abdomen sur le haut duquel la couverture, prête à glisser tout à fait, ne tenait plus qu’à peine.">
    <p></p>
  </div>
</div>

Answer 1

Using data attributes 问题:

Do not store content that should be visible and accessible in data attributes, because assistive technology may not access them. In addition, search crawlers may not index data attributes' values.

The main issues to consider are Internet Explorer support and performance. Internet Explorer 11+ provides support for the standard, but all earlier versions do not support dataset. To support IE 10 and under you need to access data attributes with getAttribute() instead. Also, the performance of reading data-attributes compared to storing this data in a regular JS object is poor.

相反，您可以使用对象来保存数据，如下所示:

var data = {
  "de":"Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Er lag auf seinem panzerartig harten Rücken und sah, wenn er den Kopf ein wenig hob, seinen gewölbten, braunen, von bogenförmigen Versteifungen geteilten Bauch, auf dessen Höhe sich die Bettdecke, zum gänzlichen Niedergleiten bereit, kaum noch erhalten konnte. Seine vielen, im Vergleich zu seinem sonstigen Umfang kläglich dünnen Beine flimmerten ihm hilflos vor den Augen.",
  "en":"One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.",
  "fr":"En se réveillant un matin après des rêves agités, Gregor Samsa se retrouva, dans son lit, métamorphosé en un monstrueux insecte. Il était sur le dos, un dos aussi dur qu’une carapace, et, en relevant un peu la tête, il vit, bombé, brun, cloisonné par des arceaux plus rigides, son abdomen sur le haut duquel la couverture, prête à glisser tout à fait, ne tenait plus qu’à peine."
};

$(document).ready(function() {
  var de = data.de;
  $(".content > p").text(de);
})

$("button").on("click", function() {
  var lang = $(this).data("lang");
  //
  $(".content > p").text(data[lang]);
})

button.de::after {
  content: "German";
}

button.en::after {
  content: "English";
}

button.fr::after {
  content: "French";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <!-- Controls -->
  <div>
    <button class="de" data-lang="de"></button>
    <button class="en" data-lang="en"></button>
    <button class="fr" data-lang="fr"></button>
  </div>
  
  <!-- Content -->
  <div class="content">
    <p></p>
  </div>
</div>