使用JavaScript生成所有HTML

我正在制作一个Web应用程序，我想知道我应该在多大程度上使用JavaScript

它是一个简单的应用程序，可以在一个页面中创建，因此看起来“像应用程序一样”，并且响应速度很快（使用直接DOM操作结合AJAX）

我认为有三种方法可以解决这个问题：

• A） 在服务器上生成所有HTML，在JavaScript中执行较小的DOM操作，使用AJAX向服务器发布较小的更改，并重新加载页面以进行较大的更改

• B） 在服务器上生成所有HTML，但少重新加载页面，而是使用更多AJAX让服务器返回准备好的HTML，以插入到各种页面中

• C） 在JavaScript中生成所有HTML，并让服务器返回JSON对象以及要插入到HTML中的数据

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

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

---

有没有人对此有过积极的经验，从而使开发过程更加顺利？这可能是一种有特定名称的既定方法吗？

我们的产品的webclient完全由选项C制作。然而，我不能说太多的好处，因为在我们的案例中，它是作为一种必要性开始的：a）它开始于即使是最古老的JS框架也在进行初步开发的年代；b） 该项目有很多程序员在Java/OOP方面有经验，但他们对html的声明性感到不安

那么，当时所做的是一个“OO-JS”框架，它使用了Javascript可用的所有OO攻击（例如继承攻击、伪封装等）来制作一个“感觉”很像Java编码的API——你有一个对象层次结构，你可以编写一些修改页面html的函数式代码。所有这些都不涉及html本身。以前很酷，现在很正常

因此，我们一直使用这个自制的框架（现在迁移到第三方框架的成本太高了），而且它的功能与最初的预期基本相同。我们的页面只不过是一堆JS导入（还有i18n'ed消息、各种文本常量等）加上一个函数，在

DOMContentLoaded

事件时触发整个过程。之后，剩下的工作完全由Javascript来完成

---

现在，我们的产品使用了一个由大量ajax调用驱动的非常丰富的UI，我不能诚实地推荐在任何其他情况下使用方法C——采用a或B方法都可以实现更简单的UI。但我相信您对此非常了解。

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

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

---

其中一个模板系统比较可以在

上找到几年，现在我们在几乎所有的web应用程序中都使用了方法C。这有一些好处，尤其是在系统负载较重的情况下。在我们的体系结构中，有一组web服务器提供静态内容（.html、.js、.css、.png等文件），而动态请求则转发到另一组应用服务器（基于URL模式的REST请求）。通常，这些应用服务器是所有业务逻辑和与数据库或其他后端系统通信的瓶颈。因此，在许多客户机上生成HTML需要从少数几个应用服务器上构建服务器页面。此外，由于JSON对象通常比整个HTML标记小得多，超过了必须传输一次的额外JavaScript代码（无论如何，浏览器都可以缓存它），因此您正在减少通信量

现在在.html文件中，您仍然可以选择使用标记进行静态标记，或者从一个空的

开始，然后用JavaScript创建整个DOM树，这是我最喜欢的方法，因为我不喜欢混合使用这两种方法

---

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

REST API和客户端中的呈现视图是目前SPA的常见结构。我会选择C。C就像javascript模板。我现在用javascript构建HTML应用程序，不再使用PHP生成的HTML。一位为谷歌工作的朋友不出所料地说服我，更好的方法是下载一个固定的HTML文件（可以缓存），然后使用AJAX/JavaScript从中构建。一旦用户登录，页面就不会重新加载。您是否考虑过在这个单页应用程序中使用JS框架，如Angular、Ember或Backbone？DOM操作将非常简单，您也可以在任何需要的地方使用ajax。然而，我在博客圈中看到的一些随机现象表明，使用方法C确实会使加载时间和总体性能变得更差，主要是在移动客户端上，这些客户端实际上不像台式机那样处理繁重的Javascript。所以我们需要考虑。尽可能多地提供静态HTML，然后使用渐进增强技术进行个性化，这将是最快的，如果需要大量工作的话。（这是你提到的所有方法的混合。）PS：我们的webclient最近制作的部分的一些图片（它是高度模块化的，所以它在不同的公司产品中使用，但很少有新的屏幕截图）：