使用JavaScript生成所有HTML

Question

我正在开发一个Web应用程序，想知道JavaScript的使用范围应该有多广。

这是一个简单的应用程序，可以在一个页面上完成，因此看起来像一个“应用”并具有快速响应（使用直接DOM操作和AJAX）。

我可以采取三种方法：

A) 在服务器上生成所有HTML，在JavaScript中进行轻微的DOM操作，使用AJAX将较小的更改提交到服务器，并为较大的更改重新加载页面。

B) 在服务器上生成所有HTML，但重新加载页面次数较少，而是使用更多的AJAX，使服务器返回准备好的HTML以插入各种元素。

C) 在JavaScript中生成所有HTML，并让服务器仅返回JSON对象以插入HTML中的数据。

我对选项C感到好奇的原因是它会给人一种有趣的MVC感觉。服务器处理模型，客户端处理视图。

请注意，缺乏JavaScript的客户端不是问题，我会使用JavaScript框架确保浏览器兼容性。

是否有人有积极的经验来简化开发过程？这也许是一种已经有特定名称的已建立方法吗？

- forthrin

---

现在，REST API和在客户端呈现视图是单页应用程序常见的结构。我会选择C。 - elclanrs

C类似于JavaScript模板。 - Harish Ambady

我现在使用JavaScript构建HTML应用程序，已经不再使用PHP生成的HTML。一位在谷歌工作的朋友毫不意外地说服了我，更好的方式是下载一个固定的HTML文件（可以缓存），然后使用AJAX / JavaScript进行构建。一旦用户登录，页面就不会重新加载。 - Nick

你是否考虑过在这个单页应用中使用像Angular、Ember或Backbone这样的JS框架？DOM操作会非常容易，而且你还可以在需要的地方使用ajax。 - yetanotherse

在博客世界里，我看到了一些东西表明使用C方法确实会使加载时间和性能变差，特别是在移动客户端上，它们不能像桌面电脑那样处理重量级的JavaScript。所以这也是需要考虑的。尽可能多地提供静态HTML，然后使用渐进增强技术进行个性化，将是最快的方式，但需要大量工作。（这有点像你提到的所有方法的混合体。） - millimoose

Answer 1

我们产品的web客户端完全由选项C构建。然而，对于收益方面我不能说太多，因为在我们的情况下它起初是出于必要性的原因：a）当时甚至最古老的JS框架还在起步阶段；b）该项目拥有许多有Java/OOP经验的程序员，但他们对html的声明性感到不适。

因此，当时所做的是一个“OO-JS”框架，它利用了所有可用于Javascript的面向对象技巧（例如继承技巧、伪封装等），以创建一个API，这个API在编程时“感觉”更像是Java编码——你拥有一系列对象的层次结构，可以编写一些功能式代码来修改页面上的html。所有这些都不需要直接操作html本身。当时这非常酷，现在已经很普通了。

因此，我们至今仍在使用这个自制框架（迁移到第三方框架的成本现在过高），它仍然以最初的意图工作。我们的页面只是一堆JS导入（还包括i18n的消息、各种文本常量等），加上一个在DOMContentLoaded事件发生后启动整个过程的函数。之后——纯粹由Javascript完成剩下的工作。

现在，我们的产品使用了许多ajax调用驱动的非常丰富的UI，老实说，在其他情况下我不能真诚地推荐使用C方法--更简单的UI可以通过采用A或B方法更容易地实现。但我相信你很清楚这一点。

- just_dont

---

PS：我们的网络客户端最近制作了一些部分，这是高度模块化的，因此在不同的公司产品中使用，但新鲜的屏幕截图很少出现。链接：http://www.rocketsoftware.com/products/rocket-mainstar-mxi-zos/screenshots - just_dont

Answer 2

一些模板系统支持服务器端和客户端。一旦编写完成，模板页面可以在两个方面使用。

通过检测HTTP请求是AJAX还是旧式的，服务器端可以发送JSON字符串（作为模板数据映射）而不是呈现的HTML内容。它们使您可以平稳地在三个计划之间切换。

可以在http://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more找到此类模板系统比较之一。

- Map X

Answer 3

多年来，我们几乎在所有的 Web 应用程序中都使用了 C 方法。这样做有一些好处，特别是当您的系统负载很重时。在我们的架构中，有一个群集的 Web 服务器提供静态内容（.html、.js、.css、.png 等文件），而动态请求则转发到另一个应用服务器群集（基于 URL 模式的 REST 请求）。通常，这些应用服务器是瓶颈，因为它们包含所有的业务逻辑和与数据库或其他后端系统的通信。因此，在许多客户端上生成 HTML 可以将构建服务器页面的负载从少数应用服务器中卸载出来。此外，您还可以减少流量，因为 JSON 对象通常比整个 HTML 标记小得多，超过了必须传输一次的额外 JavaScript 代码（它可以被浏览器缓存）。

现在，在您的 .html 文件中，您仍然可以选择使用标签进行静态标记，或者从空的 <body/> 开始，并在 JavaScript 中创建整个 DOM 树，这是我最喜欢的方式，因为我不喜欢混合两种方法。

另一个考虑因素是您是否希望被搜索引擎找到。它们不会索引您动态创建的 HTML，因此在这种情况下，服务器页面可能是有意义的。

- oyophant