如何处理jQuery中的后退按钮？

Question

我找不到令人满意的方式来处理浏览器的历史记录。 当然有像History.js这样的可爱插件，适用于较小的东西。 但让我举一个例子：

我有一个多页面的表单，要求用户提供不同的东西。 每次提交到下一页（实际上相同，它只是根据HTTP-POST变量更改视图）后，页面上会有一些动画和更改：

• 主要内容更改为下一个表单（使用slideUp / slideDown）
• 进度条通过动画更改其状态
• 下面这条，对一些输入一些信息淡入

所以这现在很基本，但是我已经很努力了，因为每个状态（不同的div，不同的输入源）的所有动画（最后2个部分）都不相同，而且我不知道如何使它们如此通用，我不必分开指出它们。

我可以忍受这一点，但是当用户点击后退按钮时，我必须再次重新定义所有这些动画（反过来）。 内容加载肯定没有问题，它基本上只是使用ajax-load重新加载文件：

• 我使用输入数据执行一个pushstate作为提交时的stateObj
• 所以我可以在绑定的'statechange'事件中执行content-load

如上所述，其余的让我感到疯狂。

Answer 1

我强烈建议学习和学习Backbone.js。 它与jQuery配合使用，并以修改后的MVC模式设置您的网站。 它还有一个很好的系统来处理URL更改和执行适当的代码。

至于滑动，如果要反转动画，要跟踪它可能会有些麻烦。 当我在屏幕之间滑动时，我对应用程序所做的操作不是有时向上滑动有时是向下滑动，而是始终将要滑动的DOM中的元素移动到要从其滑动的元素之后。 这样幻灯片总是朝着同一个方向前进，我的动画也不会让所有人都高兴。

Answer 2

您可以尝试JavaScriptMVC ，其中包括jQuery。 不确定它是否符合您的确切要求，但它是JavaScript和MVC ...

Answer 3

虽然不是非常严格的MVC（其中有几个用于JavaScript）我认为骨干js是一个很好的框架，它基于MVC的概念，但重新工作以更好地适应JavaScript语言和环境。

Answer 4

经过大量的努力和解决之后，我决定为我的问题降级为最简单和最好的解决方案：使用基础知识。

当用户点击后退/前进按钮时，我只是用ajax重新加载整个站点，而不是向后/向前设置动画，所以我可以使用所选站点的stateObj的HTML / PHP回退。

History.js的问题是它无法区分onstatechange事件中的pushState和back / forward按钮。 因此，我使用pushstate从History.js降级到标准的W3C行为。 将有1.8.0的更新，允许区分内部和外部状态变化。

感谢所有答案，但我想这是处理它的最准确方法，而单独使用MVC并不能解决问题 - 为什么我不接受任何其他答案！