在 DOM 中嵌入任意 JSON 的最佳实践？

javascript dom json embedding decoupling

2022-08-30 04:38:52

我正在考虑在DOM中嵌入任意JSON，如下所示：

<script type="application/json" id="stuff">
    {
        "unicorns": "awesome",
        "abc": [1, 2, 3]
    }
</script>

这类似于在 DOM 中存储任意 HTML 模板以供以后与 JavaScript 模板引擎一起使用的方式。在这种情况下，我们稍后可以检索 JSON 并使用以下方式解析它：

var stuff = JSON.parse(document.getElementById('stuff').innerHTML);

这有效，但这是最好的方法吗？这是否违反了任何最佳实践或标准？

注意：我不是在寻找在DOM中存储JSON的替代方法，我已经决定这是我遇到的特定问题的最佳解决方案。我只是在寻找最好的方法来做到这一点。

答案 1

我认为你原来的方法是最好的。HTML5 规范甚至解决了这种用法：

“当用于包含数据块（而不是脚本）时，数据必须嵌入内联，数据的格式必须使用type属性给出，不得指定src属性，并且脚本元素的内容必须符合为所用格式定义的要求。

你已经做到了。什么是不爱？无需对属性数据进行字符编码。如果需要，您可以设置其格式。它具有表现力，预期用途明确。这感觉不像是黑客攻击（例如，使用CSS来隐藏你的“载体”元素）。这是完全有效的。

答案 2

作为一般方向，我会尝试使用HTML5数据属性。没有什么可以阻止你输入有效的JSON。例如：

<div id="mydiv" data-unicorns='{"unicorns":"awesome", "abc":[1,2,3]}' class="hidden"></div>

如果您使用的是jQuery，那么检索它就像：

var stuff = JSON.parse($('#mydiv').attr('data-unicorns'));