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

在前端开发中，经常需要将数据以JSON的形式传递到前端页面中。而将JSON数据绑定到DOM元素中可以方便地在页面中展示数据、更新数据或与后台进行交互。但是，在DOM中嵌入任意JSON数据不仅需要考虑数据的安全性，还要关注性能和代码可维护性。

本文将提供一些最佳实践和技巧，帮助您在DOM中嵌入任意JSON数据时更好地处理这些问题。

1. 在HTML5 data-* 属性中存储JSON数据

可以使用HTML5的data-*属性在DOM元素中存储JSON数据。例如：

<div id="myDiv" data-json='{"name": "John", "age": 30, "city": "New York"}'></div>

然后我们可以使用JavaScript来读取这个数据：

const myDiv = document.querySelector('#myDiv');
const jsonStr = myDiv.getAttribute('data-json');
const jsonObj = JSON.parse(jsonStr);
console.log(jsonObj.name); // John

在这种情况下，需要确保存储的JSON数据是有效的，并采取必要的安全措施，防止跨站脚本攻击（XSS）。

2. 使用自定义属性存储JSON数据

除了data-* 属性外，您还可以使用自定义属性存储JSON数据。例如:

<div id="myDiv" json-data='{"name": "John", "age": 30, "city": "New York"}'></div>

然后我们可以使用JavaScript来读取这个数据：

const myDiv = document.querySelector('#myDiv');
const jsonStr = myDiv.getAttribute('json-data');
const jsonObj = JSON.parse(jsonStr);
console.log(jsonObj.name); // John

与data-* 属性相比，使用自定义属性可以提供更好的可读性和可维护性，但也需要确保存储的JSON数据是有效的，并采取必要的安全措施，防止XSS攻击。

3. 使用script标签存储JSON数据

您还可以使用script标签将JSON数据作为文本存储在DOM中。例如：

<script type="application/json" id="myJson">
{
    "name": "John",
    "age": 30,
    "city": "New York"
}
</script>

然后我们可以使用JavaScript来读取这个数据：

const myScript = document.querySelector('#myJson');
const jsonStr = myScript.textContent;
const jsonObj = JSON.parse(jsonStr);
console.log(jsonObj.name); // John

与前两种方法不同，使用script标签使得JSON数据更易于使用，因为不需要使用getAttribute()或者innerHTML等API去解析它。而且，由于浏览器不会将这种脚本类型解释为JavaScript代码，所以也可以避免一些潜在的安全问题。但需要注意的是，该方法不适用于需要使用script标签的情况。

4. 在CSS样式中存储JSON数据

最后，您还可以将JSON数据存储在CSS样式表中。例如：

<style>
    #myDiv {
        --json-data: '{"name": "John", "age": 30, "city": "New York"}';
    }
</style>

<div id="myDiv"></div>

然后我们可以使用JavaScript来读取这个数据：

const myDiv = document.querySelector('#myDiv');
const jsonStr = getComputedStyle(myDiv).getPropertyValue('--json-data');
const jsonObj = JSON.parse(jsonStr);
console.log(jsonObj.name); // John

与前三种方法相比，这种方法可能不是很容易理解，但通常情况下比较安全，并且不需要使用特殊的API去获取JSON数据。但需要注意的是，如果网站使用了CSS压缩工具，那么

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11838