javascript - 在服务端渲染局部 View 或在客户端发送json数据渲染模板

Question

我想知道在 Web 应用程序中呈现部分 View 的好方法(或推荐方法)是什么。

我有一个要求，我需要使用 AJAX 将数据加载到已经呈现的页面中，有点像页面末尾的 “加载更多...” 链接，它可以获取更多信息从服务器并将其呈现到页面底部。

我目前正在使用的 AJAX 响应的两个选项是

1. 返回数据的 JSON 表示，并使用客户端模板库(例如 jQuery 模板)或仅使用普通 javascript 将 JSON 转换为 HTML 并附加到页面底部
2. 在服务器上呈现部分 View (在我的例子中使用 grails 的 render template:'tmplt_name')并通过网络发送它，并将结果附加到页面底部<

还有其他方法吗？如果不是，考虑到上述选项，哪个在维护、性能和可测试性方面更好？我可以肯定的一件事是，JSON 路由(在大多数情况下)会比通过网络发送 html 占用更少的带宽。

Answer 1

这实际上是一个非常有趣的问题，因为它揭示了一些有趣的设计决策。

我更喜欢呈现部分模板，因为它使我的应用程序能够随时间变化。如果我需要从 <table> 更改到 <div>使用图表，很容易将其封装在模板中。考虑到这一点，我几乎将每个页面都视为许多小模板的集合，这些模板可能会发生变化。 Grails 2.0 默认脚手架已经转向这种类型的方法，这是一个好主意。

关于它们应该是客户端模板还是服务器端的问题是问题的症结所在。

服务器端模板让您的标记在初始页面加载时更加清晰。即使你使用类似 Mustache 的东西的 ICanHazJS ，你有点需要在页面中有一个空元素(你的模板中的东西)，适本地设置它的样式，并在 Javascript 中使用它来更新你的信息。

缺点

• “喋喋不休”的应用
• 更大的网络信封(响应包括 HTML，可能被认为是静态的)
• 较慢的用户界面响应时间

好处

• 适合具有大量服务器端语言经验的人
• 在服务器端环境中可能更容易操作或修改(例如，返回一个嵌入了多个模板的页面，这些模板以编程方式加载和包含)
• 将大部分应用程序内容“放在一个地方”

然而，客户端模板确实可以减少服务器负载。他们使应用程序“不那么啰嗦”，因为您可以通过发送回更大的 JSON 集合(以相同或更少的字节数，将由 HTML 占用)来最大程度地减少对服务器的调用次数服务器端模板方案)。它们还使用户的 UI 体验非常快，因为单击“更新”链接不必进行 AJAX 往返。有人说:

Anthony Eden @aeden 10 Dec Reply Retweeted Favorite · Open the future of web apps: requests are handled by functions, logic is always asynchronous, and HTML is never generated on the server.

缺点

• 不利于 SEO(初始页面加载时的非语义无关 UI 元素)
• 需要一些 Javascript foo(操作元素)

好处 - react 灵敏 - 较小的信封

趋势似乎正在向客户端模板发展，尤其是随着 HTML5 添加项(如 <canvas>)所展现的强大功能...但是如果利用它们需要您依赖您不太熟悉的技术，并且您对 Grails partials 感觉更舒服，可能值得从这些开始，然后根据性能和其他问题研究对客户端模板的重构。