使用NodeJS与客户端共享变量

Sharing variable with client using Node JS

本文关键字：共享变量客户端 NodeJS 使用更新时间：2023-09-26

我使用的是Node JS和Express。

目前，在服务器端，我将某个变量（源）传递给我的EJS模板，并使用其中的一部分来填充页面上的列表。

当用户单击该列表中的一个项目时，我需要掌握该变量的另一部分。

我知道我可以再次AJAX服务器上的变量（源代码），并解决我的问题。但这似乎没有必要，因为当模板生成HTML时，我已经有了变量。

通常的做法是什么？人们使用AJAX来获取变量，或者在服务器构建变量时，是否有一些好的方法可以将其存储在页面中？

"破解"是创建一个隐藏元素并将值存储在其中…

一种方法是将服务器端的数据作为JavaScript变量注入EJS

<script>var x = <%server data%></script>

然后您可以在客户端获取它，而无需进行额外的HTTP请求。比你提到的黑客稍微干净一点。

是否使用AJAX和隐藏元素有几个因素。

使用AJAX的优点是，您可以加载页面的模板，以及所有静态内容，让浏览器在客户端检索到动态内容之前呈现页面。如果您需要从数据库加载内容或计算输出，这将带来优势。基本上，优势是如果你正在加载一些大的东西，或者可能需要一点时间才能检索到的东西，你应该在页面加载后使用AJAX，这样用户就可以减少等待结果的时间。另一个优点是，你可以实时显示结果，你可以向客户端提供进度报告（例如进度条），或者你可以实时加载搜索结果，因为它们是从源（数据库、谷歌、脸书等）加载的。

使用隐藏元素的优点是，加载单个页面所需的HTTP请求/响应更少。如果你只需要加载一个用户名，或者简短的传记和一些链接，你应该用模板加载它。但是，如果您需要加载所有用户最新博客文章的结果，您应该使用AJAX。使用隐藏元素更容易实现，但单独使用无法实时更新。此外，顺便说一句，这一点都不"粗鲁"。jQuery在很多方面都是这样做的，比如在元素之间设置动画，或者只隐藏非活动选项卡的jQuery UI选项卡。这基本上就是隐藏元素的预期目的。

问题不应该是使用哪种技术，而应该是何时将其中任何一种技术用于每个特定的预期目的。考虑这些利弊，你应该走在正确的道路上。当你不需要AJAX时，你可能不需要。如果过度使用，它可能会变得浪费。

可能需要这个-使用本地变量进行响应，用于渲染http://expressjs.com/api.html#res.locals