九、JavaScript的BOM操作

1、认识BOM

• BOM：浏览器对象模型（Browser Object Model）

  • 简称 BOM，由浏览器提供的用于处理文档（document）之外的所有内容的其他对象；
  • 比如navigator、location、history等对象；

• JavaScript有一个非常重要的运行环境就是浏览器

  • 而且浏览器本身又作为一个应用程序需要对其本身进行操作；
  • 所以通常浏览器会有对应的对象模型（BOM，Browser Object Model）；
  • 我们可以将BOM看成是连接JavaScript脚本与浏览器窗口的桥梁；

• BOM主要包括一下的对象模型：

  • window：包括全局属性、方法，控制浏览器窗口相关的属性、方法；
  • location：浏览器连接到的对象的位置（URL）；
  • history：操作浏览器的历史；
  • navigator：用户代理（浏览器）的状态和标识（很少用到）；
  • screen：屏幕窗口信息（很少用到）

2、window对象及作用，window对象的常用的属性、方法、事件等

2.1.window对象

• window对象在浏览器中可以从两个视角来看待：

  • 视角一：全局对象。

    • 我们知道ECMAScript其实是有一个全局对象的，这个全局对象在Node中是global；
    • 在浏览器中就是window对象；

  • 视角二：浏览器窗口对象。

    • 作为浏览器窗口时，提供了对浏览器操作的相关的API；

• 当然，这两个视角存在大量重叠的地方，所以不需要刻意去区分它们：

  • 事实上对于浏览器和Node中全局对象名称不一样的情况，目前已经指定了对应的标准，称之为globalThis，并且大多数现代浏览器都支持它；
  • 放在window对象上的所有属性都可以被访问；
  • 使用var定义的变量会被添加到window对象中；
  • window默认给我们提供了全局的函数和类：setTimeout、Math、Date、Object等

2.2.window对象的作用

• 事实上window对象上肩负的重担是非常大的：

  • 第一：包含大量的属性，localStorage、console、location、history、screenX、scrollX等等（大概60+个属性）；
  • 第二：包含大量的方法，alert、close、scrollTo、open等等（大概40+个方法）；
  • 第三：包含大量的事件，focus、blur、load、hashchange等等（大概30+个事件）；
  • 第四：包含从EventTarget继承过来的方法，addEventListener、removeEventListener、dispatchEvent方法；

• 那么这些大量的属性、方法、事件在哪里查看呢？

  • MDN文档：window对象常用的属性，方法，事件查询 (opens new window)

• 查看MDN文档时，我们会发现有很多不同的符号，这里我解释一下是什么意思：

  • 删除符号：表示这个API已经废弃，不推荐继续使用了；
  • 点踩符号：表示这个API不属于W3C规范，某些浏览器有实现（所以兼容性的问题）；
  • 实验符号：该API是实验性特性，以后可能会修改，并且存在兼容性问题；

2.3.window常见的属性

• 我们来看一下常见的window属性：

<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<script>
  // outerWidth、outerHeight：获取window窗口的整个宽度和高度（包括调试工具、工具栏）
  console.log(window.outerHeight)
  console.log(window.outerWidth)
  // 返回浏览器左边界（上边界）到操作系统桌面左边界（上边界）的水平距离。
  console.log(window.screenX)
  console.log(window.screenY)
  // 返回文档/页面水平（垂直）方向滚动的像素值。
  window.addEventListener('scroll',function() {
    console.log(window.scrollX,window.scrollY)
  })
</script>

2.4.window常见的方法

• 我们来看一下常见的window方法

<button class="close">window.close()</button>
<button class="scroll-to">window.scrollTo()</button>
<button class="open">window.open()</button>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>

<script>
  // window.close()方法：关闭当前窗口或某个指定的窗口。
  var closeBtnEl = document.querySelector('.close')
  closeBtnEl.onclick = function() {
    close()
  }
    
  // window.scrollTo()方法：滚动到文档中的某个坐标。
  var scrollBtnEl = document.querySelector('.scroll-to')
  scrollBtnEl.onclick = function() {
    // scrollTo({top:500})
    scrollTo(0,500)
  }
    
  // window.open()方法：打开另外一个页面
  var openBtnEl = document.querySelector('.open')
  openBtnEl.onclick = function() {
    open("http://lyk19990226.github.io","_blank")
  }
