BOM的基础

001 js的三大组成部分

// js:ECMAScript + BOM + DOM

// BOM:browser object model  浏览器对象模型

// DOM:document object model  文档对象模型

 

002 BOM

 //  BOM:浏览器对象模型

 //   每隔浏览器窗口都是一个window对象

 // var window = new Window()   // 在每一次打开一个页面的时候默认就创建了一个window对象

 // 每一个页面不共享window

 // 每次创建的全局变量和函数都是属于window对象的属性和方法

 

        console.log(window);

        var a = 10 ;

        console.log(window.a);

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


        window.fn()

003 BON的常见属性

// BOM常见属性

        //   navigator

                //     userAgent 会详细的显示浏览器的版本信息

        //   location 地址栏

        //       href  整个网址

        //       host  域名+端口号

        //       hostname  域名

        //       port  端口号

        //       protocal  协议 (http / https)

        //       search 问号后面的一串   表单提交的数据

        //       hash   井号后面的一串  锚点

        //       assign()  跳转至新的页面

        //       replace()  替换当前页面  --- 不会被历史记录

        //       reload()  刷新页面

        //       history  历史记录

        //       length 在同一个窗口打开过几个页面

        //       forward()  前进

        //       back()  后退

        //       go(1 / -1) 可进可退

        //   document  文档    DOM实际上是BOM的一部分

004 BOM方法

  //  open()  打开新的浏览器窗口    网页重定向(默认被拦截)

  //  close() 关闭本窗口

005 BOM事件

// load事件：等待页面资源加载完毕之后执行

        // scroll 页面滚动时触发这个事件   --- 高频率触发的事件

        // resize 窗口大小大声改变时触发此事件 --- 高频率触发的事件

006 移动端适配

html{
            /* 1rem = 100px  */
            /* rem是相对于根元素变化的单位 */
            /* 移动端适配也就是动态设置根元素的字体大小,然后使用rem做单位 */
            /* font-size: calc(100vw / 7.5); */
        }
        body{
            /* font-size: .24rem; */
        }

        .a{
            /* width: 1rem;
            height: 1rem;
            background-color: #f00; */
        }

007 高频率触发事件的处理方案

 //   onscroll / onresize 是高频率触发事件

        //   函数的防抖和节流

        //      干啥的？  解决高频率触发事件

        // 函数防抖(debounce)：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。 --- 每次点击，就重做

        // 函数节流(throttle)：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。 --- 点击一次，就把事情干完，没干完之前点击没用

      

        //      点了一次之后，一段时间不能再点，事情干完之后可以再点   函数节流

        //      点了以后立即清除定时器   函数防抖