如何在静态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 %>")

我在渲染页面时传递表变量.

 exports.index = function(req,res){

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

    };

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

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

如果还有其他方法可以达到这个目的,请告诉我.

Answer 1

可能是最简单的办法是输出你需要的全局变量table(或table自己)在另一个<script>之前game.js:

<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>

请注意使用<%- ... %>vs. <%= ... %>,它将跳过HTML编码输出,因为这会导致语法错误.

使用JSON.stringify()此处利用了JSON和JavaScript之间的语法关系.这些值将写为JSON数据服务器端,但在客户端解析为JavaScript文本.

如果您想game.js通过EJS 运行自己,可以将其移动到您的./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.您可以在此帖子的上一个编辑中看到此示例.