hash.js Javascript/jQuery 解析/监听url hash

来源：互联网发布：知乎怎么挣钱编辑：程序博客网时间：2024/05/16 20:19

1、什么是hashsearch、hashpath

其实那，hashsearch、hashpath这两个词是我自造的。在javascript语言里称url改变该部分不会影响页面重新加载的部分为hash，在后台语言里称之为fragment（碎片）。在这里，我们统称为hash。

在js里获取hash部分，可以使用如下语句获取：

// 获取当前浏览器的hash部分// 如浏览器的url为：http://qianduanblog.com/#helloworldvar hash=location.hash;//=>"#helloworld"

在html发展的历史中，以前使用hash的作用很简单，就是做锚点使用。hash的“#”和CSS里的“#”是相同的意思，表示id。url的hash部分为#123，那么就会在页面打开的时候直接定位到id=123的元素位置。这个特性，已经被所有浏览器所接受并支持。通常这一功能用作于文章的目录部分，表示索引作用。

如下示例：

<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>指向id=123的内容</title><style>div{height: 200px;margin-bottom: 10px;background: #eee;}</style></head><body><a href="#123">点击这里立即跳转到id=123的元素位置</a><div id="121">id=121</div><div id="122">id=122</div><div id="123">id=123</div><div id="124">id=124</div><div id="125">id=125</div></body></html>

如上例子，点击a链接就改变了当前url的hash，指向了hash指向的位置。当前了，如果为hash的id的元素不存在的话，那么各个浏览器的反应是各不相同的，部分高级浏览器不会改变页面滚动条的位置，部分低级浏览器会直接跳转到页面顶部。

说到这里，要解释下什么是hashsearch、hashpath了。从字面可以理解，hashsearch=hash+search，hashpath=hash+path。可能在专业术语里已经有这两个字了，但都与这篇文章无关，因为这俩个词是自造的。什么是hash，我们已经知道了。

那什么是search呢？

在url中有一部分是search部分，如：

http://qianduanblog.com/?name=aaa&age=100http://qianduanblog.com/?name=bbb&age=10

url的“?”后面的部分称之为search值，是被后台程序所接收的。

path又是什么呢？

如下：

http://qianduanblog.com/name/aaa/age/100http://qianduanblog.com/name/bbb/age/10

一眼就看出来了，search和path的不同点，通常我们都把search的url重定向成path类型的。所以，由上可知，hashsearch、hashpath分别指的是：

http://qianduanblog.com/#?name=aaa&age=100http://qianduanblog.com/#!name/aaa/age/100

规范1：hashsearch的开头部分为“#?”，而hashpath的开头部分为“#!”，多个“#”会被忽略，多个“?”或“!”会被最后一个“?”或“!”所覆盖，如下：

http://qianduanblog.com/#!name/aaa/age/100http://qianduanblog.com/#####!!!!!!name/aaa/age/100http://qianduanblog.com/#####????!name/aaa/age/100

以上3个url的hash会被解析成相同的结果。

规范2：hash部分的解析以开头的协议规定（“?”表示search类型，“!”表示path类型），与后面的内容无关，不符合规范的部分会被抛弃解析。

2、哪些地方可以用hashsearch、hashpath

也许我们都认为url的hash是个小角色，它的作用微乎其微，就像当初我们认为ajax很渺小一样可笑。值得回味的是，把ajax发扬光大的谷歌同样在把url的hash也再次推向时代的前言，它是随着ajax的出现，诞生的一种新型url结构。

先看看如下几个url：

http://qianduanblog.com/#!user/aaahttp://qianduanblog.com/#!user/bbbhttp://qianduanblog.com/#!user/ccchttp://qianduanblog.com/#!user/ddd

从url的结构，很明显的看出来，这四个url的目的肯定是不同的，分别表示aaa、bbb、ccc、ddd四个用户所见的页面，但是有一点相同的是，这四个url是同一个页面，在浏览器打开的时候，只请求一次，不会分别请求。这是hash在url中发挥的重要特性。

有这样一个疑问了，既然页面相同的，那么四个用户的页面又如何区分呢？这里必须用到ajax，在页面载入之后，ajax载入四个用户独特的内容。

在当今，hash部分通常应用于单页面应用的丰富表现里，国外很多网站（twitter、谷歌等）已经这样做了，同样国内的如网易邮箱也这样做了。这样做的好处是：

页面只需要一次加载。
页面体验流畅，反应速度快。
页面内容按需加载，减轻服务器压力。
页面可以适配搜索引擎。

前3条的意思很明显，第4条的详细内容，意思是hashpath是可以被搜索引擎认识的，而hashsearch则不可以（目前）。所以，我们可以根据内容的不同来选择不同的hash类型。

3、jquery.hash及hashchange

说明：jquery.hash.js默认的hashType为hashpath，其标示符为”!“，而hashsearch的标示符为”?”。

Options$.hash.defaults = {    // 传入hash值，为空时默认为当前window.location.hash    hash: '',    // 默认hashtype    type: '!'}Functionsget$.hash().get();$.hash().get("a");$.hash().get(["a", "b"]);set$.hash().set("key", "val");$.hash().set({    "key1":"val1",    "key2": "val2"});remove$.hash().remove("key");$.hash().remove(["key1", "key2"]);$.hash().remove();stringify$.hash().set("key", "val").remove("a").stringify("!");$.hash().set("key", "val").remove(["a", "b"]).stringify("?");location$.hash().set("key", "val").remove("a").location("!");$.hash().set("key", "val").remove(["a", "b"]).location("?");listen// listen one$.hash().listen("key", fn);// listen or$.hash().listen("key1", "key2", fn);// listen both$.hash().listen(["key1", "key2"], fn);// listen all$.hash().listen(fn);get suffix$.hash().suffix();set suffix$.hash().suffix('123');

4、插件下载

https://github.com/cloudcome/jquery.hash

0 0