如何管理应用程序和 URL 中的状态？答案

【问题标题】：How to manage state in application and URL?如何管理应用程序和 URL 中的状态？
【发布时间】：2011-12-19 02:54:15
【问题描述】：

我正在构建一个在内部通过 URL 管理状态的 Web 应用程序，以允许用户使用浏览器按钮以及网站的 UI 来操作状态。

我正在使用jQuery-BBQ 来管理 URL 哈希，并且我在 hashchange 上有一个处理程序，当 URL 更改时会相应地更改内容（例如，按下浏览器后退/前进按钮）。然而，事情本身发生了相应的变化，我最终改变了哈希，从而触发了 hashchange 处理程序并导致了一个循环。

为了避开这些情况，我发现自己检查新状态是否与之前的状态相同，如果是则放弃。但我很快就得到了相当意大利面的代码，分别处理每个状态，并在每个状态上运行多个参与者。

是否有一种设计模式可以优雅地处理这种状态管理场景？

【问题讨论】：

也许我的问题并不清楚我不是在寻找使用 URL 哈希的替代方法；更一般地说，当更改可能来自多个输入（UI、浏览器状态/URL）并且可能影响程序的多个部分时，我试图找到一种管理状态的方法。

标签： javascript design-patterns url state

【解决方案1】：

我现在不能向您推荐任何要实现的特定设计模式，但我可以建议您看看 html5 的 pushSate() 和 popState() 函数。这些函数能够存储状态以及与这些状态相关的数据。 github.com 正在使用这种技术来遍历某个公共存储库的目录。这是一个快速指南：https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history。希望这会有所帮助。

【讨论】：

是的，jQuery-BBQ 内部使用 push/popState，它的 API 使用这些函数名。

【解决方案2】：

我最终做的是严格地在我的程序中只提供一个可以更改状态的位置，并通过该位置路由所有状态更改。

“一个地方”是指一组可公开访问的功能，其工作包括：

验证请求的状态更改
验证新请求的状态更改与当前状态不同
更新应用状态
更新浏览器状态

第 2 步可能是最重要的——它确保状态更改请求是来自应用程序内部还是来自浏览器，除了初始更改之外，不会重复尝试更改应用程序或浏览器中的状态.

到目前为止一切顺利，这似乎将状态机的复杂性封装在我的代码的一部分中，从而更容易保持直截了当......不过，我欢迎任何其他答案。我很肯定这是一个已经解决了很多次的问题。

【讨论】：