在外部 Javascript 文件中使用传递的变量

Question

我像这样将两个变量传递给我的前端

res.render("mypage", {data: data});

使用变量中的数据，我想构建一些 HTML 元素并使用图表进行一些数据可视化。 我当然可以只使用我的模板软件 (EJS) 并在 HTML 文件本身中编写大量 javascript，但这听起来并不明智。

我搜索了stackoverflow，一般的解决方案似乎是把它放到一个全局变量中，然后加载到外部js文件中，这样它就可以访问它，所以在我的前端我会有这个

    <head>
        <title>Cool Site</title>
        <script>
            var data = <%- data %>;
        </script>
        <script src="/fun.js"></script>
    </head>

问题是 VSCode 本身说Expression Expected for my <%- and %>部分，当我尝试访问我的fun.js文件中的变量时，它说Data is not defined并且还说SyntaxError: Unexpected token 。

关于如何正确访问数据的任何想法？

Answer 1

EJS 只是一种模板语言。 它吐出文本。 它将解释以下内容：

<script>
  var data = <%- data %>;
</script>

...有点像：

`<script>
  var data = ${data};
</script>`

那么<%- data %>是什么意思？ 这意味着获取表达式的原始值并将其输出到结果中。 由于data是一个对象，它最有可能在其上调用toString ，并且默认情况下，对象的.toString()是字符串[Object object] ，使您的 JavaScript 如下所示，它有一个语法错误：

<script>
  var data = [Object object];
</script>

最简单的解决方法是将数据序列化为JSON，这在 JavaScript 中作为对象文字是不可解释的：

<script>
  var data = <%- JSON.stringify(data) %>;
</script>

...尽管您必须小心边缘条件，例如您的数据可能包含</script>字符串，在这种情况下，它会过早关闭您的脚本标记。 幸运的是，有许多软件包可以提供更安全的 JSON 字符串化版本，以便在 HTML 页面上输出。 如果您的数据可以包含任意用户字符串，请使用更安全的字符串化库； 否则你就有了脚本注入漏洞。

在外部 Javascript 文件中使用传递的变量

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-03-30 21:50:58

在外部 Javascript 文件中使用传递的变量

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-03-30 21:50:58

解决方案1
1 已采纳 2020-03-30 21:50:58