如何處理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並不能解決問題 - 為什么我不接受任何其他答案！