总的来说,BOM对象大致包含五个部分:
Window对象:浏览器窗口对象
Navigator:浏览器对象
Screen:浏览器所处客户端的显示器屏幕对象
History:浏览器当前窗口的访问历史记录对象
Location:浏览器当前窗口的地址栏对象
每个对象都有对应的属性和方法,通过这些属性和方法我们可以获取浏览器的信息。在这五个部分中,Window对象尤为重要,根据图片的区域划分,可以很清楚的看出,Window对象其中就已经包含了History,Location对象,还有一个非常重要的Document对象,但由于其重要性太高,所以前面课程我们将其单独区分出来,称为DOM对象。
而另外两个: Navigator、Screen对象,使用到的次数较少,下面我们对于BOM中的内容主要就涉及Window、History、Location三个对象。
Window对象
不同于一般的对象,BOM中的Window对象不需要创建就可以直接使用,使用其中的方法直接调用即可,类似于我们已知的静态方法:
在BOM中,window对象就已经包含了大部分的对象,而通过对window对象的属性访问,同样可以获取到其他的BOM对象的引用
BOM对象通过window对象获取的方式
history 对History对象的只读引用 window.history
location 对Location对象的只读引用 window.location
navigator 对Navigator对象的只读引用 window.navigator
screen 对screen对象的只读引用 window.screen
定时器
定时器:类似闹钟,在一个规定的时间或者时间周期内执行
在Window对象中,与定时器相关的方法共有四个,其方法名和大致描述如下:
setTimeout() 指定的时间后执行一次(只执行一次)
clearTimeout() 取消由 setTimeout() 方法设置的时间
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式(多次)
clearTimeout() 取消由 setTimeout() 方法设置的时间
Location对象
location对象代表浏览器窗口中的地址栏,和window对象一样,无需特殊的创建方式,通过对象名就可使用,并调用其中的方法
assign() 加载新的文档
reload() 重新加载当前文档
replace() 用新文档替换当前文档
Location属性
host 设置或检索位置或URL 的主机名和端口号
hostname 设置或检索位置或URL 的主机名部分
href 设置或检索完整的 URL 字符串
History对象
history对象表示当前窗口的历史记录,同样通过对象名可以直接调用
back() 加载当前窗口 history 列表中的前一个URL
forward() 加载当前窗口 history 列表中的下一个URL
go() 加载当前窗口 history 列表中的某个具体页面
back() 方法相当于后退按钮
forward() 方法相当于前进按钮
go(1) 代表前进一页,等价于forward() 方法
go(-1) 代表后退一页,等价于back() 方法
History属性
history对象只有一个属性
length 返回浏览器历史列表中的URL数量
浏览器事件对象
onload() 页面加载时触发
onscroll() 窗口的滚动条被拖动时触发
onresize() 窗口的大小改变时触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
width: 2000px;
height: 2000px;
}
</style>
</head>
<body>
<script>
// onload() 页面加载时触发
window.onload = function() {
console.log("aa")
}
// onscroll() 窗口的滚动条被拖动时触发
window.onscroll = function() {
console.log("123")
}
// onresize() 窗口大小改变时触发
window.onresize = function() {
console.log("456")
}
</script>
</body>
</html>
防抖
在进行窗口的resize、scroll、输出框内容校验等操纵的时候,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常之差。那么为了前端性能的优化也为了用户更好的体验,就可以采用防抖(debounce)和节流(throttle)的方式来到达这种效果,减少调用的频率。
函数防抖是指当一个动作连续触发,只执行最后一次。好比我们打英雄联盟或者王者荣耀的时候,比如你按下了回城键,那么在8秒钟之后,就会执行回城事件,但如果你再次按下回城键,那么回城时间又将重新计时,需要在等8秒才会执行回城事件。
防抖:节约性能,只触发最后一次
防抖的思路与实现:
1. 事件函数执行,先创建定时器
2. 把逻辑代码放到定时器中
3. 当函数再次触发时,清除定时器
4.创建一个新定时器即可
var timer
uname.oninput = function() {
clearTimeout(timer)
timer = setTimeout(function() {
console.log("11")
}, 2000)
}
节流
函数节流是指一定时间内js方法只跑一次。好比我们打英雄联盟或者王者荣耀的时候,释放技能都有一段冷却时间,比如Q技能有5秒的冷却时间,那么我们在5秒钟的时间内只能释放一次Q技能。
例如,都设置时间频率为500ms,在2秒时间内,频繁触发函数,节流,每隔500ms就执行一次。防抖,则不管调动多少次方法,在2s后,只会执行一次。
节流:节约性能,间隔时间,延迟触发
节流的思路与实现:
1. 事件函数执行,先判断有定时器,则直接return
2. 把逻辑代码放到定时器中
3. 定时器执行后,置空定时器变量
4. 下载事件函数执行时,在创建一个新定时器即可
var timer = null
uname.oninput = function() {
if (timer) {
return
}
timer = setTimeout(function() {
console.log("22")
timer = null
}, 2000)
}