BOM简介

---

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

一、什么是BOM

BOM ，Browser Object Moudle 是浏览器对象模型，将使用的浏览器抽象为对象进行处理，其核心对象是window，并且BOM为其中的每个对象都提供了很多方法和属性。
与DOM不同，BOM缺乏标准，其最初是Netscape浏览器标准的一部分，现都是浏览器厂商各自在浏览器上定义，兼容器较差。
下图为BOM结构：

二、BOM常见对象

1.window对象

window对象是浏览器的顶级对象，它不仅是访问浏览器窗口的一个接口，也是一个全局对象，定义在全局作用域中的变量，函数等都会变成window对象的属性和方法。

代码如下（示例）：

    <script>
        console.log(window);
    </script>

    <script>
        var num = 10;
        console.log(window.num);
        function fun(){
            console.log(13);
        }

        window.fun();
    </script>

通常情况下，window都被省略

常见事件

1. 窗口加载事件

window.onload = function（）{ } 或者 window.addEventListener（“load,funtion（）{ });

window.onload为窗口加载事件，当文档内容完全加载完成就会触发该事件，进行调用。
使用window.onload可以将JS代码写在页面上方，但是window.onload一般只能用一次，如果有多个，则会以最后一个window.onload为准。但是使用addEventListener则没有限制

代码如下（示例）：

    <script>
        // window.onload = function(){
        //     var btn = document.querySelector('button');
        //    btn.onclick = function(){
        //        alert('点击我干什么！')
        //    }
        // }
        window.addEventListener('load',function(){
            var btn = document.querySelector('button');
            btn.addEventListener('click',function(){
                alert('点击我干什么！')
            })
        })
    </script>
       <button>click</button>

document.addEventListener（‘DOMContentLoaded’，function（）{ }）

仅当DOM加载完成，就可以触发该事件发生，适用于用户访问到onload事件较长的情况

2.调整窗口事件大小

window.onresize = function（） { }
或者
window.addEventListener（”resize",function（） { })

window.onresize可以调整窗口大小加载事件，只要窗口像素发生变化，就会触发这个事件，常和window.innerWidth用于完成响应式布局。

代码如下（示例）：

       <div>
          @@@
      </div>
      <script>
            window.addEventListener('resize',function(){
                if(window.innerWidth <= 800){
                    div.style.display = 'none';
                }
                else {
                    div.style.display = 'block';
                }
            })
        })
     </script>

2.location对象

location属性可以用于获取或设置窗体的URL，并且可以解析URL。

location对象属性：

location 对象属性	返回值
location.href	获取或设置整个URL
location.host	返回主机/域名
location.port	返回端口号，如果没有返回空字符串
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段，#后面内容常见于锚点，链接

以location.href为例：

    <button>dididi</button>
    <script>
        var button = document.querySelector('button');
        button.addEventListener('click',function(){
            location.href = 'http://www.baidu.com';
        })
    </script>

location对象方法：

location对象方法	返回值
location.assign（）	可以跳转页面，可以后退页面
location.replace（）	替换当前页面，不能后退页面
location.reload（）	重新加载页面，相当于刷新

强制刷新： ctrl+f5 ；刷新：f5

3.navigator对象

navigator对象包含有关浏览器的信息，拥有很多属性，通过navigator可以使pc端和移动端同一个网站呈现不同的界面。

更多关于navigator

4.history对象

history对象和浏览器历史记录进行交互，该对象包含用户访问过的URL

history对象方法	作用
back（）	可以使页面后退
forward（）	可以使页面前进
go（）	既可以前进，也可以后退，括号内为前进后退的页面数

三、定时器

1.setTimeout()

setTimeout（）方法可在指定秒数后调用相应的函数，且只调用一次

setTimeout（要执行的代码，等待的毫秒数）
setTimeout（函数，等待的毫秒数）

代码如下（示例）：

        function set(){
            console.log('开始计时');
        }

       setTimeout(set,3000);
       setTimeout("alert('计时开始')",3000);

setTimeout（）可以直接写函数，也可以写函数名或者采取字符串 '函数名（）'三种形式

停止setTimeout()定时器

window.clearTimeout（timeout ID）

clearTimeout（）可以取消setTimeout（）方法，其中window可以省略

2.setInterval()

setInterval（）方法可以每隔相同的时间，重复调用一个函数

window.setInterval（回调函数，等待毫秒数）

代码如下（示例）：

       setInterval(function(){
            console.log('123')
        },2000);

清除setInterval()定时器

window.clearInterval（）

clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作

3.this指向

一般this的指向在函数执行时才能确定，指向调用函数的对象

全局作用域或普通函数中，this则指向全局对象window

代码如下（示例）：

       console.log(this);
        function fn(){
            console.log(this);
        }

        var Fun = fn();

四、同步和异步

JS执行机制
JS语言的一大特点就是单线程，即同时只能做一件事情。这就意味着所有任务都需要排队，使得JS执行时间过长，会使页面加载不连贯。

为了解决这个问题，就有了同步和异步的概念


同步

前一个任务结束后，再执行下一个任务。
JS中，同步任务都在主线程上进行，形成一个执行栈

异步

在做一件事的同时，还可以处理其他事情。
JS中异步通过回调函数来实现，一般异步任务有三种类型：
1.普通事件，click，resize
2.资源加载，load，error
3.定时器，setInterval，setTimeout

JS中，先执行栈中的同步任务，最后再执行任务队列中的异步任务

代码如下（示例）：

    <script>
        console.log(1);
        setTimeout(function(){
            console.log(2);
        },1000)

        console.log(3);
    </script>

示意图：