这次也不长篇大论,只搞清楚两件事 —— History api & Location 对象。了解清楚这些,将能够使我们在不同 web 页面之间穿梭自如。
History 作为一个全局变量(即 window.history),不继承任何属性,在 html4 时代就已经存在,通过这个接口,我们可以操纵浏览器中曾经访问过的会话历史记录,但当时我们能使用的属性与方法只有这么几个:
从 HTML5 开始,增加了两个新的方法:
History.pushState(state, title [, url]) 方法:往历史堆栈的顶部添加一个状态。pushState() 带有三个参数:一个状态对象,一个标题(现在被忽略了),以及一个可选的URL地址。state为一个对象或null,它会在触发window的popstate事件(window.onpopstate)时,作为参数的state属性传递过去;如果你像pushState() 方法传递了一个序列化表示大于640k 的state对象,这个方法将扔出一个异常。如果你需要更多的空间,推荐使用sessionStorage或者localStorage。title为页面的标题,但当前所有浏览器都忽略这个参数。URL为页面的URL,不写则为当前页;新URL必须和当前URL在同一个源下;否则,pushState() 将丢出异常。
History.replaceState(state, title [, url]):更改当前页面的历史记录值。参数同上。这种更改并不会去访问该URL。
至此,这个 API 拥有的方法就都梳理完了。但是刚刚说到了 state 对象关联的一个事件,所以在这里把 popstate 事件也描述一下。
window.onpopstate = function(event) {
alert("location: "
+ document.location
+ ", state: "
+ JSON.stringify(event.state));
};
大致上看,history API 的支持情况还是很不错的,可以点击此处查看各个浏览器对 history 的支持情况。
当然,当我们更改URL时,可能会出现这样一种情况:我们只更改了URL的片段标识符 (跟在#符号后面的URL部分,包括#符号),这种情况下将触发 hashchange 事件,使用方法如下:
window.addEventListener("hashchange", funcRef, false);
// 或者
window.onhashchange = funcRef;
其中,提到的 hash 属性可以通过 location.hash 获得。从这里开始,我们引出 Location 对象。Location 对象包含有关当前 URL 的信息。针对一个示例 http://b.a.com:88/index.php?name=kang&when=2011#first 我们整理一下各个属性与其含义的分别所指内容是啥。
属性 | 描述 | 值 |
---|---|---|
hash | 设置或返回从井号 (#) 开始的 URL(锚)。 | “#first” |
host | 设置或返回主机名和当前 URL 的端口号。 | “b.a.com:88” |
hostname | 设置或返回当前 URL 的主机名。 | “b.a.com” |
href | 设置或返回完整的 URL。 | “http://b.a.com:88/index.php?name=kang&when=2011#first” |
pathname | 设置或返回当前 URL 的路径部分。 | “/index.php” |
port | 设置或返回当前 URL 的端口号。 | 88 |
protocol | 设置或返回当前 URL 的协议。 | “http:” |
search | 设置或返回从问号 (?) 开始的 URL(查询部分)。 | “?name=kang&when=2011” |
window.location和document.location互相等价的,可以交换使用。且 location 的8个属性都是可读写的,但是只有href与hash的写才有意义。例如改变location.href会重新定位到一个URL,而修改location.hash会跳到当前页面中的anchor名字的标记(如果有),而且页面不会被重新加载。
通过 location 我们可以作如下几种方法的操作:
导航到一个新页面的方法:
window.location.assign("http://www.mozilla.org"); // or
window.location = "http://www.mozilla.org";
针对 reload 需要说明的是,如果该方法没有规定参数,或者参数是 false,它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变,reload() 会再次下载该文档。如果文档未改变,则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。如果把该方法的参数设置为 true,那么无论文档的最后修改日期是什么,它都会绕过缓存,从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样:
window.location.reload(true);
replace() 方法不会在 History 对象中生成一个新的记录。当使用该方法时,新的 URL 将覆盖 History 对象中的当前记录。用法为:
window.location.replace('http://example.com/');
通过 location 的属性与方法,我们可以做很多事情,详情可以查看 MDN。
来自:https://hijiangtao.github.io/2017/08/20/History-API-and-Location-Object/
ECMA-262把对象定义为:”无需属性的集合,其属性可以包含基本值、对象或者函数。对象的每个属性或方法都有一个名字,而每个名字都映射到一个值。正因为这样,我们可以把ECMAScript的对象想象成散列表:无非就是一组名对值,其中值可以是数据或函数。
这篇文章讲解Js数组和对象的一些使用技巧,如何将不同的数组,对象合并/结合为1个的方法
在JavaScript中可以使用 . 或者 [ ] 来访问对象的属性,但是对象中方法只能通过 . 来获取;使用.运算符来存取对象的属性的值。或者使用[]作为一个关联数组来存取对象的属性。但是这两种方式有什么区别了?
对象使用obj.length时,它得到的值是undefined的,所以只能通过for...in循环获取对象的属性,我们发现并没有按属性的顺序显示,而且顺序在各个浏览器下显示也不同。 这是为什么呢?
JS声明对象时属性名加引号与不加引号的问题,一般情况下属性名加引号和不加引号是都可以的,效果是一样的。如果属性名是数字,则必须用“”包围,并且用 [] 方括号访问。
javascript的原生对象:也叫内部对象、本地对象、native object;内置对象:Global(全局对象)、Math ;宿主对象:有宿主提供的对象,在浏览器中window对象以及其下边所有的子对象(如bom、dom等等),在node中是globla及其子对象,也包含自定义的类对象。
判断对象中是否有某属性的常见方式总结,不同的场景要使用不同的方式。一点( . )或者方括号( [ ] )、二in 运算符、三hasOwnProperty()。三种方式各有优缺点,不同的场景使用不同的方式,有时还需要结合使用
error,指程序中的非正常运行状态,在其他编程语言中称为“异常”或“错误”。解释器会为每个错误情形创建并抛出一个Error对象,其中包含错误的描述信息。
由于JavaScript的灵活性,我们可以轻易地重写(override)一些于其他人定义的对象(object)。换句话说,任何人都可以重写我们所定义的对象。这是一个非常强大的特性,许多开发者都有兴趣试试,来拓展或者修改某些对象的行为。
虽然现在已经是ES6的时代,但是,还是有必要了解下ES5是怎么写一个类的。本文详述JavaScript面向对象编程中的类写法,并分步骤讲述如何写出优雅的类。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!