BOM对象

        伙计们伙计们，经过我们不断的学习，JavaScript三巨头我们已经搞定了两个了，从这篇博客起我们继续来研究最后一块硬骨头——BOM。

一、BOM介绍

1.什么是BOM？

         BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。

        BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

 2.BOM的构成

        BOM的顶级对象是window，而BOM的顶级对象是document，因此BOM比DOM更大，它包含了DOM。见下图：

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

 3.window对象的常见事件

页面（窗口）加载事件

第一种：

1. window.onload = function(){}

2.  window.addEventListener('load', function() {});

        window.onload是窗口 (页面）加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。

注意：

        传统注册事件只能写一次，若有多个，则以最后一个window.load事件为准。而addEventListener则无限制。

第二种：

document.addEventListener('DOMContentLoaded', function() {});

        DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。该种页面加载方式适用于页面图片比较多的情况，可以优化用户体验。

注意： IE9以上才支持！！！

调整窗口大小事件

window.onresize = function(){}

window.addEventListener('resize',function(){});

        window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。

注意：

        只要窗口大小发生像素变化，就会触发这个事件。

        我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度

二、定时器

        在页面中我们市场时常会看到有倒计时效果和一些动画效果，原来window对象给我们提供了2个非常好用的方法-定时器。

1.setTimeout() 炸弹定时器

        这个定时器就像炸弹一样，到了设定的时间就会执行，且只执行一次。

开启定时器：

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

        setTimeout()这个调用函数我们也称为回调函数callback

注意：

1. window可以省略不写。
2. 这个调用函数可以直接写，或者写函数名，或者采取字符串的'函数名()'三种形式，第三种不推荐。
3. 定时器可能有很多，我们经常给定时器赋值一个标识符。

停止定时器：

window.clearTimeout(timeoutID)

        使用该方法取消了先前通过setTimeout()建立的定时器。

2.setInterval() 闹钟定时器

        这个定时器就像闹钟一样，在设定的时间间隔到了会再执行一次。

开启定时器：

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

        setInterval()方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。

停止定时器：

window.clearInterval(timeoutID)

3.定时器案例

• 几秒后自动关闭广告 ---setTimeout定时器
• 页面倒计时案例 -clearInterval定时器
• 发送短信倒计时 --clearInterval定时器

在这里我们以发送短信倒计时为案例加深对定时器的理解。

案例：发送短信倒计时

效果要求：

        在提交表单后，将提交按钮禁用，并且提示倒计时时间，倒计时结束后，提交按钮恢复使用。

案例代码：

    手机号码： <input type="number"> <button>发送</button>
    <script>
        var btn = document.querySelector('button');
        // 全局变量，定义剩下的秒数
        var time = 3;
        // 注册单击事件
        btn.addEventListener('click', function () {
            // 禁用按钮
            btn.disabled = true;
            // 开启定时器
            var timer = setInterval(function () {
                // 判断剩余秒数
                if (time == 0) {
                    // 清除定时器和复原按钮
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                } else {
                    btn.innerHTML = '还剩下' + time + '秒';
                    time--;
                }
            }, 1000);
        });
    </script>

三、JS执行机制

1.关于JavaScript

        javascript是一门单线程语言，在最新的HTML5中提出了Web-Worker，但javascript是单线程这一核心仍未改变。所以一切javascript版的"多线程"都是用单线程模拟出来的。

2.javascript的同步和异步

同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务

异步任务：不进入主线程、而进入"任务队列"的任务，当主线程中的任务运行完了，才会从”任务队列”取出异步任务放入主线程执行。

       1.当我们执行代码时，同步和异步任务分别进入不同的执行"场所"，同步的进入主线程，异步的进入Event Table并注册函数。
　　2、当Event Table中指定的事情完成时，会将这个函数移入Event Queue。
　　3、主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。
　　4、上述过程会不断重复，也就是常说的Event Loop(事件循环)。

 

 3.JS为什么需要异步任务

        　如果JS中不存在异步，只能自上而下执行，如果上一行解析时间很长，那么下面的代码就会被阻塞。 对于用户而言，阻塞就意味着"卡死"，这样就导致了很差的用户体验。

---

        本篇只是简单介绍了一下BOM中的知识点，从下一篇起打算以例题的方式复习BOM中重要的知识点，敬请期待哦~