在DOM中嵌入任意JSON的最佳实践是什么?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (20)

我正在考虑在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的替代方案,我已经决定这是我遇到的特定问题的最佳解决方案。我只是在寻找最好的方式来做到这一点。

提问于
用户回答回答于

我认为你的原始方法是最好的。HTML5规范甚至解决了这个问题:

“当用于包含数据块(而不是脚本)时,数据必须嵌入内嵌,数据的格式必须使用type属性给出,不能指定src属性,脚本元素的内容必须符合为使用的格式定义的要求。“

请阅读:http : //dev.w3.org/html5/spec/Overview.html#the-script-element

你已经完成了。什么是不爱?属性数据不需要字符编码。如果你愿意,你可以格式化它。它的表现力和预期的用途是清楚的。它不觉得像一个黑客(例如使用CSS来隐藏你的“载体”元素)。这是完全有效的。

用户回答回答于

作为一个总的方向,我会尝试使用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'));

扫码关注云+社区