09-Window对象、Swiper插件、本地存储Window对象 BOM(浏览器对象模型) 定时器-延时函数 JS执行

Window对象

BOM(浏览器对象模型)
定时器-延时函数
JS执行机制
location对象
navigator对象
histroy对象

BOM

BOM(Browser Object Model ) 是浏览器对象模型
- window 对象中的子对象:
- document 对象包含当前窗口所显示页面文档的所有内容
- location对象操作地址栏
- history对象访问历史记录
- screen对象查看屏幕信息
- navigator对象查看浏览器特性（版本、厂商、内核、产品名等）
window 是浏览器内置中的全局对象，我们所学习的所有 Web APIs 的知识内容都是基于 window 对象实现的
window 对象下包含了 navigator、location、document、history、screen 5个属性，即所谓的 BOM （浏览器对象模型）
document 是实现 DOM 的基础，它其实是依附于 window 的属性。
注：依附于 window 对象的所有属性和方法，使用时可以省略 window

定时器-延时函数

JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout

语法：

setTimeout(回调函数，等待的毫秒数)

setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window

清除延时函数：

let timer = setTimeout(回调函数，等待的毫秒数)
clearTimeout(timer)

    <button>解除定时器</button>
    <script>
        let btn = document.querySelector('button')
        //设置定时器；三秒后在网页中打印 时间到
        let timer = setTimeout(function(){
            document.write('时间到')
        },3000)
        //清除定时器；点击按钮停止打印，三秒后就不会打印 时间到
        btn.addEventListener('click',function(){
            clearTimeout(timer)
        })
    </script>

5秒后自动关闭广告案例

<img src="./images/chrome_Mlar8M11px.png" width="300px" height="100px">
    <script>
        let imgs = document.querySelector('img')
        //5秒后自动关闭广告
        setTimeout(function(){
            imgs.style.display = 'none'
        },5000)
    </script>

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

一个函数在它的函数体内调用它自身称为递归调用，这种函数称为递归函数。执行递归函数将反复调用其自身，每调用一次就进入新的一层，当最内层的函数执行完毕后，再一层一层地由里到外退出。
递归函数就是自己调用自己

    function fn() {
        console.log(111)
    }
    fn()

        //利用递归函数  模仿setinterval
        let div = document.querySelector('div')
        function fn(){
            //toLocaleString() 方法可根据本地时间把 Date 对象转换为字符串，并返回结果。
            div.innerHTML = new Date().toLocaleString()
            //每隔1秒执行一次
            setTimeout(fn,1000)
        }
        fn()

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

JS执行机制

js是单线程

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是：如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

同步和异步

为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程。于是，JS 中出现了同步和异步。

同步

前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。

异步

你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。

他们的本质区别：这条流水线上各个流程的执行顺序不同。

同步任务

同步任务都在主线程上执行，形成一个执行栈。

异步任务

JS 的异步是通过回调函数实现的。

一般而言，异步任务有以下三种类型:
- 1、普通事件，如 click、resize 等
- 2、资源加载，如 load、error 等
- 3、定时器，包括 setInterval、setTimeout 等

异步任务相关添加到任务队列中（任务队列也称为消息队列）。

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

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

location对象

location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分
常用属性和方法：
- href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转
- search 属性获取地址中携带的参数，符号？后面部分
- hash 属性获取地址中的啥希值，符号 # 后面部分
- reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新
location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分
常用属性和方法：
- href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转

console.log(location.href)  //可以得到当前文件的URL地址
location.href = 'https://baidu.com '  //可以通过JS方式跳转到目标地址

5秒种之后跳转页面案例

    <a href="https://baidu.com">支付成功 <span>5</span> 秒后回到原网页或者直接点击跳转</a>
    <script>
        let a = document.querySelector('a')
        let num = 5
        let timer = setInterval(function(){
            num--
            a.innerHTML = `支付成功 <span>${num}</span> 秒后回到原网页或者直接点击跳转`
            if (num === 0) {
                //显示到0时清除定时器
                clearInterval(timer)
                //跳转页面
                location.href = 'https://baidu.com'
            }
        },1000)
    </script>

search 属性获取地址中携带的参数，符号？后面部分
- ```
console.log(location.search)
```
hash 属性获取地址中的哈希值，符号 # 后面部分
- ```
console.log(location.hash)
```
- 后期vue路由的铺垫，经常用于不刷新页面，显示不同页面，比如网易云音乐

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

    <button>刷新页面</button>
    <script>
        let btn = document.querySelector('button')
        btn.addEventListener('click',function (){
            //reload() 刷新方法有本地缓存  强制刷新 CTRL + F5 是直接更新网页最新内容,不走本地缓存
            location.reload(true)
        })
    </script>

location.href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转

search 属性获取地址中携带的参数，符号？后面部分

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

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

navigator对象

navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息

常用属性和方法：

通过 userAgent 检测浏览器的版本及平台

// 检测 userAgent（浏览器信息）
!(function () {
const userAgent = navigator.userAgent
// 验证是否为Android或iPhone
const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
// 如果是Android或iPhone，则跳转至移动站点
if (android || iphone) {
location.href = 'http://m.itcast.cn'
}
})()

histroy对象

history 的数据类型是对象，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等

常用属性和方法：

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

    <button class="forward">前进</button>
    <button class="back">后退</button>
    <script>
        let qianjin = document.querySelector('.forward')
        let houtui = document.querySelector('.back')
        qianjin.addEventListener('click',function(){
            // 前进
            // history.forward()
            history.go(1)
        })
        houtui.addEventListener('click',function(){
            // 后退
            // history.back()
            history.go(-1)
        })
    </script>

swiper 插件

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

官网：www.swiper.com.cn

下载页面：www.swiper.com.cn/download/in…

在项目中导入这两个文件

swiper-bundle.min.css

swiper-bundle.min.js

<link rel="stylesheet" href="./css/swiper-bundle.min.css">

<script src="./js/swiper-bundle.min.js"></script>

引入配置

在官网中的API文档中可以任意更改配置www.swiper.com.cn/api/index.h…

例如让轮播图自动切换

在配置中加入API文档中相应的配置即可

本地存储

本地存储特性

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。

1、数据存储在用户浏览器中

2、设置、读取方便、甚至页面刷新不丢失数据

3、容量较大，sessionStorage和localStorage约 5M 左右

localStorage

1、生命周期永久生效，除非手动删除否则关闭页面也会存在

2、可以多窗口（页面）共享（同一浏览器可以共享）

3、以键值对的形式存储使用

存储数据：

localStorage.setItem(key, value)
	localStorage.setItem('uname', '啊三')

获取数据：

localStorage.getItem(key)
	localStorage.getItem('uname')

删除数据：

localStorage.removeItem(key)
	localStorage.removeItem('uname')

存储复杂数据类型存储

本地只能存储字符串,无法存储复杂数据类型.需要将复杂数据类型转换成JSON字符串,在存储到本地

JSON.stringify(复杂数据类型)

将复杂数据转换成JSON字符串存储本地存储中

JSON.parse(JSON字符串)

将JSON字符串转换成对象取出时候使用

<script>
        localStorage.setItem('uname', '啊三')
        let obj = {
            uname: '尼古拉斯',
            age: 18 ,
            address: '印度',
        }
        // console.log(JSON.stringify(obj))
        //复杂数据类型一定要转换为json字符串在进行存储
        localStorage.setItem('obj', JSON.stringify(obj))

        //取数据  JSON.parse() 将json字符串转换为对象
        console.log(JSON.parse(localStorage.getItem('obj')))
</script>