如何在静态 Javascript 中嵌入 EJS 代码？

Question

我正在使用 Nodejs 和 ExpressJS 。

我有一个 HTML 页面，其中有一个 Javascript 文件被引用。

<script type="text/javascript" src="../javascripts/game.js"></script>

我没有将所有的 Javascript 嵌入到 HTML 页面本身，因为它太大了。

现在我需要我的 Javascript (game.js) 来访问控制器传递的一些变量。我想做这样的事情 -

var max_players = parseInt("<%= table.total_players %>");
console.log("<%= table.name %>")

我在渲染页面时传递了 table 变量。

 exports.index = function(req,res){

//code
res.render('mytable', {table: table });

    };

但这显然不起作用，因为 JS 文件被呈现为静态文件。 如果我需要让这些变量可供 Javascript 访问，我该怎么做？

我在某处读到，这可以通过将 Game.js 重命名为 Game.ejs 来实现。但是我应该把 Game.js 文件放在哪里（以便正确和动态地呈现它？）

如果有任何其他方法可以实现这一点，也请告诉我。

Answer 1

可能最简单的选择是在game.js 之前的另一个<script> 中从table（或table 本身）输出您需要的全局变量：

<script>
   var max_players = <%- JSON.stringify(table.total_players) %>;
   console.log(<%- JSON.stringify(table.name) %>);

   /* Alternative:
     var table = <%- JSON.stringify(table) %>;
     var max_players = table.total_players;
     console.log(table.name);
   */
</script>
<script type="text/javascript" src="../javascripts/game.js"></script>

注意 <%- ... %> 与 <%= ... %> 的使用，这将跳过对输出进行 HTML 编码，因为这可能会导致语法错误。

在这里使用JSON.stringify() 可以利用JSON 和JavaScript 之间的语法关系。这些值将在服务器端写入 JSON 数据，但在客户端解析为 JavaScript literals。

---

如果你想通过 EJS 运行 game.js 本身，你可以将它移动到你的 ./views 目录中，为它添加一个路由，然后 res.render() 它。

请注意，您需要设置Content-Type，因为假定值为text/html，这可能会导致某些浏览器拒绝解析。

// ~/views/game-js.ejs

var max_players = <%- JSON.stringify(table.total_players) %>;
console.log(<%- JSON.stringify(table.name) %>);

// ...

app.get('/javascripts/game.js', function (req, res) {
    // code
    res.setHeader('Content-Type', 'application/javascript');
    res.render('game-js', { table: table });
});

---

另一种选择是让game.js 请求table。你可以在这篇文章的a previous edit 中看到一个例子。