UI开发-JavaScript与Ajax

这是一个设计问题。我发现自己在两种UI设计风格之间来回穿梭

我最近开发的原型UI严重依赖于通过AJAX将UI元素作为部分视图加载。我不喜欢这种方法，因为我必须在加载页面时向服务器发出大量请求。然而，这种设计的优点是我可以轻松地编辑局部视图模板，因此代码更易于管理

在下一次迭代中，我决定一次性打包所有信息，然后使用JavaScript生成部分视图并将这些信息插入其中（并且仅在实际需要按需更新信息时使用Ajax）。我的页面加载速度更快，但我发现自己用JavaScript生成了很多HTML片段，这越来越难管理

在我看来，使用Ajax您可以：

• 易于维护（+）
• 更长的用户界面响应时间（-）

仅使用JavaScript，您就可以

• 更快的UI响应（+）
• 更容易处理服务器端错误（+）
• 更难维护（-）

因此，有几件事我想听听你的意见：

我不喜欢使用Ajax，除非我不需要实际的按需数据。我错了吗

是否有框架/库可以使管理生成HTML的JavaScript代码变得更容易

这两种方法是否还有其他我没有注意到的优点/缺点

---

谢谢，

为什么不考虑集成到您的工作流程中？我不完全确定它将如何与模板一起工作，但在它们的管道中包括了将所有必需的脚本文件打包到单个.js中的功能，以便由单个服务器请求/响应提供服务。

如果您想参与其中，有JavaScript模板库。一般来说，我会避免手动将JS中的HTML字符串粘在一起，除非有特殊需要（例如在某些情况下，在处理非常大的表时为了性能）

HTML黑客很难阅读，而且如果你没有正确地逃逸，很容易出现HTML注入安全漏洞

而是从DOM方法开始，使用类似于DOM的内容操纵库来简化操作。例如，如果使用jQuery，请执行以下操作：

$('<a>', {href: somelink, text: sometext})

$（“”）//不安全的混乱

通过XMLHttpRequest获取数据与将数据包含在HTML文档本身之间不需要有太大区别。您可以将一组JSON数据定向到将构建页面部分的同一个函数，不管它是在更新操作中由XMLHttpRequest获取的，还是在文档加载时包含在函数调用中的

在页面中包含数据时，通常需要包含在任何情况下生成的时间戳，这样，如果浏览器稍后返回页面而不重新加载，则浏览器可以检测到信息现在已过期，并提示XMLHttpRequest进行更新

当您使用客户端JavaScript从数据创建页面内容时，通常的问题是，您是否也要从服务器填写初始静态HTML版本？如果是这样，您将在客户端JS和服务器端语言（*）中重复大量内容生成工作。如果不是，那么你就让非JS用户代理（包括搜索引擎）看不见内容。这对你来说是否重要通常取决于应用程序正在做什么（即它是否需要可搜索和可访问？）

---

（*：除非您可以使用node.js之类的服务器端JavaScript并重新使用内容生成代码。这仍然是一种有点罕见的方法。）

我对此没有个人经验，但看起来很有希望。它的模板在服务器端和客户端都可用，这可能会引起您的兴趣。以下是人们所说的：

闭包模板最酷的地方是它们可以编译成Java和JavaScript。因此，我们使用Java服务器端将模板转换为HTML，但我们也可以在JavaScript客户端中进行动态呈现。例如，如果您直接键入配置文件页面URL，我们将在服务器端呈现它，但是如果您转到流（比如）并导航到某人的配置文件页面，我们将使用AJAX进行操作，并使用相同的模板在客户端呈现它

---

在加载页面后处理远程数据时，对于小型数据集，我更喜欢只返回数据并使用模板添加到UI中

对于大型数据集，我建议使用局部视图在服务器上呈现html，以减少客户端的开销，如@bobince所述

要进行客户端状态跟踪，请查看。它使用MVVM方法，将数据模型绑定到UI元素，并使通过AJAX将数据发送回服务器变得非常简单。它可以与jquery.tmpl模板库一起使用，或者您可以更轻松地集成另一个首选库

---

就管理模板而言，在一个对象中存储公共模板非常容易，可以是在要使用远程数据检索的服务器上，也可以是在客户端的javascript对象中

有一些jQuery模板系统可以帮助生成HTML客户端，但这会带来可怕的SEO后果。使用JSON构建数据传递到客户端的系统和构建整个UI客户端的速度非常快，因为数据小于等效的HTML，但SEO问题仍然存在。@Diodeus:SEO不是这个特定站点的问题。然而，你的确切意思是什么？从理论上讲，生成与SEO配合良好的客户端HTML难道不可能吗？我猜问题在于搜索引擎蜘蛛没有启用JavaScript，所以他们看不到客户端生成的HTML。啊，是的。这里有：）所有搜索引擎看到的都是如果你“查看源代码”会得到的结果。船尾有人操纵吗

$('<a href="'+somelink+'">'+sometext+'</a>')  // insecure mess