Question

我有一个Web应用程序，它广泛使用片段标识符来处理“状态”。

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

许多问题：

1）将各种“location.hash名称值对”分配给变量以跟踪状态的好方法是什么？

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）由于某些名称被使用了两次（上例中的“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）如何存储先前的状态以及如何在按下后退按钮时触发状态更改？

Answer 1

我只会使用包含数组的对象，而不是数组。代码看起来像：

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];

Answer 2

我相信Ben Alman的烧烤可以帮助你：http://benalman.com/projects/jquery-bbq-plugin/

Answer 3

有点晚了，但jQuery 1.9导致Ben的插件出现问题（$ .browser）

可在此处找到分叉修正版本：
https://github.com/georgekosmidis/jquery-hashchange

还有一个插件可以帮助处理散列更改：
https://github.com/georgekosmidis/jquery-hashhandle

此处有更多相关内容：
http://mycodepad.wordpress.com/2013/12/19/jquery-making-ajax-applications-crawlable/

URL片段标识符 - 简化状态处理（javascript）

3 个答案: