javascript - 在不从 HTML 解析的情况下从服务器发送 javascript 对象的技术？

Question

我不确定我的措辞是否正确，但让我试着解释一下。

我经常发现我的服务器会在页面请求中发送以下 html 片段:

<div id="my-values" data-values="[1,2,3,4,5]">Values</div>

然后 javascript 使用 JSON.parse 来使用这些值生成一些东西。

但我总觉得自己做了很多不必要的步骤。

1) 服务器将值序列化为html并发送

2) 客户端 Javascript 执行查询选择器以查找保存值的元素

3) 然后客户端 Javascript 将值解析回可用

有没有办法跳过序列化/反序列化？

我可以控制服务器和客户端代码，因此必须有更好的通信方式。

希望我已经说清楚了，也许这个常见问题有一个名字。

请注意我正在放弃像 SPA 这样的东西，我正在寻找服务器端渲染和最大的 SEO 效率。

One idea I thought about is, instead of the server parsing the values into HTML, it could parse into javascript, a sort of javascript template (sounds weird and wrong)

(将 flask 标记为我正在使用的服务器，但对答案无关紧要)

Answer 1

我认为你目前所做的已经是最好的选择之一。

Is there a way to skip the serialization/deserialization?

任何选项都必然涉及序列化和反序列化某处 - 毕竟数据是通过互联网发送的，对象不能发送，只能发送字符串(可能以 .js 文件的形式，可能是 HTML)然后反序列化并运行。

另一种可能性是在页面加载时发出网络请求，允许您请求值:

fetch('get-data-values')
  .then(response => response.json())
  .then((values) => {
    // do stuff
  });

这有效，但在处理值之前需要额外的延迟。单个页面加载需要两个 连接，而不是一个。

另一种可能性是让您的后端服务内联 Javascript，它定义了您使用的变量，例如:

<script>
var values = [1,2,3,4,5];
</script>

不过，动态生成的 Javascript 通常不是那么漂亮，而且通常会产生难闻的代码。

您还可以做您当前正在做的事情，即将信息嵌入到 HTML 标记中，这 (IMO) 非常好，而且可能是最好的选择 - 它非常易于维护，不需要额外的请求。

对于大量数据，可以考虑使用<script type="application/json">而不是 data-属性。非常相似，您只需将数据放在标签内，而不是作为属性:

const values = JSON.parse(document.querySelector('#values').textContent);
console.log(values);

<script id="values" type="application/json">[1,2,3,4,5]</script>

(type="application/json" 可以是任何东西，只要它不是 type="javascript" - Javascript 类型或空类型将意味着浏览器尝试运行代码)