在DOM中embedded任意JSON的最佳实践？
我正在考虑像这样在DOM中embedded任意的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的替代品，我已经决定这是我遇到的特定问题的最佳解决scheme。 我只是在寻找最好的方法来做到这一点。
我认为你的原始方法是最好的。 HTML5规范甚至解决了这个问题：
“当用于包含数据块（而不是脚本）时，数据必须embedded到内部，数据的格式必须使用type属性给出，不能指定src属性，脚本元素的内容必须符合为使用的格式定义的要求。“
请阅读： http : //dev.w3.org/html5/spec/Overview.html#the-script-element
你已经完成了。 什么是不爱？ 属性数据不需要字符编码。 你可以格式化它，如果你想。 它的performance力和预期的用途是清楚的。 它不觉得像一个黑客（如使用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'));
这种将jsonembedded到脚本标记中的方法存在潜在的安全问题。 假设json数据来源于用户input，可以创build一个数据成员，这个数据成员实际上会脱离脚本标签并允许直接注入到dom中。 看这里：
这是注射
<script type="application/json" id="stuff"> { "unicorns": "awesome", "abc": [1, 2, 3], "badentry": "blah </script><div id='baddiv'>I should not exist.</div><script type="application/json" id='stuff'> ", } </script>
没有办法绕过/编码。
我build议将JSON放入带有函数callback（ JSONPtypes ）的内联脚本中：
<script> someCallback({ "unicorns": "awesome", "abc": [1, 2, 3] }); </script>
如果正在执行的脚本在文档之后加载，则可以将其存储在某个地方，可能会附加一个标识符参数： someCallback("stuff", { ... });
我的build议是将JSON数据保存在外部.json文件中，然后通过Ajax检索这些文件。 你不把CSS和JavaScript代码放到网页上（内联），那么你为什么要用JSON呢？
