在前端 JS 中使用来自 Node.js / Express 后端的对象答案

【问题标题】：Use object from Node.js / Express backend in frontend JS在前端 JS 中使用来自 Node.js / Express 后端的对象
【发布时间】：2021-10-21 06:42:51
【问题描述】：

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

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

这是我的路线：

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

这里是控制器：

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

然后我就可以渲染具有给定对象属性的页面了：

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

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

希望这是有道理的。

提前致谢！

【问题讨论】：

你能描述一下objectGame.js的结构吗？它是功能性的、面向对象的还是某种模式？
objectGame.js 是一个非常简单的脚本，它定义了一个包含 Leaflet 地图并显示它的变量，以及一个在单击地图时显示点坐标的函数。然后，我需要添加一个函数，该函数将使用这些坐标和存储在数据库中的对象的一些属性执行快速计算，并将结果显示给客户端。
另一种选择是在objectGame.html.twig 文件中创建一个脚本标签。然后你的对象变量仍然在同一个范围内。

标签： javascript node.js express frontend backend

【解决方案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函数将在全局空间中可用，可以这样使用。

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

【讨论】：