day12 - JavaScript的三大组成部分及方法移动端适配高频率触发事件的处理方案

Posted 2022-01-11 小高今天早睡了吗？

一、javascript的三大组成部分

1.ECMAScript：

ECMA是（欧洲计算机制造商协会）它规定了js的语法标准。

2.BOM：

BOM（browser object model）：浏览器对象模型。就是浏览器自带的一些功能样式，如搜索框，设置，等学习浏览器窗口交互的对象

3.DOM：

DOM（document object model）：文档对象模型。规定了文档的显示结构，可以轻松地删除、添加和替换节点

二、BOM

1.认识BOM：

• 每个浏览器窗口都是一个window对象
• 在每一次打开一个页面的时候默认就创建了一个window对象
  相当于var window = new Window();
• 每个页面不共享window
• 每次创建的全局变量和函数都是属于window对象的属性和方法

        var a = 10 ;
        console.log(window.a) ;   //10

        function fn()
            console.log(666) ;
        
        window.fn()  // 666

2.BOM的常见属性：

- navigator：
userAgent：会详细的显示浏览器的版本信息

           console.log(navigator) ;
           console.log(navigator.userAgent) ;  //显示浏览器版本信息

- location 地址栏： (用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。)
href ：整个网址:

        setTimeout(function () 
            //获取或设置新的地址
            // location.href = 'http://www.baidu.com'
        ,3000)

host ：域名+端口号
hostname ：域名
port ：端口号(返回URL中的指定的端口号，如URL中不包含端口号返回空字符串)
protocal ：协议 (http / https)
search： 问号后面的一串 ，表单提交的数据

     setTimeout(function () 
            location.search = '?username=yy&password=123'
        ,3000)

hash ：井号后面的一串 锚点,不包含散列，则返回空字符串。
assign() ：跳转至新的页面

        setTimeout(function () 
            //设置新的地址
            location.assign('http://www.baidu.com')
        ,3000)

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

     setTimeout(function () 
            //替换新的地址  --- 替换了所有的历史记录
            location.replace('http://www.baidu.com')
        ,3000)

reload() ：刷新页面

        location.reload()

- history 历史记录
length：在同一个窗口打开过几个页面
history.forward() ：前进。加载历史列表中的下一个 URL。返回下一页。
history.back() 后退。加载历史列表中的前一个 URL。返回上一页。

        windows.history.back(-1) ;  //返回上一页

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

        windows.history.go(1/-1) ;  //返回上一页或下一页

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

利用navigator的userAgen判断打开网页的设备

        function equipment()
            if(navigator.userAgent.includes('iPhone'))
                console.log('使用的是苹果手机') ;
                //处理对应的兼容问题
                document.body.background = 'black' ; 
                return 
            
            if(navigator.userAgent.includes('android'))
                console.log('使用的是安卓手机') ;
                return 
            
            if(navigator.userAgent.includes('win64'))
                console.log('使用的是window系统的电脑') ;
            
        

        equipment()

注意：第一次使用Open with Live Server打开时，会显示404错误，是因为没有设置icon图标。刷新一下就好了~

打印结果：

3.BOM方法：

• open() ：打开新的浏览器窗口，网页重定向（默认被拦截）
• close()：关闭本窗口

        setTimeout(function ()
            open('http://www.baidu.com') ;
            close()
        ,300)

4.BOM事件：

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

    <div id="a">666</div>

    <script>
        window.onload =function() 
            var oDiv = document.getElementById('a') ;
            console.log(oDiv) ;
        
    </script>

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

    <style>
        body
            //设置一个高，可以滑动
            height: 3000px;
        
    </style>

            window.onscroll = function () 
            console.log(666) ;
        

• resize 窗口大小改变时触发此事件 — 高频率触发的事件

        var t ;
        window.onresize = function()
            //这里设置清除定时器，可以
            clearInterval(t) ;
            t = setTimeout(function () 
                console.log(888) ;
            ,300)
        

• onblur 在对象失去输入焦点时触发。

        window.onblur = function() 
            console.log('你失去了我') ;
        

• onfocus 当对象获得焦点时触发。

        window.onfocus = function()
            console.log('你又关注了我') ;
        

DOM会有延迟 。页面在获取焦点的时候，会优先使用现有的资源，而失去焦点的页面的资源会延后—不等于不处理

        setInterval(function () 
            document.write(6) 
        , 1000)

二、移动端适配

移动端适配注意事项
1.不设置meta 禁止缩放那一段 — js里面有设置
2.计算 1rem = 75px

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

onscroll / onresize 是高频率触发事件
函数的防抖和节流 —>解决高频率触发事件

• 函数防抖(debounce)：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。 — 每次点击，就重做。
  例如：我们先给body设置一个高度为3000px,让滚动条出来。滑动滚动条，触发事件，打印888。如果300毫秒内高频事件再次被触发，就重新计算时间打印。

        var t ;
        window.onscroll = function () 
            clearTimeout(t) ;
            t = setTimeout(function ()
                console.log(888) ;
            ,300)
        

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

        var oBtn = document.getElementById('btn') ;
        oBtn.onclick = function ()   
            oBtn.disabled = true ;
            var count = 6 ;
            oBtn.innerhtml = count + 's之后可以再次点击'
            var t = setInterval(function ()   
                count-- ;
                oBtn.innerHTML = count + 's之后可以再次点击'
                if(count <= 0) 
                    clearTimeout(t) ;
                    oBtn.disabled = false ;
                    oBtn.innerHTML = '获取验证码'
                
            ,1000)