JavaScript-11-BOM

概述

BOM是浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性

DOM与BOM

	DOM	BOM
定义	文档对象模型	浏览器对象模型
针对对象	文档	浏览器
顶级对象	document	window
作用	操作页面元素	浏览器窗口交互的一些对象
标准	W3C标准	浏览器厂商自定义，兼容性较差

BOM的构成

顶级对象window

window对象是浏览器的顶级对象，具有双重角色

1. JS访问浏览器窗口的一个接口
2. window是一个全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法。在调用时可省略window

注：window下的一个特殊属性 window.name

window对象的常见事件

窗口加载事件

1. 传统的注册方式

window.onload = function(){}

2. 方法监听注册方式

1. window.addEventListener(‘load’,function(){})
2. document.addEventListener(‘DOMContentLoaded’,function(){})

注：

1. 通过window.onload，可以将JS代码写到页面元素的任意位置
2. 传统的注册方式只能写一次，有多个，以最后一个window.onload为准
3. addEventListener不会有限制
4. window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等）
5. DOMContentLoaded(IE9+)。DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式、图片、flash等。若所需加载的样式、图片、flash等很大，从用户访问到onload触发可能需要较长的事件，交互效果不能很好实现。此时使用DOMContentLoaded比较合适

调整窗口大小事件

1. 传统的注册方式

window.οnresize= function(){}

2. 方法监听注册方式

window.addEventListener(‘resize’,function(){})

   window.addEventListener('load', function() {
            var div = document.querySelector('div');
            window.addEventListener('resize', function() {
                if (window.innerWidth <= 800) {
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }
            })
        })

注

1. 窗口大小发生变化，就会触发这个事件
2. 利用该事件可完成响应式布局

两种定时器

1. setTimeout()

window.setTimeout(调用函数，[延迟的毫秒数]);

• setTimeout()用于设置一个定时器，该定时器在定时器到期后执行调用函数
• 调用函数也称为回调函数callback

  var img = document.querySelector('.img_ad');
        //5秒自动关闭广告
        setTimeout(function() {
            img.style.display = 'none';
        }, 5000);

• 停止setTimeout()定时器

window.clearTimeout(timeoutID)

注：

1. window在调用时可以省略
2. 延迟的毫秒数 可以省略，省略默认为0
3. 调用函数可以直接写函数，也可以写函数名，还可以 ‘函数名()’
4. 页面有多个定时器，需要给定时器加标识符

       //1.函数
        setTimeout(function() {
            console.log('game over');
        }, 1000);

        function callback() {
            console.log('game over');
        }
        //2.函数名
        setTimeout(callback, 1000);
        //3.'函数名（）'
        setTimeout('callback()', 1000);

2. setInterval()

window.setInterval(回调函数,[间隔的毫秒数]);

• setInterval()方法重复调用一个函数，每隔这个时间，就去调用一次回调函数
• 停止setInterval()定时器

window.clearInterval(intervalID)

注：

1. window在调用时可以省略
2. 延迟的毫秒数 可以省略，省略默认为0
3. 调用函数可以直接写函数，也可以写函数名，还可以 ‘函数名()’
4. 页面有多个定时器，需要给定时器加标识符

  //倒计时
        var hour = document.querySelector('.span_hour');
        var minute = document.querySelector('.span_minute');
        var second = document.querySelector('.span_second');
        var inTime = +new Date('2021-9-13 18:00:00'); //输入时间总的毫秒数
        function countDown() {
            var time = +new Date(); //当前时间总的毫秒数
            var timespan = (inTime - time) / 1000; //剩余时间总的毫秒数
            var h = parseInt(timespan / 60 / 60 % 24);
            var m = parseInt(timespan / 60 % 60);
            var s = parseInt(timespan % 60);
            hour.innerHTML = format(h);
            minute.innerHTML = format(m);
            second.innerHTML = format(s);
        }

        function format(f) {
            return f < 10 ? '0' + f : f;
        }

        setInterval(countDown, 1000);

