javascript - 在js文件中使用节点变量

Question

因此，我知道为了将根目录中的 JSON 文件转换为可用的对象/变量，我必须使用 Node.js。在 Node 中解析 JSON 文件后，如何在 javascript 文件中使用它？我的 JSON 文件包含一个项目列表。我想使用 javascript 创建一个函数，该函数将使用 JSON 文件中的信息创建一个 HTML 列表。我可以处理用于制作 HTML 列表的 javascript 函数。我似乎无法弄清楚如何将 JSON 文件制作成我可以在我的 javascript 文件中访问和迭代的对象/变量。

标签： javascriptnode.js

Answer 1

让我们了解一下它是如何工作的基础知识，然后解释你的选择。

1. 用户在浏览器中输入 URL。
2. 浏览器从您的服务器请求一个 HTML 页面。
3. 服务器看到请求 URL，或者只是发送一个预制的静态 HTML 文件来响应该请求，或者它生成一个动态 HTML 文件，其中包含一些生成的 HTML（通常基于一些数据生成）。
4. 浏览器接收该 HTML 并对其进行解析。
5. 如果该 HTML 文件中指定了任何资源，例如<script>标签或<img>标签，则在 HTML 解析过程中发现这些标签后，浏览器会href从这些标签中获取，然后向服务器发送请求以获取这些资源。
6. 服务器获取对这些资源的请求，并为请求的每个传入 URL 发送适当的响应。同样，这些资源可能是静态资源，也可能是动态生成的。
7. 浏览器接收这些资源并处理它们（对于<script>标签，它将运行该 Javascript，对于<img>标签，它将显示图像）。

因此，您的服务器上有一些 JSON，听起来您希望在用户请求特定 URL 时在浏览器中显示该数据的 HTML 表示。

有几种不同的方法可以做到这一点：

选项 #1 - 服务器端模板

首先（可能是最常见的）是您将读取 JSON 并在您的服务器上解析它，所以现在您在 node.js 服务器中以 Javascript 对象形式拥有它。您可以在服务器启动时执行此操作，并将结果保存在 node.js 服务器中的 Javascript 变量中，或者您可以在请求处理程序中根据需要执行此操作。假设这现在位于一个名为 的变量中myData。

然后，您可以将该 Javascript 对象中的数据与 HTML 模板文件和模板渲染引擎结合起来。模板引擎专门设计用于获取模板定义并将其与数据结合以生成 HTML。它可以执行诸如将数据数组转换为 HTML 行之类的操作。您可以使用由您选择的特定模板引擎定义的特殊指令创建 HTML 模板。在 node.js 中使用的一些常见的 HTML 模板引擎是 Jade、Handlebars、Pug、Ejs、Nunjucks 等。一旦您设计了适当的模板并将模板引擎注册到您的 Express 服务器，然后您只需调用res.render()并传递模板文件和您的数据。

res.render("myTemplate", myData);

这会从模板和数据生成 HTML，并发送该 HTML 以响应传入的 HTTP 请求。每个特定的模板引擎都向您展示了有关如何构建其模板以及如何将数据放入模板的更多详细信息。每个模板引擎的语法不同，但概念上相同。

选项 #2 - 发送 Javascript 数据，在客户端构建 DOM

第二种选择是获取您的 JSON 数据并将其插入到作为网页一部分的脚本文件中。由于 JSON 文本格式是 Javascript 的子集，因此可以直接将其插入脚本文件并分配给该网页中的变量。这将使您可以通过客户端 Javascript 直接访问数据，然后它可以生成它想要的任何 HTML 并将其插入到 DOM 中。