1、什么是hashsearch、hashpath
其实那，hashsearch、hashpath这两个词是我自造的。在javascript语言里称url改变该部分不会影响页面重新加载的部分为hash，在后台语言里称之为fragment（碎片）。在这里，我们统称为hash。
在js里获取hash部分，可以使用如下语句获取：
// 获取当前浏览器的hash部分 // 如浏览器的url为：http://qianduanblog.com/#helloworld var 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=100 http://qianduanblog.com/?name=bbb&age=10url的“?”后面的部分称之为search值，是被后台程序所接收的。
path又是什么呢？
如下：
http://qianduanblog.com/name/aaa/age/100 http://qianduanblog.com/name/bbb/age/10一眼就看出来了，search和path的不同点，通常我们都把search的url重定向成path类型的。所以，由上可知，hashsearch、hashpath分别指的是：
http://qianduanblog.com/#?name=aaa&age=100 http://qianduanblog.com/#!name/aaa/age/100规范1：hashsearch的开头部分为“#?”，而hashpath的开头部分为“#!”，多个“#”会被忽略，多个“?”或“!”会被最后一个“?”或“!”所覆盖，如下：
http://qianduanblog.com/#!name/aaa/age/100 http://qianduanblog.com/#####!!!!!!name/aaa/age/100 http://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/aaa http://qianduanblog.com/#!user/bbb http://qianduanblog.com/#!user/ccc http://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: '!' } Functions get $.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
郎涯工作室 认证博客专家 Java PHP 视音频 微信搜索：【郎涯工作室】关注我。卖码为生，有代码洁癖。不爱广度，爱深度 — 专注分享Java / PHP / C++ / 视音频领域等技术。想和你一起，每天进步一点点，做一个不凡的人！
