1

目前我正在创建一个完全由 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 数据更改每个元素，将使用更多代码，并且我需要向服务器发出 1 个更多请求来加载此文件，所以我想我可以在浏览器中生成它。

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

4

4 回答 4

3

In general, it's a nice way of doing things. I assume that you're updating the page with AJAX each time (although you didn't say that).

There are some things to look out for. If you always have the same URL, then your users can't come back to the same page. And they can't send links to their friends. To deal with this, you can use history.pushState() to update the URL without reloading the page.

Also, if you're sending more than one request per page and you don't have an HTML structure waiting for them, you may get them back in a different order each time. It's not a problem, just something to be aware of.

Returning HTML from the AJAX is a bad idea. It means that when you want to change the layout of the page, you need to edit all of your files. If you're returning JSON, it's much easier to make changes in one place.

于 2013-10-03T12:07:10.147 回答
2

绝对重要的一件事：

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

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

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

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

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

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

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

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

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

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

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

编码时请牢记第 4 点。

于 2013-10-03T12:26:03.183 回答
1

If you cared about SEO you'd want the HTML there at page load, which is closer to your second strategy than your first.

Update May 2014: Google claims to be getting better at executing Javascript: http://googlewebmastercentral.blogspot.com/2014/05/understanding-web-pages-better.html Still unclear what works and what does not.

Further updates probably belong here: Do Google or other search engines execute JavaScript?

于 2013-10-03T12:07:21.920 回答
1

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

  • 仅向客户端发送 JSON 并根据模板（即 handlerbar.js）进行渲染

  • 从服务器端创建页面，通常渲染速度更快，您也可以缓存页面。

  • 或者混合使用从服务器生成部分视图并将它们发送到客户端，例如，它就像在客户端上有一个车把模板并应用来自 JSON 的数据，但在服务器上只有相同的模板 -端并将其呈现在服务器上并以最终格式将其发送到客户端，在客户端上您可以只替换部分视图。

还有一些需要考虑的事情是由应用程序的用例决定的，如果你的目标是 SEO，你应该考虑 ColBeseder 的建议，如果你的目标是移动用户，你可能最好只使用 JSON 响应，因为这是一个更轻量级的响应。

编辑：

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

于 2013-10-03T12:18:09.063 回答