BOM你真的了解吗？

前言
我们常常会认为JS是由ES和Web APIS组成的，而Web APIS由是由BOM和DOM组成的
那到底什么才是BOM呢？

BOM的概念

• BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象
• 我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理，比如：刷新浏览器、后退、前进、在浏览器中输入URL等。

window 对象

• window 是浏览器的顶级对象，当调用 window 下的属性和方法时，可以省略 window
• 注意：window下两个特殊的属性 window.name、window.top

对话框

• confirm
  • 方法有返回值，根据按钮点击情况来返回true或false

onload事件

• 我们可以给 window 对象或者 img 等元素添加 onload 加载事件，表示只有绑定事件的元素加载完毕才能触发事件，才能执行事件函数。
• 其中 window 对象加载完毕：指的是所有HTML结构加载完，并且外部引入资源（js、css、img、视频）也加载完毕

应用

• 利用 window.onload事件，可以将js代码提前到html结构之前。
• 注意：一个页面中只能有一个 window.onload 事件

延时器

• 延时器是 window 对象的一个方法，类似于定时炸弹
• 语法：window.setTimeout(func, time);
• 第一个参数：演示执行的函数，可以是匿名函数定义，或者是一个函数名的引用，注意不要加()
• 第二个参数：延时的时间，以毫秒计数，1000毫秒等于1秒
• 功能：在指定的时间后，延迟执行一个函数

清除延时器

• window 对象的一个方法
• 语法：window.clearTimeout(timeout);
• 参数：指定的演示器变量名引用
• 功能：清除指定的延时器
• 注意：清除的延时器需要存储到一个变量中，便于后期清除调用

函数节流操作

var btn = document.getElementById("btn");
var lock = false;

btn.onclick = function () {
    
    
    if (lock) {
    
    
        return;
    }

    console.log(Math.random());

    lock = true;

    setTimeout(function () {
    
    
        lock = false;
    }, 2000)
};

定时器

• 定时器是window对象的一个方法，相当于定时闹钟，每个固定的时间响一次
• 语法：window.setInterval(func, interval);
• 第一个参数：每次执行的函数，可以使匿名函数定义，或者是一个函数名的引用，注意不要加()。
• 第二个参数：时间间隔，以毫秒计数，1000毫秒等于1秒
• 功能：每隔一个指定的时间，周期性的执行一个函数

清除定时器

• window 对象的一个方法
• 语法：window.clearInterval(timer)
• 参数：指定的定时器变量名引用
• 功能：清除指定的定时器
• 注意：清除的定时器需要存储到一个变量中，便于后期清除调用

简单运动

• 是一种视觉暂留效果，只要元素变化过程时间够短，给人眼造成的效果就是一个运动的效果，人眼的视觉残留的时间0.1-0.4秒之间
• 制作方法：通过定时器，实现每隔一个极短的时间（50-100毫秒左右）执行函数，函数内部让运动的属性值发生变化

提高运动速度的方法

• 缩短时间间隔，增加了每秒移动的次数
• 加大步长，让每一次走的步长增加

清除定时器的问题

• 将定时器的开始和停止过程书写在不同的时间函数内部，容易出现用户错误点击情况
  • 多次点击开始，会造成加速
  • 多次点击开始，不能够在停止

设表先关方法

• 每次开启新定时器之前，都清除一次前面的定时器

拉钟停表

• 需求：要求元素走到指定位置停止，例如让元素停止在500px的位置
• 问题：如果步长设置的不合理，停止的位置可能不是正好在500处
• 解决方法：在定时器内部每次都要判断是否走到了终点，要不要停止定时器；如果走到了终点，强行拉到终点，并停止定时器

步标整除

