编写一个仅在客户端运行的单页面网页

Question

我正在考虑尝试一个想法，主要是为了好玩，我的问题是这是否合理，是否有任何库或框架可以使这个实验变得更容易一些。

那么，这个想法：基本上就是为我开发的网站编写一个新的UI，但只使用客户端代码来完成。我可以使用ajax读取/写入数据，因为我的现有网站具有允许我执行各种查询的API。这使我可以使用JavaScript完成整个过程，并理论上将所有代码放在单个文件中。

显然，有一些限制需要解决；书签、页面刷新、后退按钮等。但这些限制正是使它有趣的地方，对吧？:) 我不太担心搜索引擎索引，因为用户必须登录才能使用该网站。

网站本身并不是过于复杂，但也不简单。有四个不同级别的用户，多种语言和相当多的数据需要呈现。

这是一个坏主意吗？如果是，您为什么会反对它？您是否知道任何JavaScript框架或库可以使这更容易？（不，我不是在寻找像Google Web Toolkit这样的抽象层；我希望纯粹使用JavaScript）

- Jakob

Answer 1

我有个同事做过这件事。这个概念的一个好处是，当用户“更改页面”时，您不会有大量POST，因为实际上他们直到最后一次提交数据之前都没有更改页面。他为产品注册软件做了这个，这很好。我们的服务器只在用户最初请求页面时以及提交数据时受到压力。

这个概念的主要缺点是，大多数Web开发人员都没有预料到这一点。我的同事（和您）有个很酷的想法，但除非它被良好地实现，带有注释、100%有效的HTML和一系列其他良好的设计原则，否则它可能会令人困惑，因为大多数Web开发人员基本上从未见过这样的做法。他的网站很难处理，因为他实际上不知道工程化Web软件意味着什么，而且所有东西都是拼凑出来的。我的组织从未追求过这个（潜在有用的）想法，因为他的实现非常差。

因此，当我看到这个想法时，我想到的权衡是：

1.) 在中间页面不能要求任何服务器端交互。 2.) 初始页面加载时间较长，但没有中间页面请求（更好的优化）。 3.) 这与任何人通常做的都非常不同，这意味着您需要特别小心文档。 4.) 此设计概念可促进完全独立的Web软件在没有Web的情况下轻松部署。 5.) 您可能会增加复杂性以避免页面加载，但也许并不是。我不确定。

总之，我认为它只取决于您想要实现什么。我的同事只是想看看他是否能做到，而他确实做到了。然而，他做得非常糟糕，以至于其他所有人都将他的差劣实现与一个糟糕的想法联系起来，这是相当令人难过的。

大多数情况下，我认为如果您遵循良好的Web设计实践，这不会太糟糕。但是，您的目标是什么？

很抱歉我没能直接回答您的所有问题。但我希望我的经验对回答是否认为这是个坏主意仍有帮助。

-Brian J. Stinar-

- Brian Stinar

---

很好的观点，有用的答案！我确实考虑过它对其他开发人员的影响（这也是我在这里询问的原因之一）。很高兴听到一些关于它的想法。 - Jakob

Answer 2

SproutCore 是其中一款最好的单页应用程序框架之一，适用于潜在复杂应用程序的开发。与其他一些框架（如GWT或Cappucino）不同，SproutCore 真正专注于直接使用 JavaScript。当然，它们并不是唯一的选择。您还可以考虑 JavaScriptMVC 和 qooxdoo。

就我个人而言，我使用 JavaScript 构建了一个非常大且复杂的单页应用程序。目前它已经有约 100,000 行代码（包括注释和空格）。为了达到这样的规模，我构建了自己的框架、构建工具等，使其易于维护。你问它是否可行，我可以告诉你，它确实可行，但如果你要做一些大型项目，你需要一些基础设施。（顺便说一句，有很多懒加载——并不是一次性加载所有的 100,000 行代码！）

我也不会真正推荐这种方法用于除 Web 应用程序之外的任何事情。正如指出的那样，这仍然对 SEO 有一定难度，并且可能对某些用户来说很奇怪。

- Russell Leggett

---

SproutCore看起来很有前途，我会深入研究它。谢谢！ - Jakob

Answer 3

你正在寻找 ExtJS

- knitti

Answer 4

另一种方法：在Java中编写相同的代码。请查看ItsNat

想象一下JavaScript，但在服务器端用相同的DOM API以Java代码编写，这样在没有自定义客户端/桥接器的情况下更容易管理应用程序，因为UI和数据是在一起的。

关于SEO、书签等方面，在单页面中有解决方案，请查看Single Page Interface Manifesto

- jmarranz

Answer 5

我用jquery和spring mvc 3搭建了我的网站。对我来说，它运行良好，而且在使用时感觉轻巧、流畅。 如果你有时间认真研究javascript...那真的是很好的练习。 唯一需要添加的是SEO，因为蜘蛛只看到初始的html。如果这对你很重要，我认为后端静态文件和站点地图就足够了。

- Milan Aleksić

---

顺便说一下，如果你想了解它的外观，地址是www.milanaleksic.net - 尽管仍在开发中。 - Milan Aleksić

感觉有点像Flash，谢谢提供链接。 - Jakob

Answer 6

我发现了一个非常轻量级的东西，它提供了基本所需的功能，而不会强制你使用整个框架。它叫做Sammy，受到Ruby的Sinatra启发：http://code.quirkey.com/sammy/

非常推荐！

- Jakob