在前端 JS 中使用 object 来自 Node.js / Express 后端

Question

在这里编程的新手，我的问题可能相当愚蠢，但我花了很多时间寻找无济于事的解决方案。

我正在为一个简单的 web 应用编写原型。 后端使用 Node.js、Express 和 MongoDB。我使用 twig 将页面呈现给客户端。 我需要使用一些前端 JS。

这是我的路线：

router.get("/game/:id", objectsController.showObjectGame)

这是 controller：

exports.showObjectGame = (req, res) => {
objectModel.findById(req.params.id)
.exec()
.then(object => {
    res.render("objectGame.html.twig", {object: object})
})
.catch(error => {
    console.log(error);
})}

然后我能够呈现具有给定 object 属性的页面：

<h2>Title1</h2>
    <div id="property1">{{object.property1}}</div>

<h2>Title2</h2>
    <div id="property2">{{object.property2}}</div>
<h2>Title3</h2>
    <div id="property3"><img src="/images/{{object.property3}}"></div>

在此页面上，我导入一个 JS 文件：

<script src="/javascript/objectGame.js"></script>

我的问题是我需要将 object 传递给 objectGame.js 中的一个变量，以便执行前端脚本。 对于我的一生，我不知道该怎么做。

希望这是有道理的。

提前致谢 ！

Answer 1

以下是我认为可能有用的内容。 首先，我们必须重构objectGame.js中的代码。 为此我们可以使用 IIFE 模式。

这是 objectGame.js 代码的样子

 const objectGame = (function() {
  //varible initializations
  let somevar = null;
  
  function _init(objectFromServer) {
    somevar = objectFromServer;
   //other initilization code
  }

  //other functions

  return {
    init: _init,
    //other methods can be added
  }
})();

导入 objectGame.js 后，上面定义的objectGame function 将在全局空间可用，可以像这样使用。

<script src="/javascript/objectGame.js"></script>
<script>
  objectGame.init({{someObjectFromServer}});
</script>