• 需求：在规定时间内让元素走到规定的结束位置，时间间隔可以更改
• 例如：让元素在2秒钟内，left属性从 0 走到 500px
• 解决方法：
  • 总距离 == 步长 * 次数
  • 时间间隔自定义，总时长固定
  • 求出总次数 = 总时间 / 时间间隔
  • 定义计数器变量，每执行一次定时器函数增加计数1，直到执行达到总次数，停止定时器

    // 获取元素
    var start = document.getElementById("start");
    var box = document.getElementById("box");
    
    // 已知 开始位置、结束位置、总时长、时间间隔
    // 总距离 = 步长 * 总次数
    // 总距离 = 结束位置 - 起始位置  ，已知可以求出来
    // 总次数 = 总时长 / 时间间隔 ，已知可以求出来
    // 步长 = （结束位置 - 起始位置） / （总时长 / 时间间隔）

    // 信号量 ,也相当于初始值
    var nowLeft = 200;
    // 结束位置
    var endLeft = 500;
    // 总时长
    var time = 1000;
    // 时间间隔
    var interval = 50;
    // 运算总次数
    var maxcount = time / interval;
    // 运算出每一次的步长
    var step = (endLeft - nowLeft) / maxcount;
    // 定义一个次数的累加器
    var count = 0;

    // 准备条件结束可以开始定时器了
    var timer;
    start.onclick = function () {
    
    
      timer = setInterval(function () {
    
    
        // 让元素的属性每一次变化一个步长
        nowLeft += step;
        // 每运动一次让次数累加器加 1
        count++;
        // 停止定时器
        if (count >= maxcount) {
    
    
          // 拉终停表
          nowLeft = endLeft;
          clearInterval(timer);
        }
        // 给属性赋值
        box.style.left = nowLeft + "px";
      },interval);
    };

封装动画函数

        but.onclick = function () {
    
    
            animate(box, {
    
    
                left: 400,
                width: 300,
                height: 200,
                opacity: 1
            }, 2000);
        }

        function animate(ele, end, time) {
    
    
            // 起始位置的对象，需要先定义一个空对象
            var now = {
    
    };
            // end 对象遍历，获取属性名
            for (var k in end) {
    
    
                now[k] = parseFloat(window.getComputedStyle(ele)[k]);
            }
            // 自定义时间间隔
            var interval = 50;
            // 计算总次数
            var maxCount = time / interval;
            // 次数累加器
            var count = 0;
            // 对象中的每个属性都有自己的步长，也可以放到一个步长对象中
            var step = {
    
    };
            // 遍历结束对象，计算每个属性的步长
            for (var k in end) {
    
    
                step[k] = (end[k] - now[k]) / maxCount
            }
            // 定时器
            var timer;
            timer = setInterval(function () {
    
    
                // 每个属性发生变化，赋值给now对象中的每一项
                for (var k in end) {
    
    
                    now[k] += step[k];
                };
                // 累计运动次数
                count++;
                // 判断定时器是否结束
                if (count >= maxCount) {
    
    
                    // 拉终停表
                    for (var k in end) {
    
    
                        now[k] = end[k];
                    };
                    clearInterval(timer);
                }
                // 赋值给对应元素对象属性
                for (var k in now) {
    
    
                    if (k === 'opacity') {
    
    
                        ele.style[k] = now[k]
                    } else {
    
    
                        ele.style[k] = now[k] + "px"
                    }
                };
            }, interval)
        }

location对象

• location 对象是 window 对象下的一个属性，使用的时候可以省略 window 对象
• location 可以获取或者设置浏览器地址栏的 URL

URL了解

• 统一资源定位符（Uniform Resource Locator, URL）
• URL的组成：scheme://host:port/path?query#fragment
  • 例如：http://www.lagou.com:80/a/b/index/html?name=zs&age=18#bottom
• scheme：通信协议，常用的hhtp, ftp, maito等
• host：主机，服务器（计算机）域名系统（DNS）主机名或 IP 地址
• port：端口号，整数，可选，省略时使用方案的默认端口，如http的默认端口为80
• path：路径，由零或多个"/"符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
• query：查询，可选，用于动态网页传递参数，可有多个参数，用"&“符号隔开，每个参数的名和值用”="符号隔开。例如：name=zs
• fragment：信息披阿奴单，字符串，锚点

history 对象

• history 对象是 window 对象下的一个属性，使用的时候可以省略 window 对象
• history 对象可以与浏览器历史记录进行交互，浏览器历史记录是对用户所访问的页面按时间顺序进行的记录和保存
• back()
• forward()
• go()