//发送短信
        var btn = document.querySelector('button');
        btn.addEventListener('click', f1);

        function f1() {
            btn.disabled = true;
            var t = 5;
            var timer = setInterval(function() {
                if (t < 0) {
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '重新发送';
                } else {
                    btn.innerHTML = '还剩下' + t + '秒';
                    t--;
                }
            }, 1000);
        }

this指向

1. 全局作用域或普通函数中this指向全局对象window（定时器里的this也指向window）
2. 方法调用中谁调用，this就指向谁
3. 构造函数中this指向构造函数的实例

document对象

DOM中的顶级对象-document

location对象

window对象提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。由于属性返回的是一个对象，该属性也称为location对象

URL

统一资源定位符，互联网上标准资源的地址。

语法格式：
protocol://host[:port]/path/[?query]#fragment

• protocol:通信协议，常用的http、ftp、matio
• host:主机（域名）
• port:端口号可选
• path:路径
• query:参数 以键值对的形式，通过&符合分隔开
• fragment:片段 #后面内容常见于链接、锚点

location对象的属性

• location.href 获取或者设置整个URL
• location.host 返回主机（域名）
• location.port 返回端口号，如果未写，返回空字符串
• location.pathname 返回路径
• location.search 返回参数
• location.hash 返回片段

        //点击跳转
        var div_newPage = document.querySelector('.div_newPage');
        var btn_newPage = document.querySelector('.btn_newPage');
        btn_newPage.addEventListener('click', function() {
            location.href = 'http://www.baidu.com';
        })

        //自动跳转
        var t = 5;
        jump();

        function jump() {
            if (t > 0) {
                div_newPage.innerHTML = '您将在' + t + '秒后跳转至首页';
                t--;
            } else {
                location.href = 'http://localhost:52330/JavaScript/12%20BOM.html';
            }
        }
        setInterval(jump, 1000)

location对象的方法

• location.assign() 跟href一样，可以跳转页面（也称为重定向页面，记录历史，可以回退页面）
• location.replace() 替换当前页面（不记录历史，不能回退页面）
• location.reload() 重新加载页面，相当于刷新。参数为true时，相当于强制刷新

navigator对象

navigator对象包含有关浏览器的信息

 if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQBowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
        location.href = "../H5/index.html";
    }

history对象

1. back() 可以后退功能
2. forward() 前进功能
3. go(参数) 前进后退功能，参数如果是1前进1个页面，如果是-1后退一个页面

JS执行机制

JS单线程

1. JavaScript的一大特点就是单线程，同一时间只能做一件事。JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的。
2. 单线程意味着所有任务都需要排队，如果JS执行的时间过长，会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉
3. 为了解决该问题，利用多核CPU的计算能力，HTML5提出web worker标准，允许JavaScript创建多个线程。于是，JS出现了同步与异步

同步和异步

1. 同步：程序的执行顺序与任务的排列顺序是一致的、同步的
2. 异步：在处理一件事的同时，可以处理其他事情。

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

同步任务

在主线程上执行，形成一个执行栈

异步任务

JS的异步是通过回调函数实现的。
异步任务类型：

1. 普通事件，如click、resize等
2. 资源加载，如load、error等
3. 定时器，setTimeout、setInterval等

异步任务相关回调函数添加到任务队列中（也称为消息队列）

执行机制

1. 先执行执行栈中的同步任务
2. 异步任务（回调函数）加入任务队列
3. 一旦同步任务执行完成，系统按次序读取任务队列中的异步任务，被读取的异步任务结束等待状态，进入执行栈，开始执行。

注：

• web API（异步API）

1. Ajax（网络模块）
2. DOM事件（DOM模块）
3. setTimeout，setInterval（timer模块）

• 事件循环（event loop）：主线程不断的重复获得任务、执行任务、再获取任务、再执行

1. 主线程执行完毕，查询任务队列，取出一个异步任务，推入主线程进行处理
2. 重复该动作