系统化学习前端之JavaScript(BOM)
前言
DOM 提供了 JavaScript 操作页面的 API,BOM 提供了 JavaScript 操作浏览器的 API。
BOM
BOM 浏览器对象模型,BOM 提供了很多对象,用于访问浏览器的功能,而 BOM 的核心是 window 对象。
![](https://images.cnblogs.com/cnblogs_com/blogs/766345/galleries/2284882/o_230327085447_js%20bom.png)
Window
window 对象在 ECMAScript 中替代 Global 对象作为全局作用域,在浏览器中 window 对象对应浏览器的窗口,每个浏览器窗口有一个独立的 window 对象保存窗口信息以及操作窗口的 API。
Window 属性
-
outerWidth
浏览器窗口宽度。
注意:窗口 = 视口 + 边框 + 状态栏 + ...
-
outerHeight
浏览器窗口高度。
-
innerWidth
浏览器视口宽度。
-
innerHeight
浏览器视口高度。
-
scrollX
文档水平滚动的距离,即 body 元素距离视口的左边距。
-
scrollY
文档垂直滚动的距离,即 body 元素距离视口的上边距。
注意:文档区域内滚动距离计算,需要设置区域宽高以及
overflow: auto;
或overflow: scroll;
,借助 DOM 中事件对象中的event.target.scrollLeft
和event.target.scrollTop
,滚动距离为区域文档宽高的左、上边距。<style type="text/css"> .wrapper { width: 500px; height: 500px; border: 1px solid #ccc; overflow: auto; margin-top: 100vh; } </style> <div class="wrapper" id="app" onscroll="handleScroll(event)"></div> <script type="text/javascript"> var app = document.getElementById('app') function createDom(n) { var dom = '' for(var i = 0; i < n; i ++) { dom += `<p>${i}</p>` } return dom } var innerDom = createDom(30) app.innerHTML = innerDom function handleScroll(event) { console.log(event.target.scrollTop) console.log(window.scrollY) } </script>
Window 方法
-
alert
警告对话框,只有确定按钮的对话框。
-
confirm
问询对话框,包含确定按钮和取消按钮的对话框。
-
prompt
输入对话框,可以输入的对话框。
var input = window.prompt() console.log(input) // input 为字符串类型
-
setTimeout
超时调用定时器,
setTimeout()
接收两个参数,第一个参数为回调函数,第二个参数为超时时间,单位是毫秒 ms。如setTimeout(function () {...}, 1000)
表示超过 1000ms 调用回调函数。注意:超时调用定时器只会在超过设置时间时调用一次。此外,
setTimeout
的时间颗粒度为 4ms,即设置超时时间小于 4ms,也会在 4ms以后调用回调函数。 -
clearTimeout
清除超时调用定时器,
clearTimeout()
接收一个参数,参数为超时调用定时器句柄。var timeBar = setTimeout(function () { console.log('1s 时间到再执行') }, 1000) clearTimeout(timeBar)
注意:所谓句柄是指一个表示定时器编号的整数,通过这个编号可以找到对应的定时器。
-
setInterval
间歇调用定时器,
setInterval()
同setTimeout()
接收同样的参数,但setInterval()
第二个参数表示间歇时间,如setInterval(function () {...}, 1000)
表示间隔 1000ms 调用一次回调函数。注意:间歇调用定时器会在到达设置间隔时间时,多次调用回调函数。
-
clearInterval
清除间歇调用定时器,同样接受一个参数,参数为间歇调用定时器句柄。
var timeBar = setInterval(function () { console.log('每隔 1s 执行一次') }, 1000) clearInterval(timeBar)
-
requestAnimationFrame
JavaScript 动画一直以来都是依赖
setTimeout
和setInterval
实现的,但对于动画渲染,多久渲染一次才能使得动画更加平滑呢?即如何设置超时时间和间歇时间呢?多数电脑显示器屏幕刷新率(FPS)是 60 Hz,即屏幕每秒钟刷新60次,由此可以看出 (1000 / 60) = 17ms,即动画间歇时间设置为17ms,刚好与屏幕同时刷新,这样的动画会更加平滑。
requestAnimationFrame()
是对setTimeout
和setInterval
的再封装,只接收一个回调函数的参数,时间参数根据屏幕 FPS 自动计算,如 60 Hz,则 17ms,120 HZ,则 8ms 等等。模拟 setTimeout 单次调用
function printTime() { var now = new Date() console.log(new.toLocaleString()) } window.requestAnimationFrame(printTime)
模拟 setInterval 多次调用
function printTime() { var now = new Date() console.log(new.toLocaleString()) window.requestAnimationFrame(printTime) } printTime()
注意:页面中的动画尽量使用 CSS 动画,提高页面性能。
-
cancelAnimationFrame
清除 requestAnimationFrame,
cancelAnimationFrame()
接收一个参数,参数为 requestAnimationFrame 的句柄。var bar = window.requestAnimationFrame(printTime) window.cancelAnimationFrame(bar)
-
requestIdleCallback
requestAnimationFrame
间歇时间是 17ms,即回调函数执行周期为 17ms。如果回调函数实际执行时间超过 17ms,则后续其他周期的回调函数进入宏队列(宏队列:具体可参考V8 中函数执行);如果回调函数实际执行时间小于17ms,则存在空闲时间。requestIdleCallback()
接收两个参数,一个参数为回调函数,另一个参数为超时时间,可以缺省。若
requestAnimationFrame
存在空闲时间,则执行requestIdleCallback
的第一个参数回调函数;若requestAnimationFrame
不存在空闲时间,则根据requestIdleCallback
的第二个参数超时时间,超过超时时间,则将回调函数添加至宏队列。注意:
a.requestIdleCallback()
的回调函数接收一个参数,该参数可以判断是否超时,以及空间时间长短。b.
requestIdleCallback
是为了优化性能,提高执行效率,但如果设置超时时间未执行回调函数,则会为性能带来负反馈。c.
requestIdleCallback
多用于页面手机上报用户行为信息、加载 js 或者 css 文件等简单任务,不能做一些性能操作,如修改 DOM 等。 -
cancelIdleCallback
清除 requestIdleCallback,
cancelIdleCallback()
接收一个参数,参数为 requestIdleCallback 的句柄。var bar window.requestIdleCallback(function () {...}) cancelIdleCallback(bar)
-
open
open()
接收两个参数,第一个参数为 url,第二参数为窗口名称,表示以 url 为地址打开一个窗口。每个窗口都有 name 属性,对应 window.name 属性,窗口名称的值有三种表示:
window.open(url, '_self')
表示当前窗口打开,可后退,即 新开窗口的 name 等于当前窗口的 name。window.open(url, '_blank')
表示新增一个窗口打开,可以打开多个,即 新开多个窗口,且窗口的 name 都为''
。window.open(url, '自定义名称')
表示新增一个窗口打开,只能打开一个,即 新开一个 name 为自定义名称
的窗口。注意:
浏览器规定,同一时刻,同名窗口只能打开一个,后打开的会覆盖先打开的,name 为空的窗口可以打开多个,互不影响。
<a href="" target=""></a>
等同于window.open()
,target 属性值用于命名窗口名称。 -
close
关闭当前窗口。
-
scrollBy
scrollBy(x, y)
按照指定像素滚动内容位置。 -
scrollTo
scrollTo(x, y)
将内容滚动至指定坐标。 -
fetch
异步请求方法,返回一个 promise 对象,可以通过
.then
的方式调用。window.fetch(url, { method: '',// get, post body: '', headers: { Content-Type: 'application/json' }, }).then(res => { // 处理响应 })
注意:也可以使用
async await
方式处理。async function getInfo() { try { let res = await fetch(url, { options }) // 处理响应 } catch (err) { // 处理异常 } finally { // 关闭 loading } }
Document
Document 对象主要保存当前窗口网页的信息和操作窗口网页的方法,可以理解为 DOM 对象。
Document 属性
-
URL
当前页面的 url 路径。
-
fullscreen
页面是否全屏。
-
title
页面标题。
-
hidden
页面是否隐藏。
-
visibilityState
页面的可见状态,Chrome 浏览器有三个种状态以及对应值:隐藏 hidden,显示 visible,预渲染 prerender。
注意:页面的显示和隐藏切换会触发 visibilitychange 事件。
Document 方法
-
getElementById
根据 id 属性查询 DOM 元素
-
getElementByTagName
根据标签名查询 DOM 元素
-
getElementByClassName
根据 class 属性查询 DOM 元素
-
getElementByName
根据 name 属性查询 DOM 元素
History
History 对象保存用户浏览网页的历史记录,提供历史记录跳转的 API。History 对象即历史记录栈,可以通过栈指针的方式进行前进和后退操作。
History 方法
-
go
go()
接收一个参数 n,n 为整型。n 为正,表示前进,n 为负,表示后退。history.go(0) // 刷新 history.go(-1) // 后退一页 history.go(1) // 前进一页
注意:可以通过
history.length
查看历史记录栈的长度。 -
forward
forward()
等同于go(1)
,表示前进一页。 -
back
back()
等同于go(-1)
,表示后退一页。 -
pushState
pushState()
接收三个参数,分别为数据对象,标题以及 url。其中数据对象一般为null
,标题为''
,url 为推入历史记录栈的地址。注意:pushState 推入 url 不会刷新页面,需要配合
history.go(0)
刷新才会显示 url 地址页面,替换后页面可回退。 -
replaceState
replaceState()
接收三个参数,分别为数据对象,标题以及 url。其中数据对象一般为null
,标题为''
,url 替换历史记录栈栈顶的地址。注意:pushState 替换 url 也不会刷新页面,需要配合
history.go(0)
刷新才会显示 url 地址页面,替换后页面不可回退。
Location
Location 对象保存当前窗口地址栏信息以及地址栏相关操作 API。
Location 属性
Location 属性保存着地址栏完整的 url 信息,以 https://test.ming.com/web/blogs?id=6&state=1#title=javascript&desc=bom
为例。
-
href
保存完整的 url 信息,如
https://test.ming.com/web/blogs?id=6&state=1#title=javascript&desc=bom
。 -
origin
保存协议,域名,端口信息,如
https://test.ming.com
。注意:端口未显式定义,表示使用
https
的默认端口 443,即https://test.ming.com:443
。 -
protocol
保存协议信息,如
https:
。 -
host
保存域名,端口信息,如
test.ming.com:443
。 -
hostname
保存域名信息,如
test.ming.com
。 -
port
保存端口信息,如
443
。 -
pathname
保存 path 信息,如
/web/blogs
。 -
search
保存 query 信息,如
?id=6&state=1
。注意:多条 query 信息使用
&
拼接。 -
hash
保存 hash 信息,如
#title=javascript&desc=bom
。注意:多条 hash 信息使用
&
拼接。
Location 方法
-
assign
assign()
接收一个 url 参数,表示在当前窗口跳转至 url 地址,可后退。 -
replace
replace()
接收一个 url 参数,表示在当前窗口跳转至 url 地址,不可后退。 -
reload
reload()
接收一个 boolean 类型参数,默认 false,可缺省,表示普通刷新(资源有缓存,且缓存未过期,则使用缓存,反之则请求服务器);设置 true,表示强制刷新(清空缓存,资源从服务器请求)。注意:
history.go()
属于普通刷新。
Navigator
Navigator 对象保存当前浏览器信息。
Navigator
-
language
当前浏览器系统语言,简体中文使用
zh-CN
,英文使用en
。 -
userAgent
用户代理,一个特殊字符串,包含操作系统、浏览器等名称和版本信息。
注意:多浏览器适配需求的时候,需要使用
navigator.userAgent
。
Screen
Screen 对象保存屏幕相关信息,多为只读属性,开发较少涉及。
后记
BOM 1 个核心,5 个基本点。1 个核心是 window 对象,window 对象又包含 5 个基本点:document,history,location,navigator,screen。其中 history,location 与页面的状态有关,其他三个对象,开发过程中较少涉及。
本文来自博客园,作者:深巷酒,转载请注明原文链接:https://www.cnblogs.com/huangminghua/p/17197798.html