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

版权声明:本文为博主郎涯工作室原创文章,未经博主允许不得转载。 https://blog.csdn.net/aoshilang2249/article/details/52223467

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=10

       url的“?”后面的部分称之为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、谷歌等)已经这样做了,同样国内的如网易邮箱也这样做了。这样做的好处是:

  1. 页面只需要一次加载。

  2. 页面体验流畅,反应速度快。

  3. 页面内容按需加载,减轻服务器压力。

  4. 页面可以适配搜索引擎。     

    前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

 

没有更多推荐了,返回首页