JavaScript之BOM（上）

news2024/11/25 12:50:20

Window对象
1.BOM(浏览器对象模型)
2.定时器-延时函数
3.JS执行机制
4.location对象
5.navigator对象
6.history对象

一.BOM(浏览器对象模型)

1.BOM(Browser Object Model)是浏览器对象模型
在这里插入图片描述
2.window对象是一个全局对象，也可以说是JavaScript中的顶级对象
3.像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的。
4.所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
5.window对象下的属性和方法调用的时候可以省略window

二.定时器-延时函数

1.JavaScript内置的一个用来让代码延迟执行的函数，叫setTimeout
2.语法：

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

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

setTimeout(function(){
   console.log('时间到了')
},2000)

3.清除延时函数：

let timer = setTimeout(function(){
   console.log('时间到了')
},2000)
clearTimeout(timer)

4.注意点：
*延时器需要等待，所以后面的代码先执行
*每一次调用延时器都会产生一个新的延时器

5.两种定时器对比：执行的次数
*延时函数setTimeout：执行一次
*间歇函数setInterval：每隔一段时间就执行一次，除非手动清除

三.JS执行机制

1.JavaScript语言的一大特点是单线程。同一时间只能做一件事。
导致一个问题：如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

在这里插入图片描述
输出结果都是：1111 3333 2222

2.解决这个加载阻塞，利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程。JS中出现了同步和异步。
本质区别：流水线上各个流程的执行顺序不同

3.事件循环：
JS处理同步，浏览器处理异步。
主线程先处理同步，异步由浏览器处理完放在主线程等待。
在这里插入图片描述

在这里插入图片描述

四.location对象

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

 location.href = 'http://www.baidu.com'

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

console.log(location.search)

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

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

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

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

五.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'
     }
 })();
 !function(){}()

六.history对象

history的数据类型是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等。
常用属性和方法:
在这里插入图片描述

    <button>后退</button>
    <button>前进</button>
    <script>
        const back = document.querySelector('button:first-child')
        const forward = back.nextElementSibling
        back.addEventListener('click',function(){
            //后退一步
            history.back()
            // history.go(-1)
        })
        forward.addEventListener('click',function(){
            //前进一步
            history.forward()
            // history.go(1)
        })
    </script>