javascript - 在包含的前端 js 文件中使用服务器生成的变量

Question

这里是 node.js 初学者。 所以我正在编写一个应用程序，每秒我都会得到一个服务器生成的数字并通过应用程序粘贴它。转到我的 index.pug 文件，我想在嵌入的 js 文件中使用该数字。我该怎么做？

服务器.js

randomNumber = 4;
app.get('/',(req,res) => {
    res.render('index', {title: 'Number', count: randomNumber})
});

索引.pug

html
 head
  title= title
 body
  h1= count
  script(src="includes/client.js")

客户端.js

var chart = new CanvasJS.Chart("chartContainer", { 
   title: {
    text: count
   },
});

现在如何使用 client.js 文件中的 randomNumber 变量？我在这里错过了什么？应用程序总是告诉我 count 未定义

Answer 1

您需要记住，在您的请求中存在三个独立的 Javascript 上下文:

1. 路由(server.js)，
2. View /模板 (index.pug)，以及
3. 浏览器

除非您明确地将变量传递给链中的下一个变量，否则上述任何一个都不能访问其他任何一个。

您在 res.render 中明确地将标题和计数传递到 View /模板中语句，然后将它们进一步传递到浏览器中，您需要使用 unescaped string interpolation并将其添加到 <script> 中标记如下:

html
 head
  title= title
 body
  h1= count
  script.
    var count = !{count};
  script(src="includes/client.js")

如果您希望 count 作为字符串通过，请改为这样定义它:

html
 head
  title= title
 body
  h1= count
  script.
    var count = "!{count}";
  script(src="includes/client.js")