EJS在script标签中混合JavaScript代码的问题

February 23, 2017

背景

我在node+express项目中定义了一个全局变量CONFIG

global.CONFIG = {
userName: ‘beace',
userID: '98SDAF99QRWEQ9'
}

render的时候传入ejs页面中,

module.exports = function(app) {
app.all('*', function(req, res) {
console.log(CONFIG)
res.render('index', {
title: “xxx",
CONFIG: CONFIG
})
})
}

传入完成后,在ejs中想要保留在js代码中,结果发现,每次浏览器都报这个错误

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= title %></title>
<link rel="stylesheet" href="/static/dist/stylesheets/main.min.css">
<script>
window.CONFIG = <%-CONFIG%>
</script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript" src="/static/dist/javascripts/main.min.js"></script>
</body>
</html>

解决方案

最终,在http://stackoverflow.com/questions/11289793/accessing-ejs-variable-in-javascript-logic中找到了答案。

如果是单个值,可以这样直接赋值,如果是object类型的变量,需要JSON.stringify(CONFIG)来进行一道处理。

var a = {name: "beace", id: "23423"}
JSON.stringify(a)
"{"name":"beace","id":"23423"}"

具体原因如此:

EJS需要解析HTMLCSSJavaScript,因此应该避免在<%%>中出现原生的tag