用模板构建 HTML 还是用 javascript 构建它？答案

【问题标题】：Building HTML with templates versus building it in javascript?用模板构建 HTML 还是用 javascript 构建它？
【发布时间】：2011-05-13 12:09:00
【问题描述】：

我最近开始制作网络应用程序，虽然我制作了一些可行的东西，但我不确定最佳做法。

到目前为止，我主要使用 Django、web.py 和 PHP 的模板系统。但是现在我使用 jQuery 和漂亮的 ajaxy 魔法从服务器获取数据而不刷新客户端，我看到了直接在 javascript 中构建 HTML 的优势（所以我可以发送一个小的 json 对象到客户端和让他弄清楚要改变什么以及如何改变）。

所以现在我有一些用模板渲染的位，还有一些是用 javascript 构建的，甚至还有一个可怕的情况，即两者混合的 web.py 模板，它生成一个创建 HTML 表的 javascript 函数- 感觉又像 C 宏了！（我最终会重构它）

这是 Web 开发中的常见问题吗？任何推荐的最佳实践，例如“对所有内容都使用 json，在 javascript 中尽可能多地呈现”、“使用库 foo”等？对于模板处理什么以及javascript处理什么有什么好的启发式方法吗？

在这里搜索了一下，我发现有人asking about javascript templates，这似乎是一个可能的解决方案。

【问题讨论】：

标签： ajax django-templates web.py jquery-templates

【解决方案1】：

请不要使用 Javascript 来布局您的页面。只在需要的地方使用它。

尽管最近进行了增强和标准化，Javascript 通常仍然很慢，难以完全兼容（想想旧的 IE 和其他），并且与某些屏幕阅读器和抓取工具/搜索引擎不太兼容。

如果您可以通过直接返回 HTML 来做到这一点，那么这通常是您想要的方式。

【讨论】：

更不用说隐藏在客户端脚本后面的任何内容对搜索引擎都是不可见的。
@bobince，这就是我所说的刮板的意思。我已经澄清了这个帖子。
我目前的用途需要 Javascript - 我正在制作具有相当动态页面的应用程序，无论如何都需要相当数量的客户端 javascript（用于突出显示、选择、更新而不重新呈现整个页面等）。 )。这不是我希望搜索引擎找到的内容。

【解决方案2】：

这里有一个稍微相关的question。

您可以为两者使用相同的模板 - this library 看起来很有趣。

您只能在服务器上呈现模板...顶部的the question 有一种方法可以有效地做到这一点。

如有必要，您可以在 javascript 中复制某些模板 - 试试 jqtemplate。

就我个人而言，我可能只会在服务器端呈现 HTML，以避免模板重复。如果我的服务器更像是一个 JSON Web 服务，我可能会为其他客户端提供服务，我会做 JS 模板。

也就是说，如果您的网站可访问且对 js 不友好对您很重要（应该如此），那么完全不使用 js 来编写您的网站，然后 progressively enhance 它。

【讨论】：

你所说的让我觉得我的服务器是更像是一个 JSON Web 服务，或者至少它的某些部分是。这不是我习惯做的区别（正如我所说，我是网络应用程序的新手），所以感谢您的澄清:)

【解决方案3】：

永远不要将您网站的功能基于 javascript。如果这样做，您将失去所有关闭 javascript 的访问者。如果你真的想要，你需要检测关闭 javascript 的用户，然后重定向他们；或提供<noscript> 替代方案。此外，虽然爬虫现在可以解析 javascript，但它仍然对网站的 SEO 造成了巨大的损害。还有兼容性和开销问题，这可能是当今移动设备、上网本等的问题。

【讨论】：

我真的不认为在关闭 javascript 的情况下失去所有访问者是一件大事了，特别是如果您将目标人群纳入决策时。网站变得更加动态和大量使用 javascript，因此如果您将其关闭，您将失去很多网络体验。
正如我对 Brad 所说，我 am 无论如何都将我的 web 应用程序的功能基于 javascript，我主要想知道一种干净的方法来做到这一点（干净如可理解、可修改、可重用的代码，如果它不能在移动平台上运行，我不介意）。

【解决方案4】：

前段时间我也遇到过同样的麻烦。我有一个网页，它使用 web.py 模板呈现一些东西，它有 ajax 分页。所以它必须使用 javascript 渲染下一页。我最终扩展了 web.py 模板引擎以生成一个 javascript 函数来呈现相同的模板输出。

有关详细信息，请参阅此博客文章：

http://anandology.com/blog/javascript-templating-with-webpy/

【讨论】：

【解决方案5】：

AngularJS 是一种流行的客户端模板解决方案，这是我在问了这个问题多年后才发现的。您可以像在 Django 中一样编写 HTML 模板（“部分”），然后让 javascript 获取并根据需要解释它们 - 这样您就可以获得两全其美的动态网站，代码和布局清晰分离。

【讨论】：