在 JavaScript 中生成 HTML 与加载 HTML 文件答案

【问题标题】：Generating HTML in JavaScript vs loading HTML file在 JavaScript 中生成 HTML 与加载 HTML 文件
【发布时间】：2013-10-10 02:59:27
【问题描述】：

目前我正在创建一个完全由 JS 驱动的网站。我根本不使用任何 HTML 页面（索引页面除外）。每个查询都返回 JSON，然后我在 JavaScript 中生成 HTML 并插入到 DOM 中。这样做有什么缺点，而不是创建具有布局结构的 HTML 文件，然后将该文件加载到 DOM 并使用来自 JSON 的新数据更改元素？

编辑：我所有的页面都加载了 AJAX 调用。但我有这样的结构：

<nav></nav>
<div id="content"></div>
<footer></footer>

基本上，我从不更改 nav 或 footer 元素，它们只在加载 index.html 文件时加载一次。然后在每个页面上单击我向服务器发送一个 AJAX 调用，它以 JSON 格式返回数据，我使用 jQuery 生成 HTML 代码并像这样插入 $('#content').html(content);

创建单独的 HTML 文件，然后例如使用 $('#someID').html(newContent) 使用 JSON 数据更改每个元素，将使用更多代码，并且我需要向服务器发出更多请求来加载此文件，所以我想我可以生成在浏览器中。

编辑2： SEO 不是很重要，因为我的网站需要登录，所以我会在 index.html 文件中创建所有元标记。

【问题讨论】：

据我了解，javascript 和 DOM 在这个主题上不是朋友。在我的经验中，我发现在 html 文件中编辑和创建 html 更容易。我喜欢分离我的资源（js 只用于 js，html-files 用于 html 等）
你为什么要这样做？
你为什么要问这个问题@MikeHometchko？这就是许多单页应用程序的工作方式。
@JayC 嗯，不是这样。如果他说“我通过 Javascript/JQ、XAML、XML、处理程序、视图、razor/asp 表单等生成 HTML”，那么我就不会那么怀疑了。

标签： javascript html json dynamic

【解决方案1】：

总的来说，这是一种很好的做事方式。我假设您每次都使用 AJAX 更新页面（尽管您没有这么说）。

有些事情需要注意。如果您始终拥有相同的 URL，那么您的用户将无法返回相同的页面。他们不能将链接发送给他们的朋友。为了解决这个问题，您可以使用history.pushState() 来更新 URL 而无需重新加载页面。

此外，如果您每页发送多个请求，并且没有等待它们的 HTML 结构，则每次都可以以不同的顺序返回它们。这不是问题，只是需要注意的事情。

从 AJAX 返回 HTML 是个坏主意。这意味着当您想要更改页面的布局时，您需要编辑所有文件。如果您要返回 JSON，则在一处进行更改会容易得多。

【讨论】：

我认为问题不是关于 AJAX 方法的好坏，而是更多关于是否通过 ajax 加载 htmlfile 或文件中的 dom 元素。

【解决方案2】：

如果您关心 SEO，您会希望 HTML 在页面加载时出现，这比您的第一个策略更接近您的第二个策略。

2014 年 5 月更新：Google 声称在执行 Javascript 方面做得更好：http://googlewebmastercentral.blogspot.com/2014/05/understanding-web-pages-better.html 仍然不清楚哪些有效，哪些无效。

更多更新可能属于这里：Do Google or other search engines execute JavaScript?

【讨论】：

【解决方案3】：

我认为你可以考虑3种方法：

仅向客户端发送 JSON 并根据模板（即 handlerbar.js)
从服务器端创建页面，通常渲染速度更快，您也可以缓存页面。
或者混合使用从服务器生成部分视图并将它们发送到客户端，例如，这就像在客户端上有一个车把模板并应用来自 JSON 的数据，但只有在服务器端使用相同的模板并在服务器上渲染并以最终格式发送给客户端，在客户端您可以只替换部分视图。

还有一些需要考虑的事情取决于应用程序的用例，如果您针对的是 SEO，您应该考虑 ColBeseder 的建议，如果您针对的是移动用户，可能您最好使用仅 JSON 响应，因为这是一个更轻量级的响应。

编辑：

根据您所说的您正在创建单页应用程序，如果这是正确的，那么您可能可以使用 JSON 或像 AngularJS 那样的部分视图。但是，如果您的服务器端逻辑仅用于处理 JSON 响应，那么您可能最好在客户端上使用模板引擎，例如 handlerbar.js、underscore 或 jquery templates，并且您可以定义 HTML 的可重用部分并将 JSON 中的数据应用到它。

【讨论】：

【解决方案4】：

绝对重要的一件事：

您需要多长时间才能开发出一个新系统，该系统将以 JSON 格式发送数据 + JS 将其作为 HTML 注入页面所需的代码？

返回 HTML 需要多长时间？如果您可以重复使用一些已经存在的服务器端代码，需要多长时间？

并检查您的页面的服务器端交互有多少...

还有一些创建纯 HTML 的优点：

1) 它是简单的标记，通常与 JSON 一样紧凑或实际上更紧凑。

2) 它不太容易出错，因为您得到的只是标记，没有代码。

3）在大多数情况下编程会更快，因为您不必为客户端单独编写代码。

4) HTML 是内容，JavaScript 是行为。您完全没有令人信服的理由将两者混合在一起。

在 javascript 或其他脚本语言中 .. 如果您在其余代码之间遇到问题，将无法正常工作

而且在纯 html 页面中调试也更容易

我的意见...在必要时使用 scriptiong 代码 .. 其余代码您可以在 html 中执行... 它将节省前往服务器的行程时间，然后获取数据，然后再次显示。

在编码时牢记第 4 点。

【讨论】：