BOM

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

• 浏览器对象模型
• BOM的顶级对象是window
• BOM是浏览器窗口交互的一些对象
• BOM是浏览器厂商在在各自浏览器上定义的，兼容性较差
• window:(包括以下)
  • document;
  • location;
  • navigation;
  • screen;
  • history
  • BOM是JS访问浏览器窗口的一个借口
  • BOM是一个全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法
• window下的一个特殊属性window.name

①窗口加载事件

• window.onload = function(){}
• window.addEventLIstener(“load”,function(){});
• DOMContentLoaded这个是DOM加载完毕，不包含图片，falsh css等就可以执行，加载速度更快一些
• 这是窗口加载事件，当文档内容完全加载完成后就会触发该事件（包括图像，脚本事件，css文件等等。就调用的处理函数）所以i这里可以把js放在页面元素的上方，因为onload等页面加载完毕后再去执行函数
• window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准
• 如果使用addEventListener则没有原则

//用这种方法可以实现多次个加载
window.addEventListener('load',function(){
          var btn = document.querrySelector('button');
          btn.addEventListener('click',function){
              alert('点击我')；
            })
       }）

②调整窗口大小事件

window.onresize = function(){}
window.addEventListener("resize",function(){});

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

③两种定时器

• setTimeout（调用函数，[延迟的毫秒数]）；用于设置一个定时器，该定时器到期后执行调用函数

• 经常给定时器起一个名字来区别多个定时器
  var timer1 = setTimeout();当清除定时器的时候clearTimeout（就是这个定时器的名字）。

• setinterval(回调函数，[间隔的毫秒数])；
  它会在一定的时间间隔里反复调用这个函数

• 清除定时器，clearInterval。这里要注意我们给定时器起名字的时候，要让他成为全局变量。

//写一个案例，关于发送短信的时间限制3秒
<button>发送</button>
    <script>
        var btn = document.querySelector('button');
        var time = 3;
        btn.addEventListener('click',function(){
             btn.disable = true;
             var timer = setInterval(function(){
                 if (timer == 0){
                     clearInterval(timer);
                     btn.disabled = false;
                     btn.innerHTML = '发送';
                     time = 3;
                 }else{
                     btn.innerHTML = '还剩下' + time + '秒'；
                     timme--;
                 }
             },1000)
        })
    </script>

④this的指向问题

this指向在函数定义的时候时确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向是调用它的那个函数

⑤js单线程

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

同步和异步

• 同步：前一个任务结束后再去执行另外一个任务，程序的执行顺序与任务的排列顺序是一致的，同步的。好比你先说话再吃东西；
• 异步：在处理一个任务的时候同时处理另外一个任务，一边吃饭一边说哈。

//看这个
console.log(1);
setTimeout(function(){
     console.log(3);
     },0);
console.log(2);
//123

同步任务和异步任务

• 同步任务：同步任务在主线程上执行。形成一个执行栈
• 异步任务：通过回调函数来实现的。如下
  • 1.普通事件，如click，resize等
  • 2.资源加载，如load，error等
  • 3.定时器，包括setinterval，setTimeout等
  • 异步任务相关回调函数添加到任务列表中（任务队列也称为消息队列）

js执行机制

• 1.先执行执行栈中的同步任务
• 2.异步任务（回调函数）放入任务队列中
• 3.一旦执行栈中的多有同步任务执行完毕，系统就会按次序读取任务列表中的异步任务，于是被读取的异步任务结束等待状态，进行执行栈，开始执行。

执行机制

当我们的主线程拿到这些任务时，先抽出异步任务，然后放到异步进程处理，只有当点击的时候或者计时的时间到了的时候，它才会出现在任务队列里面，处理完就清空。
一旦同步任务执行完，就会回到异步任务中去看看还有没有可以执行的。