アプリケーションとURLの状態を管理する方法は?

私は、内部的にURLを介して状態を管理するWebアプリケーションを構築しています。これにより、ユーザーはブラウザのボタンとサイトのUIで状態を操作できます。

私は jQuery-BBQ を使ってURLハッシュを管理しています。私はハンドラを持っていますURLが変更されたときにそれに応じて変更されるhashchange(ブラウザの戻る/進むボタンの押下など)しかし、それに応じて変更された内容は、ハッシュを変更してハッシュ変更ハンドラをトリガし、ループを発生させます。

これらのシナリオを回避するために、新しい状態が以前と同じかどうかを確認し、そうであれば救済することを自分自身が確認します。しかし、私はすぐに、各状態で動作している複数のアクタを使って、各状態を別々に扱うかなりスパゲッティなコードを手に入れています。

このような状態管理のシナリオを正常に処理する設計パターンはありますか?

2
おそらく私は私の質問では、私はURLハッシュを使用する代わりに探していない明らかではなかった;より一般的には、変更が複数の入力(UI、ブラウザの状態/ URL)から来て、プログラムの複数の部分に影響する可能性がある状態を管理する方法を見つけようとしています。
追加された 著者 ericsoco,

2 答え

今実装する特定のデザインパターンについてはお勧めできませんが、html5のpushSate()およびpopState()関数を見てみることをお勧めします。これらの関数は、状態だけでなく、それらの状態に結び付けられたデータを格納することができます。 github.comは、この手法を使用して、特定のパブリックリポジトリのディレクトリをトラバースしています。クイックガイドは次のとおりです。 https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history >。お役に立てれば。

1
追加された
うん、jQuery-BBQはpush/popStateを内部的に使用し、APIはそれらの関数名を使用します。
追加された 著者 ericsoco,

私がやったことは、自分のプログラムで状態を変更できる場所を1つだけ提供し、その1つの場所を通してすべての状態の変更をルーティングすることについて厳密になっていることです。

「1つの場所」は、公にアクセス可能な機能のグループを意味します。

  1. 要求された状態の変更を検証する
  2. リクエストされた新しい状態の変更が現在の状態と異なることを確認する
  3. アプリケーションの状態を更新する
  4. ブラウザの状態を更新する

ステップ2はおそらく最も重要です。つまり、状態変更要求がアプリケーション内またはブラウザから来ているかどうかにかかわらず、最初の変更を超えてアプリケーションまたはブラウザ内の状態を変更しようとする繰り返しの試みはありません。

これまでのところ、これはステートマシンの複雑さを私のコードの一部にカプセル化して、物事をまっすぐに保つのをより簡単にしているようです...まだ、私は他の答えを歓迎します。私はこれが何度も何度も解決されている問題だと肯定的です。

0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript