JavaScript-BOM详解对 JavaScript 中BOM对象进行介绍，对常用的window、location、

1. window对象

window对象在浏览器中可以从两个视角来看待：
- 视角一：全局对象。
  - ECMAScript其实是有一个全局对象的，这个全局对象在Node中是global
  - 在浏览器中就是window对象
- 视角二：浏览器窗口对象。
  - 作为浏览器窗口时，提供了对浏览器操作的相关的API
这两个视角存在大量重叠的地方，所以不需要刻意去区分它们
- 对于浏览器和Node中全局对象名称不一样的情况，目前已经指定了对应的标准，称之为globalThis，并且大多数现代浏览器都支持它
- 放在window对象上的所有属性都可以被访问
- 使用var定义的变量会被添加到window对象中
- window默认给我们提供了全局的函数和类：setTimeout、Math、Date、Object等
window对象上肩负的重担是非常大：
- 第一：包含大量的属性，localStorage、console、location、history、screenX、scrollX等等（大概60+个属性）
- 第二：包含大量的方法，alert、close、scrollTo、open等等（大概40+个方法）
- 第三：包含大量的事件，focus、blur、load、hashchange等等（大概30+个事件）
- 第四：包含从EventTarget继承过来的方法，addEventListener、removeEventListener、dispatchEvent方法

<!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>
</head>
<body>

  <a href="http://www.baidu.com" target="_blank">百度一下</a>
  <button>百度一下</button>

  <button class="close">关闭窗口</button>

  <script>

    // 1.window的查看角度
    // ECMAScript规范: 全局对象 -> globalThis
    // 对于浏览器 -> window
    // 对于Node -> global
    console.log(window)
    console.log(globalThis === window)

    // 浏览器窗口
    console.log(window.outerHeight)


    // 2.补充的方法
    var openBtnEl = document.querySelector("button")
    var closeBtnEl = document.querySelector(".close")
    openBtnEl.onclick = function() {
      window.open("./page/new.html", "_blank")
    }
    closeBtnEl.onclick = function() {
      window.close()
    }

    // 3.常见的事件
    // window.onfocus = function() {
    //   console.log("窗口获取到焦点")
    // }
    // window.onblur = function() {
    //   console.log("窗口失去了焦点")
    // }

    window.onhashchange = function() {
      console.log("hash值发生改变")
    }

  </script>
</body>
</html>

2. location对象

location对象用于表示window上当前链接到的URL信息

常见的属性
- href: 当前window对应的超链接URL, 整个URL
- protocol: 当前的协议
- host: 主机地址
- hostname: 主机地址(不带端口)
- port: 端口
- pathname: 路径
- search: 查询字符串
- hash: 哈希值
- username：URL中的username（很多浏览器已经禁用）
- password：URL中的password（很多浏览器已经禁用）

URL的抽象
方法 location有如下常用的方法：
- assign：赋值一个新的URL，并且跳转到该URL中
- replace：打开一个新的URL，并且跳转到该URL中（不同的是不会在浏览记录中留下之前的记录）
- reload：重新加载页面，可以传入一个Boolean类型

URLSearchParams 定义了一些实用的方法来处理 URL 的查询字符串
- 可以将一个字符串转化成URLSearchParams类型
- 也可以将一个URLSearchParams类型转成字符串
URLSearchParams常见的方法有如下：
- get：获取搜索参数的值
- set：设置一个搜索参数和值
- append：追加一个搜索参数和值
- has：判断是否有某个搜索参数
- 更多方法查看MDN文档

中文会使用encodeURIComponent和decodeURIComponent进行编码和解码

<body>

  <button>打开新的网页</button>
  <button>替换新的网页</button>
  <button>网页重新加载</button>

  <script>

    // 1.完整的URL
    console.log(location.href)
    // 2.获取URL信息
    console.log(location.hostname) // 主机地址(不带端口)
    console.log(location.host)
    console.log(location.protocol)
    console.log(location.port)
    console.log(location.pathname)
    console.log(location.search)
    console.log(location.hash)


    // 3.location方法
    var btns = document.querySelectorAll("button")
    btns[0].onclick = function() {
      location.assign("http://www.baidu.com")
    }
    btns[1].onclick = function() {
      location.replace("http://www.baidu.com")
    }
    btns[2].onclick = function() {
      location.reload()
    }

    // 4.URLSearchParams
    var urlSearchString = "?name=kobe&age=24&height=1.88"
    var searchParams = new URLSearchParams(urlSearchString)
    console.log(searchParams.get("name"))
    console.log(searchParams.get("age"))
    console.log(searchParams.get("height"))

    searchParams.append("address", "洛杉矶")
    console.log(searchParams.get("address"))
    console.log(searchParams.toString())

  </script>
</body>

3. history对象

history对象允许我们访问浏览器曾经的会话历史记录

有两个属性：
- length：会话中的记录条数
- state：当前保留的状态值
有五个方法：
- back()：返回上一页，等价于history.go(-1)
- forward()：前进下一页，等价于history.go(1)
- go()：加载历史中的某一页
- pushState()：打开一个指定的地址
- replaceState()：打开一个新的地址，并且使用replace

history和hash目前是vue、react等框架实现路由的底层原理，具体的实现方式后续补充

<body>

  <button>修改history</button>
  <button class="back">返回上一级</button>

  <script>

    // 前端路由核心: 修改了URL, 但是页面不刷新
    // 1> 修改hash值
    // 2> 修改history

    // 1.history对应的属性
    console.log(history.length)
    console.log(history.state)

    // 2.修改history
    var btnEl = document.querySelector("button")
    btnEl.onclick = function() {
      // history.pushState({ name: "abc", age: 18 }, "", "/abc")
      history.replaceState({ name: "abc", age: 18 }, "", "/abc")
    }

    var backBtnEl = document.querySelector(".back")
    backBtnEl.onclick = function() {
      // history.back()
      // history.forward()
      // 类似于上面的两个方法, 只是可以传入层级
      // history.go(-2)
    }

  </script>
</body>

4. navigator和screen（基本用不到）

navigator 对象表示用户代理的状态和标识等信息
screen主要记录的是浏览器窗口外面的客户端显示器的信息