UI开发 - JavaScript与Ajax

Question

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

在原型我开发最近严重依赖于加载UI经由AJAX局部视图中的元素的UI。我不喜欢这种方法，因为在我的页面加载时，我不得不对服务器做很多请求。但是，这个设计的优点是我可以轻松地编辑局部视图模板，因此代码更容易管理。

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

在我看来，使用Ajax你：

• 容易维护（+）
• 更长的UI响应时间（ - ）

而且只用JavaScript的，你得到

• 更快的UI响应（+）
• 更容易处理ser VER-端错误（+）
• 难以维持（ - ）

因此，有关于这一点我想听听您的意见了几件事情：

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

2. 是否有框架/库可以使管理生成HTML代码的代码更容易？

3. 是否有这两种方法的，我已经错过了其他任何优点/缺点？

感谢，

Answer 1

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

HTML的黑客是难以阅读和容易HTML注入安全漏洞，当你没有得到正确的逃逸。

而是使用DOM方法启动，并使用类似DOM的内容操作库使其更容易。例如，如果使用jQuery，做到这一点：

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

和不此：

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

目前并不需要通过XMLHttpRequest的取数据之间有很大的区别VS包括它在HTML文件本身。您可以将一堆JSON数据引导至相同的函数，该函数将构建页面部分，无论它是由XMLHttpRequest在更新操作中获取的，还是在文档加载时的函数调用中包含的。

当在页面中包含数据时，通常需要包含它们在任何情况下生成的时间戳，以便如果浏览器稍后返回到页面而不重新加载页面，浏览器可以检测到信息是现在已经过时了，并且提出了一个XMLHttpRequest来更新它。

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

（*：除非你可以从类似的node.js使用服务器端JavaScript并重新使用你的内容生成代码，这仍然是一种比较少见的方法。）

Answer 2

为什么不看整合require.js到您的工作流程？我不完全确定它是如何与模板一起工作的，但是包含在他们的管道中的是能够将所有必需的脚本文件打包成单个.js以由单个服务器请求/响应来服务。

Answer 3

我对此没有亲身经历，但Closure看起来很有希望。关于它的模板在服务器端和客户端都可用的事情可能会让你感兴趣。以下是关于using it in Google+：

关于Closure模板的一件很酷的事情是它们可以被编译为Java和JavaScript。所以我们使用Java服务器端将模板转换为HTML，但我们也可以在JavaScript客户端进行动态渲染。例如，如果您直接输入配置文件页面URL，我们会将其呈现在服务器端，但如果您转到流说并导航到某人的配置文件页面，我们会使用AJAX进行操作，并使用完全相同的模板。

Answer 4

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

对于大型数据集，我建议使用您的部分视图来呈现服务器上的html，以减少客户端的开销，就像@ bobince提到的那样。

对于客户端状态跟踪，请查看http://www.knockoutjs.com的Knockout。它使用绑定到UI元素的数据模型的MVVM方法，并通过AJAX将数据发送回服务器非常简单。它可以与开箱即用的jquery.tmpl模板库一起工作，或者您可以更加努力地整合另一个首选项库。

就管理模板而言，很容易将常用模板存储在对象中，或者放在要用远程数据检索的服务器上，或者放在客户端上的javascript对象中。