</script>

2.5.window常见的事件

• 我们来看一下常见的window事件：

<button class="hash">改变url中的 片段id（hash）</button>
<script>
  window.onfocus = function() {
    console.log('窗口获取到焦点')
  }
  window.onblur = function() {
    console.log('窗口失去了焦点')
  }

  window.onload = function() {
    console.log('整个页面以及所有的资源都加载完成了！')
  }
// hash的改变（即是url后面的片段id的改变）
var hashBtnEl = document.querySelector('.hash')
hashBtnEl.onclick = function () {
  location.hash = "hello"
}
window.onhashchange = function() {
  alert('hash被修改了')
}
</script>

3、location对象

3.1.location对象常见的属性

• location对象用于表示window上当前链接到的URL信息。
• 常见的属性有哪些呢？
  • href: 当前window对应的超链接URL, 整个URL；
  • protocol: 当前的协议；
  • host: 主机地址；
  • hostname: 主机地址(不带端口)；
  • port: 端口；
  • pathname: 路径；
  • search: 查询字符串；
  • hash: 哈希值；
  • username：URL中的username（很多浏览器已经禁用）；
  • password：URL中的password（很多浏览器已经禁用）；

// 如以该网址为例：http://192.168.12.194:1504/BOM/04_location学习.html?name=lyk&age=18#lyk
// 注意：url中如果有汉字等，浏览器会对它进行转码；
// 我们可以通过encodeURI()进行转码；decodeURI()进行解码
console.log(location)
console.log(location.href)//http://192.168.12.194:1504/BOM/04_location%E5%AD%A6%E4%B9%A0.html?name=lyk&age=18#lyk
console.log(decodeURI(location.href))//http://192.168.12.194:1504/BOM/04_location学习.html
console.log(encodeURI('可以www1的呀'))//%E5%8F%AF%E4%BB%A5www1%E7%9A%84%E5%91%80 （对文字进行转码）
console.log(decodeURI(encodeURI('可以www1的呀')))//可以www1的呀   （对转码后的文字进行解码）
console.log(location.protocol)//http:
console.log(location.host)//192.168.12.194:1504
console.log(location.hostname)//192.168.12.194
console.log(location.port)//1504
console.log(location.pathname)///BOM/04_location%E5%AD%A6%E4%B9%A0.html
console.log(location.search)//?name=lyk&age=18
console.log(location.hash)//#lyk

3.2.Location对象常见的方法

• 我们会发现location其实是URL的一个抽象实现：

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

 <button>打开新的网页</button>
  <button>替换新的网页</button>
  <button>网页重新加载</button>
  
  <script>
    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()
    }

  </script>

3.3.URLSearchParams类

• URLSearchParams 定义了一些实用的方法来处理 URL 的查询字符串。

  • URLSearchParams() 构造器创建并返回一个新的URLSearchParams (opens new window) 对象。 开头的'?' 字符会被忽略。

  • 可以将一个字符串转化成URLSearchParams类型；

  • 也可以将一个URLSearchParams类型转成字符串；

• URLSearchParams常见的方法有如下：

  • get：获取搜索参数的值；
  • set：设置一个搜索参数和值；
  • append：追加一个搜索参数和值；
  • has：判断是否有某个搜索参数；
  • URLSearchParams其他方法 (opens new window)

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

// 如以该网址为例：http://192.168.12.194:1504/BOM/04_location学习.html?name=lyk&age=18#lyk
location.search = "?name=lyk&age=18"
var searchType = location.search//拿到url查询字符串

// 将一个字符串转化成URLSearchParams类型；
var searchParams = new URLSearchParams(searchType)

console.log(searchParams)//URLSearchParams {}
console.log(searchParams.get('name'))//lyk
searchParams.set('adress','beijing')
console.log(searchParams.has('age'))//true
console.log(searchParams.get('adress'))//beijing
searchParams.append('height',1.88)

// 将一个URLSearchParams类型转成字符串
console.log(searchParams+'')//name=lyk&age=18&adress=beijing&height=1.88
console.log(searchParams.toString())//name=lyk&age=18&adress=beijing&height=1.88
console.log(String(searchParams))//name=lyk&age=18&adress=beijing&height=1.88

var str = '可以www1的呀'
var transcodingStr = encodeURIComponent(str)
console.log(transcodingStr)//%E5%8F%AF%E4%BB%A5www1%E7%9A%84%E5%91%80
var decodeStr = decodeURIComponent(transcodingStr)
console.log(decodeStr)//可以www1的呀

4、history对象常见属性和方法

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

• 有两个属性：

  • length：会话中的记录条数；
  • state：当前保留的状态值；

• 有五个方法：

  • back()：返回上一页，等价于history.go(-1)；
  • forward()：前进下一页，等价于history.go(1)；
  • go()：加载历史中的某一页；
  • pushState()：打开一个指定的地址；
  • replaceState()：打开一个新的地址，并且使用replace；

<!-- 注意：咱们该html应该用vscode的live server插件去创建一个本地服务打开 -->
<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: "kobe", age: 18 }, "", "/kobe")
      history.replaceState({ name: "kobe", age: 18 }, "", "/kobe")
  }

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

• history和hash目前是vue、react等框架实现路由的底层原理，具体的实现方式后续学习我们会详细说明。
• vue，react等框架使用路由的优点：通过改变URL，在不重新请求页面的情况下，更新页面视图；

5、navigator对象（很少使用）

• navigator 对象表示用户代理的状态和标识等信息。navigator对象的属性方法 (opens new window)

6、screen对象（很少使用）

• screen主要记录的是浏览器窗口外面的客户端显示器的信息：
  • 比如屏幕的逻辑像素 screen.width、screen.height；screen对象的属性方法 (opens new window)

7、JSON

7.1.JSON的由来

• 在目前的开发中，JSON是一种非常重要的数据格式，它并不是编程语言**，而是一种可以在服务器和客户端之间传输的数据格式。**

• JSON的全称是JavaScript Object Notation（JavaScript对象符号）：

  • JSON是由Douglas Crockford构想和设计的一种轻量级资料交换格式，算是JavaScript的一个子集；
  • 但是虽然JSON被提出来的时候是主要应用JavaScript中，但是目前已经独立于编程语言，可以在各个编程语言中使用；
  • 很多编程语言都实现了将JSON转成对应模型的方式；

• 其他的传输格式：

  • XML：在早期的网络传输中主要是使用XML来进行数据交换的，但是这种格式在解析、传输等各方面都弱于JSON，所以目前已经很少在被使用了；
  • Protobuf：另外一个在网络传输中目前已经越来越多使用的传输格式是protobuf，但是直到2021年的3.x版本才支持JavaScript，所以目前在前端使用的较少；(未来有可能取代json；如做即时通讯:数据传输频繁的情况，使⽤ProtoBuf表⽰的数据能更加⾼效，并且将数据压缩得更⼩)
  • XML、JSON 也可以⽤来存储此类结构化数据，但是使⽤ProtoBuf表⽰的数据能更加⾼效，并且将数据压缩得更⼩。

• 目前JSON被使用的场景也越来越多：

  • 网络数据的传输JSON数据；
  • 项目的某些配置文件； 如：小程序的app.json文件，vue中的package.json文件等
  • 非关系型数据库（NoSQL）将json作为存储格式；

7.2.JSON基本语法

• JSON的顶层支持三种类型的值：

  • 简单值：数字（Number）、字符串（String，不支持单引号）、布尔类型（Boolean）、null类型；（不支持undefined）

  "james"
  

  • 对象值：由key、value组成，key是字符串类型，并且必须添加双引号，值可以是简单值、对象值、数组值；

  {
    "name":"james",
    "age":235,
    "friend": {
      "name":"kobe"
    }
  }
  

  • 数组值：数组的值可以是简单值、对象值、数组值；

  [
    123,
    "abc",
    null,
    true,
    {
      "name":"kobe"
    }
  ]
  

  • json中没有注释;注释会报错哦

7.3.JSON序列化

• 某些情况下我们希望将JavaScript中的复杂类型转化成JSON格式的字符串，这样方便对其进行处理：
  • 比如我们希望将一个对象保存到localStorage中；
  • 但是如果我们直接存放一个对象，这个对象会被转化成 [object Object] 格式的字符串，并不是我们想要的结果；

var obj = {
    name:'kobe',
    age:38,
    friend:{
        name:'james'
    },
    hobbies:['篮球','足球']
}
localStorage.setItem("obj",obj)

7.4.JSON序列化方法:JSON.stringify、JSON.parse

• 在ES5中引用了JSON全局对象，该对象有两个常用的方法：

  • stringify方法：将JavaScript类型转成对应的JSON字符串；JSON.stringify(value[, replacer [, space]]) JSON.stringify() (opens new window)
  • parse方法：解析JSON字符串，转回对应的JavaScript类型；JSON.parse(text[, reviver]) JSON.parse() (opens new window)

• 那么上面的代码我们可以通过如下的方法来使用：

var obj = {
    name:'kobe',
    age:38,
    friend:{
        name:'james'
    },
    hobbies:['篮球','足球']
}
localStorage.setItem("obj",obj)

// 将js类型 转成对应的 JSON字符串
var jsonFile = JSON.stringify(obj)
localStorage.setItem("info",jsonFile)//本地存储
sessionStorage.setItem("info1",jsonFile)//会话存储

7.5.Stringify方法的第二个参数replace

• JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串：
• （第二个参数）replacer
  • 如果指定了一个 replacer 函数，则可以选择性地替换值；
  • 如果指定的 replacer 是数组，则可选择性地仅包含数组指定的属性；
  • mdn解释：如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；如果该参数为 null 或者未提供，则对象所有的属性都会被序列化。

var obj = {
    name:'kobe',
     age:38,
     friend:{
       name:'james'
     },
     hobbies:['篮球','足球']
   }
// 转成字符串
var objString1 = JSON.stringify(obj)
console.log(objString1)//{"name":"kobe","age":38,"friend":{"name":"james"},"hobbies":["篮球","足球"]}

// replacer是一个数组
var objString2 = JSON.stringify(obj,["name","age"])
console.log(objString2)//{"name":"kobe","age":38}

// replacer是一个函数
var objString3 =  JSON.stringify(obj,(key,value) => {
    console.log(key,value)
    if(key === 'name') {
        return 'curry'
    }
    return value
})
console.log(objString3)//{"name":"curry","age":38,"friend":{"name":"curry"},"hobbies":["篮球","足球"]}

7.6.Stringify方法的第三个参数space

• Stringify方法的第三个参数space：指定缩进用的空白字符串，用于美化输出（pretty-print）；如果参数是个数字，它代表有多少的空格；上限为 10。该值若小于 1，则意味着没有空格；如果该参数为字符串（当字符串长度超过 10 个字母，取其前 10 个字母），该字符串将被作为空格；如果该参数没有提供（或者为 null），将没有空格。

var obj = {
  name:'kobe',
  age:38,
  friend:{
    name:'james'
  },
  hobbies:['篮球','足球']
}
var objString = JSON.stringify(obj, (key,value) => value, 1)
console.log(objString)
/*objString打印结果如下：
{
 "name": "kobe",
 "age": 38,
 "friend": {
  "name": "james"
 },
 "hobbies": [
  "篮球",
  "足球"
 ]
}
*/

• 注意：如果对象本身包含toJSON方法，那么会直接使用toJSON方法的结果：

var obj = {
    name:'kobe',
    age:38,
    friend:{
        name:'james'
    },
    hobbies:['篮球','足球'],
    toJSON()  {
        return  {name:'lyk'}
    }
}
var objString = JSON.stringify(obj)
console.log(objString)//{"name":"lyk"}

7.7.parse方法

• JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。
  • 提供可选的 reviver 函数用以在返回之前对所得到的对象执行变换(操作)。

var obj = {
  name:'kobe',
  age:38,
  friend:{
    name:'james'
  },
  hobbies:['篮球','足球'],
  time:'2022-05-20'
}

var objString = JSON.stringify(obj)
console.log(objString)//{"name":"kobe","age":38,"friend":{"name":"james"},"hobbies":["篮球","足球"],"time":"2022-05-20"}
var info = JSON.parse(objString,(key,value) => {
  if(key === 'time'){
    return new Date(value).toISOString()
  }
  return value
})
console.log(info)//{name: 'kobe', age: 38, friend: {…}, hobbies: Array(2), time: '2022-05-20T00:00:00.000Z'}

• JSON的方法可以帮我们实现对象的深拷贝：
  • 但是目前我们还没有了解什么是对象的拷贝、浅拷贝、深拷贝的概念；
  • 我们会在JavaScript高级中学习；

8、Storage机制（存储机制）

8.1.认识Storage

• WebStorage主要提供了一种机制，可以让浏览器提供一种比cookie更直观的key、value存储方式：
  • localStorage：本地存储，提供的是一种永久性的存储方法，在关闭掉网页重新打开时，存储的内容依然保留；
  • sessionStorage：会话存储，提供的是本次会话的存储，在关闭掉会话时，存储的内容会被清除；

8.2.localStorage和sessionStorage的区别

• 我们会发现localStorage和sessionStorage看起来非常的相似。
• 那么它们有什么区别呢？
  • 验证一：关闭网页后重新打开，localStorage会保留，而sessionStorage会被删除；
  • 验证二：在页面内实现跳转，localStorage会保留，sessionStorage也会保留；
  • 验证三：在页面外实现跳转（打开新的网页），localStorage会保留，sessionStorage不会被保留；

8.3.Storage常见的方法和属性

Storage有如下的属性和方法：

• 属性：

  • Storage.length：只读属性：返回一个整数，表示存储在Storage对象中的数据项数量；

• 方法：

  • Storage.key()：该方法接受一个数值n作为参数，返回存储中的第n个key名称；
  • Storage.getItem()：该方法接受一个key作为参数，并且返回key对应的value；
  • Storage.setItem()：该方法接受一个key和value，并且将会把key和value添加到存储中。如果key之前有存储，则更新其对应的值；
  • Storage.removeItem()：该方法接受一个key作为参数，并把该key从存储中删除；
  • Storage.clear()：该方法的作用是清空存储中的所有key；·

8.4.使用Storage封装相应的工具类

• 我们发现Storage存储的value值，不能是一个对象；如果你存的是对象则只会存入：'[object Object]'字符串
• 那么我们想存对象类型必须先将对象类型转成JSON字符串(JSON.stringify(value))，然后获取的时候将JSON字符串转为对象类型（JSON.parse(value)）即可
• 下面我们直接封装一个Storage的工具类吧，上面这些操作，我们可以在类的实例方法中进行处理，这样我们就不要每次用一次写一次啦；而是使用的话，直接new出一个实例出来就可以了

<!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>
  <script>
    class ykStorage {
      constructor(storageflag = true) {//默认值为true；即默认的实例对象创建的是本地存储；如果传的是false,则实例对象创建的是会话存储
        this.storage = storageflag ? localStorage : sessionStorage
      }
      getItem(key) {
        return JSON.parse(this.storage.getItem(key))
      }
      setItem(key, value) {
        this.storage.setItem(key, JSON.stringify(value))
      }
      removeItem(key) {
        this.storage.removeItem(key)
      }
      clear() {
        this.storage.clear()
      }
      key(index) {
        return this.storage.key(index)
      }
      length() {
        return this.storage.length
      }
    }

    //1.创建一个本地存储
    const local1 = new ykStorage()
    local1.setItem('token',{name:'kobe'})
    console.log(local1.getItem('token'))//{name: 'kobe'}
    // local1.removeItem('token')

    // 2.创建一个会话储存
    const session1 = new ykStorage(false)
    session1.setItem('session',{name:'66666'})
    console.log(session1.key(1),session1.length())
    // session1.clear()

  </script>
</body>

</html>