6

「状態」を処理するためにフラグメント識別子を多用する Web アプリケーションがあります。

examplesite.com/#$mode=direct$aa;map=t;time=2003;vid=4;vid=7

いくつかの質問:

1)状態を追跡するために、さまざまな「location.hash name value-pairs」を変数に割り当てる良い方法は何ですか?

1a) js で状態を追跡するオブジェクトを作成するか、名前と値のペアごとにグローバル変数を宣言する必要がありますか?

1b) これを簡素化するための優れた jquery プラグインはありますか?

1c) 「色」と呼ばれるものを追跡したい場合 - 常にフラグメント (#) に追加する必要があり、それが定義されているかどうかを確認する正しい方法は何ですか? 以下のコードを改善できますか?

var color;

var hashString = location.hash;
var nvPairs = hashString.split(";");
var nvPair = new Array();

for (i = 0; i < nvPairs.length; i++)
{
    var keyValuePair = nvPairs[i].split("=");
    nvPair[keyValuePair[0]] = keyValuePair[1];
}

if (nvPair['color']) color = nvPair['color'];       

1d) 一部の名前が 2 回使用されているため (上記の例では「vid」)、それらを個別の変数に簡単に格納するにはどうすればよいでしょうか?

2) 特に注意したい 4 つの異なる「ハッシュ」があります。

examplesite.com/ (ハッシュなし)
examplesite.com/#example=5 (「例」を含む)
examplesite.com/#time=2003;vid=4;vid=7;modified=5 (「変更された」を含む)
examplesite. com/#time=2003;vid=4;vid=7 (「変更」または「例」を含まない)

アプリケーションが上記の条件をロードしてチェックするときに、ハッシュから変数を抽出する制御構造をどのように作成しますか?

3) 前の状態をどのように保存し、戻るボタンが押されたときに状態の変更をトリガーする方法を教えてください。

4

3 に答える 3

2

配列の代わりに、配列を含むオブジェクトを使用するだけです。コードは次のようになります。

var color; 

var keyValuePair,
    hashString = location.hash,
    nvPairs = hashString.split(";"),
    nvPair = {}; 

for (var i = 0; i < nvPairs.length; ++i){ 
    keyValuePair = nvPairs[i].split("="); 
    if (keyValuePair[0] in nvPair)
      nvPair[keyValuePair[0]].push(keyValuePair[1]);
    else
      nvPair[keyValuePair[0]] = [keyValuePair[1]];
} 

if ('color' in nvPair) color = nvPair['color'][0];
于 2010-01-30T17:44:18.303 に答える
1

ベンアルマンのバーベキューがあなたを助けることができると私は信じています:http://benalman.com/projects/jquery-bbq-plugin/

于 2010-01-26T13:21:01.723 に答える
0

これについては少し遅れていますが、jQuery 1.9 は Ben のプラグイン ($.browser) で問題を引き起こします

フォークされた修正版はこちらにあります:
https://github.com/georgekosmidis/jquery-hashchange

そして、ハッシュの変更を処理するためのプラグインはこちらにあります:
https://github.com/georgeosmidis/jquery-hashhandle

詳細はこちら:
http://mycodepad.wordpress.com/2013/12/19/jquery-making-ajax-applications-crawlable/

于 2013-11-29T15:48:18.110 に答える