window 对象

window 对象既是 ECMAScript 中的 Global 对象，也是浏览器窗口的 JS 接口。

窗口

window.devicePixelRatio：表示物理像素与逻辑像素之间的缩放系数。

物理像素：屏幕实际的分辨率，比如手机的 1920x1080。

逻辑像素：浏览器报告的虚拟分辨率，比如 640x360，因此 DPI=3。

outerWidth/outerHeight：返回浏览器窗口自身大小。

innerWidth/innerHeight：返回浏览器窗口中页面视口的大小。

document.documentElement.clientWidth/clientHeight：返回页面视口的宽度和高度。

scrollTo：页面要滚动到的坐标。

scrollBy：页面要滚动的距离。

window.scrollBy({
  top: 600,
  left: 200,
  behavior: 'smooth', // 平滑滚动
})

window.open()：打开新窗口

window.open('https://www.baidu.com', '_blank')

window.close()：关闭窗口

定时器

setTimeout()：指定在一段时间后执行代码。

setInterval()：指定每隔一段时间执行代码。

二者都会返回一个定时 ID，可以用于清除定时器。

let id = setTimeout(() => {
  console.log(1)
}, 1000)
clearTimeout(id)

let i = 0
let id = setInterval(() => {
  i += 1
  console.log(i)
  if (i >= 5) {
    clearInterval(id)
  }
}, 1000)

setInterval 只推荐在执行时间短、非阻塞的程序中使用，比如倒计时。因为上一个任务结束和下一个任务开始之间的时间间隔无法保证，导致实际定时器有偏差。

用于轮询时，推荐使用 setTimeout。

let i = 0

let loop = function() {
  i += 1
  console.log(i)
  setTimeout(() => {
    if (i < 5) {
      setTimeout(loop, 1000)
    }
  }, 1000)
}
loop()
// 1 2 3 4 5

location

参考 w3c 文档

属性	描述
hash (opens new window)	设置或返回从井号 (#) 开始的 URL（锚）。
host (opens new window)	设置或返回主机名和当前 URL 的端口号。
hostname (opens new window)	设置或返回当前 URL 的主机名。
href (opens new window)	设置或返回完整的 URL。
pathname (opens new window)	设置或返回当前 URL 的路径部分。
port (opens new window)	设置或返回当前 URL 的端口号。
protocol (opens new window)	设置或返回当前 URL 的协议。
search (opens new window)	设置或返回从问号 (?) 开始的 URL（查询部分）。

下面 3 种方式是等价的

location.assign('https://www.baidu.com')
location = 'https://www.baidu.com'
location.href = 'https://www.baidu.com'

location.replace()：跳转页面，但是会删除当前历史记录，用户不能回到上一页。

location.reload()：刷新当前页，相当于 F5。传入 true 时，相当于 ctrl+F5.

navigator

navigator.userAgent：常用于判断浏览器标识，以区分不同机型。

const mobileReg = /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
const ua = window.navigator.userAgent.toLocaleLowerCase()

const isMobile = mobileReg.test(navigator.userAgent)

history

history 对象表示当前窗口首次使用以来用户的导航历史记录。出于安全考虑，不会暴露用户访问过的 URL，所以不像小程序一样可以获取导航栈信息。

导航

history.go()：进行导航，可以前进或后退。

history.go(-1) // 后退一页
history.go(1) // 前进一页

history.back()：相当于 history.go(-1)。

history.forward()：相当于 history.go(1)。

历史状态管理

单页应用的前端路由有 2 种类型：基于 hashchange 事件和基于 pushState()与 popState 事件。