HTML, JS: Использовать очень большие атрибуты данных для хранения контента? - PullRequest
Новая
       27

HTML, JS: Использовать очень большие атрибуты данных для хранения контента?

0 голосов
/ 07 января 2020

Мне интересно, если что-то не так с использованием очень больших / длинных атрибутов данных для изменения содержимого элемента веб-сайта?

Вот пример, который использует атрибуты данных для хранения и отображения различных языковые версии текста: 

$(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>

Ответы [ 2 ]

2 голосов
/ 07 января 2020

Использование атрибутов данных Проблемы :

Не храните содержимое, которое должно быть видимым и доступным в атрибутах данных, поскольку Вспомогательные технологии могут не получить к ним доступ. Кроме того, поисковые роботы могут не индексировать значения атрибутов данных.

Основные проблемы, которые необходимо учитывать, - поддержка и производительность Inte rnet Explorer. Inte rnet Explorer 11+ обеспечивает поддержку стандарта, но все более ранние версии не поддерживают набор данных. Для поддержки IE 10 и ниже вам необходимо получить доступ к атрибутам данных с помощью getAttribute (). Кроме того, производительность чтения атрибутов данных по сравнению с хранением этих данных в обычном объекте JS низкая.

Вместо этого вы можете использовать объект для хранения данных следующим образом: 

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>
0 голосов
/ 07 января 2020

Это не слишком много. Я не думаю, что текстовое содержание сделало бы что-то не так. Если бы вы хранили мегабайты данных изображения, это был бы другой случай.

...