javascript - 大量使用 ajax 问题 - 如何在页面上最初和之后在修改时呈现 html？

Question

我确信这是当今许多网络应用程序的常见问题。重用 html 模板的最佳方式是什么，这样您就不会在最初呈现页面时和在该页面中添加新内容时加倍？

1. 我可以正常呈现 HTML 页面，但不专门填充任何数据。然后，页面的每个部分将负责使用 Javascript 呈现自身。这种方法的好处是 javascript 用于呈现所有可更新的内容。这里还有一个非常好的关注点分离，页面上的每个部分都做自己的事情。

   缺点是我在每个页面加载时向服务器发出多个请求。

2. 我可以发送服务器生成的 HTML 片段，然后将它们添加到页面的任何部分。这使得页面的初始加载速度非常快。它还重用了相同的服务器端模板代码，因此也没有重复。

   缺点是我无法进一步检查它。另一个缺点是前置/附加非常有限。如果我想保持它的排序方式怎么办？如果它是按字母顺序排列的，则用户无论如何都必须刷新屏幕才能获得正确的排序顺序。如果结果是分页的，这样做就更麻烦了。

3. 我可以发送一个 JSON 数据结构，就像在 1 中一样 - 但是，我还可以添加完全生成的 html 模板。这将使我能够先检查对象，然后再决定如何将其添加/附加到页面。

   这里唯一真正的缺点是我必须在我的 Controller 中手动调用 Freemarker(我使用的是 Spring 3.0.x MVC)。这通常是自动为我完成的。我确信有办法做到这一点，但我必须花一些时间研究如何做。

   实际上，这给了我 1 和 2 的所有好处，但它也是最复杂的解决方案。传输的数据量也高于其他两种解决方案……但这也许无济于事。

哪种方式被认为是最好的？还有其他方法吗？我正在构建的应用程序非常复杂，并且将使用大量的 ajax。等效的纯 HTML 版本是不可能的。事实上，我什至不打算构建应用程序以便非 Javascript 用户可以使用它。那好吧。所以在回答时请记住这一点；)

谢谢

Answer 1

我会使用 moustache.js用于填充从 JS 收集的值的模板部分。

此外，如果您不想在初始加载时使用 ajax，则可以在初始 html 的脚本标签中以 json 格式编写初始页面的 json。

最后，如果您正在做一个非常复杂的 ajax 应用程序，我建议您使用 backbone.js ，一开始有点难以理解，但它真的很强大!这是一个complete example与 commented code .