day12 - JavaScript的三大組成部分及方法、移動端適配、高頻率觸發事件的處理方案

一、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)
        }