Question

由于HTML data属性允许添加任何自定义数据，我想知道将一组JSON列表包含为data属性是否是个好主意？然后，使用JSON的{{1}}个活动可以轻松访问相应的JavaScript。

事实上，我的问题是：向getAttribute("data-x")属性添加大量数据是否标准，高效且合理？

例如

HTML

或者必须在<div data-x="A LARGE SET OF JSON DATA" id="x">代码中存储大量JSON数据，<script>属性不适合大量数据，即使对于HTML属性也是如此。

Answer 1

您可以使用标识符来访问数据，而不是将所有内容存储在数据属性中。

例如，你可以这样做：

var myBigJsonObj = { 
                      data1 : { //lots of data}, 
                      data2 : { //lots of data}                   

                   };

然后你有一些像这样的HTML：

<div data-dataId="data1" id="x">

您现在可以使用jquery来获取数据：

var dataId = $('#x').attr('data-dataId');

var myData = myBigJsonObj[dataId];

这是最好的方法imho。

Answer 2

假设您要将对象var dataObj = { foo: 'something', bar: 'something else' };保存为html数据属性。

首先考虑对象进行字符串化，以便我们拥有 var stringifiedDataObj = JSON.stringify(dataObj);

然后你可以使用jQuery将stringifiedDataObj设置为数据属性，例如使用jQuery.data() API

Answer 3

虽然没有什么可以阻止你在数据属性中嵌入一长串JSON，但可以说是更多＆＃34;正确＆＃34;这样做的方法是为JSON数据的每个属性添加一个数据属性。例如：

使用Javascript：

var dataObj = { foo: 'something', bar: 'something else' }

HTML：

<div data-foo="something" data-bar="something else"></div>

这样，JSON对象中的每个数据对应于附加到DOM元素的单独的，可独立访问的数据。

请记住，无论哪种方式，您都需要逃避您在HTML中插入的值 - 否则就会出现偏离＆＃34;字符会破坏你的页面。

Answer 4

您可以使用Map。您的元素将作为键，而该键上的值可能是您要在其中存储所需数据的对象。这样的东西（虽然未测试）：

(function(global) {

  const map = new Map();

  global.CustomData = {
    add(element, key, data) {
      if (!map.has(element)) {
        map.set(element, {});
      }

      map.get(element)[key] = data;

      return map.get(element);
    },

    get(element, key) {
      if (!map.has(element)) {
        return null;
      }

      if (key !== undefined) {
        return map.get(element)[key];
      }

      return map.get(element)
    },

    remove(element, key) {
      if (!map.has(element)) {
        return false;
      }

      delete map.get(element)[key];

      if (Object.keys(map.get(element)).length === 0) {
        map.delete(element);
      }

      return true;
    },

    clear(element) {

      if (!map.has(element)) {
        return false;
      }

      map.delete(element);

      return true;
    }
  }

})(window);

Answer 5

从技术上讲，您可以做到，而且我已经看到几个站点都可以这样做，但是另一种解决方案是将JSON存储在<script>标签中，并在data属性中引用脚本标签。如果将数据呈现到页面服务器端，那么这比将数据作为JS对象存储在实际脚本中更好，但是例如，对内联脚本标签有CSP限制。

HTML

<div data-data-id="#MyScriptData" id="x"></div>

<script type="application/json" id="MyScriptData">
{
    "fruit": "apple",
    ...
}
</script>

JS

$(function () {
    var dataId = $("#x").data("data-id");
    var dataTag = $(dataId);
    var dataJson = dataTag.html(); // returns a string containing the JSON data
    var data = JSON.parse(dataJson);

    ...
});

在HTML数据属性上添加JSON是不是很糟糕？

5 个答案: