Web APIs笔记06——BOM- 操作浏览器

Window对象

BOM(浏览器对象模型)

• BOM(Browser Object Model ) 是浏览器对象模型
  
• window 是浏览器内置中的全局对象，我们所学习的所有 Web APIs 的知识内容都是基于 window 对象实现的
• window 对象下包含了 navigator、location、document、history、screen 5个属性，即所谓的 BOM （浏览器对象模
  型）
• document 是实现 DOM 的基础，它其实是依附于 window 的属性。
• 注：依附于 window 对象的所有属性和方法，使用时可以省略 window

定时器-延时函数

• JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout
• 语法：setTimeout(回调函数，等待的毫秒数)
• setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window
• 清除延时函数：

<script>
      let timer = setTimeout(回调函数，等待的亳秒数
      clearTimeout(timer )
</script>

• 结合递归函数可以使用 setTimeout 实现 setInterval 一样的功能

div class="clock"></div>
<script>
      let clock = document.querySelector('.clock' )
      function myInterval() { 
            let d = new Date();
            clock. innerText = d.toLocalestring();
            //延时任务，自调用
            setTimeout (myInterval, 1000);
      }
      // 启动定时任务
      myInterval();
</script>

• 两种定时器对比：
  ➢setInterval 的特征是重复执行，首次执行会延时
  ➢setTimeout 的特征是延时执行，只执行1次
  ➢setTimeout 结合递归函数,能模拟setInterval重复执行
  ➢clearTimeout 清除由setTimeout创建的定时任务

JS执行机制

JS 是单线程

• JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为 Javascript 这
  门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比
  如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。 应该先进行添加，之后再删除。
• 单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问
  题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

同步和异步

• 同步：前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。
• 异步：你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事
  情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。
• 本质区别： 这条流水线上各个流程的执行顺序不同。
• 同步任务：同步任务都在主线程上执行，形成一个执行栈。
• 异步任务：JS 的异步是通过回调函数实现的。
  一般而言，异步任务有以下三种类型:
  1、普通事件，如 click、resize 等
  2、资源加载，如 load、error 等
  3、定时器，包括 setInterval、setTimeout 等
  异步任务相关添加到任务队列中（任务队列也称为消息队列）。
  

JS 执行机制

• 先执行执行栈中的同步任务。

• 异步任务放入任务队列中。

• 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
  

• 由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（ event loop）。
  

location对象

• location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分
• 常用属性和方法：
• href 属性获取完整的URL地址，对其赋值时用于地址的跳转

<script>
     //可以得到当前文fURL地址
     console.log(location.href)
     //可以通过js方式跳转到目标地址
     location.href = 'http://www.baidu.com'
</script>

• search 属性获取地址中携带的参数,符号?后面部分

<script>
     console.log( location.search)
</script>

• hash 属性获取地址中的啥希值，符号#后面部分

<script>
     console.log( location.hash)
</script>

后期vue路由的铺垫，经常用于不刷新页面，显示不同页面，比如 网易云音乐

• reload 方法用来刷新当前页面，传入参数true时表示强制刷新

<button>点击刷新< /button>
<script>
      let btn = document.querySelector( 'button' )
      btn.addEventListener( 'click', function () {
      location.reload(true)
      //强制刷新类似ctrL + f5
      })
</script>

navigator对象

• navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息
• 常用属性和方法：
• 通过 userAgent 检测浏览器的版本及平台
  

histroy对象

• history 的数据类型是对象，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等
• 常用属性和方法：

history对象方法	作用
back()	可以后退功能
forward()	前进功能
go(参数)	前进后退功能参数如果是1前进1个页面如果是-1后退1个页面

• history 对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。
  

swiper 插件

• 插件: 就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果

• 学习插件的基本过程
  ➢熟悉官网,了解这个插件可以完成什么需求：https://www.swiper.com.cn/
  ➢看在线演示，找到符合自己需求的demo：https:/ /www.swiper .com.cn/ demo/index.html
  ➢查看基本使用流程：https://www.swiper .com.cn/usage/index.html
  ➢查看APi文档， 去配置自己的插件：https:/ /www.swiper.com.cn/ api/index.html
  ➢注意:多个swiper同时使用的时候,类名需要注意区分

• 本地文件
  

本地存储

本地存储特性

• 随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。
  1、数据存储在用户浏览器中
  2、设置、读取方便、甚至页面刷新不丢失数据
  3、容量较大，sessionStorage和localStorage约 5M 左右

localStorage

• 生命周期永久生效，除非手动删除 否则关闭页面也会存在
• 可以多窗口（页面）共享（同一浏览器可以共享）
• 以键值对的形式存储使用
• 存储数据：localStorage.setItem(key, value)

<script>
        // 存储数据 localStorage.setItem('键', '值')
        localStorage.setItem('uname', '老师')
        localStorage.setItem('age', 18)
</script>

• 获取数据：localStorage.getItem(key)

<script>
         // 获取数据
        // localStorage.getItem('键')
        console.log(localStorage.getItem('uname'))
</script>

• 删除数据：localStorage.removeItem(key)

<script>
        // 删除数据
        localStorage.removeItem('uname')
</script>

• 存储复杂数据类型存储：本地只能存储字符串,无法存储复杂数据类型.需要将复杂数据类型转换成JSON字符串,在存储到本地
• JSON.stringify(复杂数据类型)：将复杂数据转换成JSON字符串 存储 本地存储中
• JSON.parse(JSON字符串)：将JSON字符串转换成对象 取出 时候使用

<script>
        // 1. 存储复杂数据类型（引用数据类型）
        let obj = {
            uname: '刘德华',
            age: 17,
            address: '程序员'
        }
        // console.log(JSON.stringify(obj))
        //（1） 复杂数据类型一定要转换为json字符串在进行存储 （因为本地存储只能存储字符串）
        localStorage.setItem('obj', JSON.stringify(obj))
        // AJAX
        // JSON 属性和值都是双引号进行包含
        // let obj = {
        //     "uname": "刘德华",
        //     "age": "17",
        //     "address": "程序员"
        // }
        // （2） 取数据  可以使用 JSON.parse()  将json字符串转换为对象
        // console.log(typeof localStorage.getItem('obj'))
        console.log(JSON.parse(localStorage.getItem('obj')))

        let object = {
            age: 18
        }

        // 本地存储只能存储字符串 所以我要转换  转换为JSON格式的字符串
        localStorage.setItem('key', JSON.stringify(object))
        // 获取的过来的值是字符串，不是对象了没有办法直接使用，因此我们首先吧字符串转换为对象
        // JSON.parse()
        console.log(JSON.parse(localStorage.getItem('key')))
    </script>

sessionStorage（了解）

• 生命周期为关闭浏览器窗口
• 在同一个窗口(页面)下数据可以共享
• 以键值对的形式存储使用
• 用法跟localStorage 基本相同

自定义属性

• 固有属性：标签天生自带的属性 比如class id title等, 可以直接使用点语法操作
• 自定义属性：由程序员自己添加的属性,在DOM对象中找不到, 无法使用点语法操作,必须使用专门的API
• 获取自定义属性：getAttribute('属性名')
• 设置自定义属性：setAttribute('属性名', '属性值')
• 删除自定义属性： removeAttribute('属性名')

<div class= "box">< /div>
<script>
      let box = document.querySelector('.box' )
      box.setAttribute( 'myid'，10)
      console.log(box.getAttribute( 'myid'))
</script>

data-自定义属性

• 传统的自定义属性没有专门的定义规则,开发者随意定值,不够规范,所以在html5中推出来了专门的data-自定义属性 在标签上一律以data-开头
• 在DOM对象上一律以dataset对象方式获取

<div class="box" data-id="10"></div>
<script>
      let box = document.querySelector('.box' )
      console.log(box.dataset.id) // 10
</script>