如何在页面加载时将变量从节点服务器发送到 javascript 客户端？

Question

我的 web 应用程序 99% 是静态的，除了在页面加载时，我想向客户端发送他们的用户名（如果他们已登录）以及他们正在连接的房间的名称（如果他们在 URL 中指定）。这两个变量需要在客户端 Javascript 中访问。所以我一直在试图弄清楚什么感觉像是一项简单的任务，但我运气不佳。

1. 使用模板引擎。

   • 问题：矫枉过正，因为我只需要它用于静态页面上的一/两个变量，我需要在 Javascript 中访问它，而不是 HTML

2. 页面加载后发出 AJAX 请求

   • 问题：导致闪烁，因为首先页面加载，然后 DOM 更新一两秒后，因为必须等待发送和接收请求。而且它效率不高，因为它需要第二次请求/响应。

3. 使用 WebSockets

   • 问题：与上述问题相同。

4. 在页面加载的头部信息中发送

   • 问题：无法访问 Javascript 中的标头信息，除非您执行 a weird hack，它只能作为单独的 AJAX 调用工作。可以只使用#2。

所以我最终做的是使用 cookie，这 100% 有效。目前实际上没有问题，我只是认为代码非常丑陋和脆弱，我正在寻找更好的方法。这是 cookie 解决方案的外观的 sn-p：

app.get('/room/:roomName', function(req, res) {
    res.clearCookie('room');

    if (req.isAuthenticated()) {
        res.cookie('username', req.user.username);
    } else {
        res.cookie('username', '');
    }

    var roomName = req.params.roomName;

    if (roomNameToRoom.hasOwnProperty(roomName)) {
        res.cookie('room', req.params.roomName);
    }

    res.sendFile(path.join(__dirname, '../public/index.html'));
});

如您所见，我从请求中获取用户名并验证房间，如果有效，我将其发回。然后我在客户端使用 RegEx 解析 cookie（非常混乱），并在 Javascript 函数中使用这两个变量。我正在寻找替代解决方案，让我可以在一个请求中发送所有内容，同时避免很多复杂性和混乱。

Answer 1

5. 重定向到特殊的URL，例如index.htm?var1=5&var2=6，在JS中使用location.search.substr(1).split('&')。

6. 在 html 中使用嵌入 js 文件，例如 <script src='ajax.js'></script>。在这个例子中，ajax.js 没有被缓存并且包含如下内容：

   window.var1 = 5;
   window.var2 = 6;
   

   可以动态生成。

7. 使用 cookie。

顺便说一句，我不认为使用模板不好。您可以使用 javascript 模板。这不应该是性能问题，因为模板速度很快，您只需要执行一个模板。我会使用模板。