JavaScript進階內容——BOM詳解

在上一篇文章中我們學習了DOM，接下來讓我們先通過和DOM的對比來簡單了解一下BOM

首先我們先來復習一下DOM：

檔案物件模型
DOM把檔案當作一個物件來看待
DOM的頂級物件是document
DOM的主要學習是操作頁面元素
DOM是W3C標準規范

然后我們來介紹一下BOM：

瀏覽器物件模型
BOM把瀏覽器當作一個物件來看待
BOM的頂級物件是window
BOM學習的是瀏覽器視窗互動的一些物件
BOM是瀏覽器廠商在各自瀏覽器上定義的，兼容性較差

BOM概述

BOM（Browser Object Model）即瀏覽器物件模型，它提供了獨立于內容而與瀏覽器視窗進行互動的物件，其核心物件是window

BOM由一系列相關的物件構成，并且每個物件都提供了很多方法和屬性（BOM包含DOM）

window物件是瀏覽器的頂級物件，它具有雙重角色：

它是JS訪問瀏覽器視窗的一個介面
它是一個全域變數，定義在全域作用域的變數，函式都會變成window物件的屬性和方法
在呼叫時可以省略window，前面學習的對話框都屬于window方法，如alert（），prompt（）等

代碼展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // window是BOM的頂級物件，我們所定義的屬性和方法都屬于window

        // 我們定義一個屬性(可以加上window前綴)
        var code = 123;
        console.log(window.code);

        // 我們定義一個方法(可以加上window前綴)
        var fn = function() {
            // alert也屬于window的方法
            window.alert('11');
        }
        window.fn();
    </script>
</body>
</html>

視窗加載事件

我們的JavaScript代碼常常在HTML和CSS構造之后才會運行，因而JavaScript代碼常常放于HTML的body底部

但是window的視窗加載事件可以改變我們的JavaScript書寫位置：

window.onload = function(){}
window.addEventListener('load',function(){})

window.onload是視窗加載事件，當檔案內容完全加載完成后會觸發該事件，呼叫其內部的處理函式

document.addEventListener('DOMContentLoaded',function(){})

DOMContentLoaded事件觸發，代表僅當DOM加載完畢（不包括圖片，flash等）就會執行內部處理函式

注意：

我們在有了window.onload和DOMContentLoaded后可以將JavaScript代碼放于頁面元素上方
window.onload只能書寫一次，取最后一次書寫為準；但window.addEventListener('load',function(){})可以多次書寫
DOMContentLoaded會在圖片加載前就完成相關操作，提升用戶體驗

代碼展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 正常情況下，我們的script應該寫在body末尾，寫在這個部分是無法正常使用的 -->
    <script>
        
        // 這時就需要采用頁面加載事件來等待頁面加載完成后再去加載JavaScript內容

        // window.onload方法在整個script中只能使用一次，不推薦
        window.onload = function() {
            // 在里面書寫內容
            var but = document.querySelector('button');
            but.onclick = function(){
                alert('我是彈窗')
            }
        }

        // window.addEventListener('load',function(){})可以多次呼叫，推薦使用
        window.addEventListener('load',function(){
            alert('頁面內容加載完成');
        })

        // document.addEventListener('DOMContentLoaded',function(){})僅針對DOM的加載，DOM加載后即可使用
        document.addEventListener('DOMContentLoaded',function(){
            alert('DOM內容加載完成');
        })
    </script>

    <button>點我彈出彈窗</button>
</body>
</html>

調整視窗大小事件

我們通過手動拉扯頁面邊框可以調整頁面大小：

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

window.onresize是調整視窗大小加載事件，當觸發時呼叫內部處理函式

注意：

只要視窗發生像素變化，就會觸發該事件
我們常常利用這個事件完成回應式布局，window.innerWidth表示當前螢屏寬度

代碼展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 我們設定一下div的大小，我們希望頁面小于一定程度，div消失 -->
    <style>
        div {
            height: 200px;
            width: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <script>
        window.addEventListener('load',function(){
            // 頁面調整大小有兩種語法
            // window.onresize = function(){}
            // window.addEventListener('resize',function({}))
            // 其中resize就是調整視窗加載事件，當觸發就呼叫的處理函式

            window.addEventListener('resize',function(){
                console.log('頁面變化了');
            })

            // 我們希望頁面寬度小于800，div隱藏
            var div = document.querySelector('div');
            window.addEventListener('resize',function(){
                if(window.innerWidth < 800){
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }
            })
        })
    </script>
    <div></div>
</body>
</html>

定時器

window物件為我們提供了兩種定時器:

Timeout
Interval

回呼函式

在講解定時器之前,我們先來了解一下回呼函式:

回呼函式callback
回呼函式常常是指其他內容完成之后,在一定條件下再重新呼叫該函式
例如我們之前講到的click事件后的函式,在我們點擊某物件后才會觸發;也比如我們下面即將講到的定時器,在一定時間之后才運行的函式,被稱為回到函式

Timeout定時器

Timeout分為創建和停止:

//創建方法:
window.setTimeout(呼叫函式,[延遲毫秒數])
//停止方法:
window.clearTimeout(timeout ID)

setTimeout講解:

setTimeout()用來設定一個定時器
該定時器在定時器到期后執行呼叫函式
這個呼叫函式可以直接寫函式,可以寫函式名兩種形式呼叫
延遲的默認毫秒數為0,即如果不寫延遲毫秒數,默認為立即觸發狀態,但該函式仍舊被認為是回呼函式
因為定時器較多,我們常常為定時器設定var變數識別符號,同時Timeout的定時器停止中的timeout ID就是指該識別符號

clearTimeout講解:

clearTimeout()方法用來取消之前設定的Timeout定時器

注意:

Timeout的內置函式僅執行一次!

代碼展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>點擊我停止計時器</button>

    <script>
        // 定時器方法：window.setTimeout(呼叫函式，{延遲毫秒})，window可以省略
        setTimeout(function(){
            console.log('3s到了');
        },2000)

        // 當毫秒數不設定時，默認為0，立即觸發
        setTimeout(function(){
            console.log('立刻觸發');
        })
        
        // 定時器函式可以是外部函式
        function timeback(){
            console.log('6s到了');
        }

        // 我們為了區分定時器，常常會加上識別符號
        // 當你定義時，這個setTimeout自動開始計時
        var timer1 = setTimeout(timeback,6000);

        // 我們也可以取消掉定時器setTimeout

        // 首先我們定義定時器
        var timer = setTimeout(function() {
            console.log("10s后爆炸！");
        },10000)
        // 獲得button，在button上捆綁上停止計時器的操作
        var button = document.querySelector('button');
        button.addEventListener('click',function(){
            clearTimeout(timer);
        })
    </script>
</body>
</html>

Interval定時器

Interval分為創建和停止:

//創建方法:
window.setInterval(呼叫函式,[延遲毫秒數])
//停止方法:
window.clearInterval(Interval ID)

setInterval講解:

setInterval()用來設定一個定時器
該定時器在定時器到期后執行呼叫函式
這個呼叫函式可以直接寫函式,可以寫函式名兩種形式呼叫
延遲的默認毫秒數為0,即如果不寫延遲毫秒數,默認為立即觸發狀態,但該函式仍舊被認為是回呼函式
因為定時器較多,我們常常為定時器設定var變數識別符號,同時Timeout的定時器停止中的timeout ID就是指該識別符號

clearInterval講解:

clearInterval()方法用來取消之前設定的Interval定時器

注意:

Timeout的內置函式會多次執行直至被終止!

代碼展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button >點擊我開啟定時器</button>
    <button >點擊我終止計時器</button>
    
    <script>
        

        var begin = document.querySelector('.begin');
        var end = document.querySelector('.end');
        // 注意需要把setInterval的名稱定義在外面，使其變為全域變數
        var timer = null;
        begin.addEventListener('click',function(){
            // setInterval(回呼函式，【間隔秒數】)
            timer = setInterval(function(){
                console.log('1s');
            },1000);
        })
        end.addEventListener('click',function(){
            clearInterval(timer);
        })
    </script>
</body>
</html>

JavaScript執行機制

在了解JavaScript的執行機制前,我們需要先了解JavaScript的基本資訊:

JavaScript是單執行緒,在同一時間只能做一件事
因為我們JavaScript是為了操作DOM和BOM,我們在進行操作時不可能同時創建和洗掉,所以JavaScript被設定為單執行緒
但是,JavaScript的單執行緒注定了JavaScript的效率低下,我們的所有任務都需要進行排隊,但如果其中有一項任務等待時間較長,就會導致后面的任務不進行,造成頁面渲染不連貫

所以在HTML5中,允許JavaScript腳本建立多個執行緒,于是出現了同步和異步:

同步:
- 前一個任務執行完畢后,后一個任務才能執行
異步:
- 可以同時處理多個任務

同時也就區分出同步任務和異步任務:

同步任務:
- 同步任務都在主執行緒上執行,形成一個執行線
異步任務:
- JS的異步任務都是通過回呼函式執行的
- 一般而言異步任務分為:
  - 普通事件 : 如click,resize等
  - 資源加載 : 如load,error等
  - 定時器: 包括Timeout,Interval等

因而JavaScript的執行機制如下:

先執行執行堆疊中的同步任務
異步任務(回呼函式)放入任務佇列中
一旦執行堆疊的所有同步任務執行完畢,系統就會按照次序讀取任務佇列中的異步任務,于是被讀取的異步任務結束等待狀態,加載進執行堆疊的末尾并開始執行

我們給出一張圖片來解釋上述內容:

location物件

在學習location物件之前,我們先來了解一下URL:

統一資源定位符(URL)是互聯網上標準資源的地址.
互聯網上的每個檔案都有一個唯一的URL,它包含的資訊指出檔案的位置以及瀏覽器應該怎么處理它

protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link

組成	說明
protocol	通信協議常用的http,ftp,maito
host	主機(域名)
port	埠號可選. 省略時使用方案的默認埠
path	路徑由零個或多個'/'隔開的字串,一般用來表示主機上的一個目錄或檔案地址
query	引數以鍵值對的形式,用&隔開
fragment	片段 #后面內容常用于連接錨點

在了解了URL之后我們來介紹一下location:

window物件為我們提供了一個location屬性用來獲得或設定表單的URL,并且可以用來決議URL
因為這個屬性回傳的是一個物件,所以我們也將該屬性稱為location物件,我們可以直接輸出location獲得物件,也可以采用屬性方法獲得其內容

location物件屬性和方法	回傳值
location.href	獲得或設定整個URL
location.host	回傳主機(域名)
location.port	回傳埠號若沒有回傳空字串
location.pathname	回傳路徑
location.search	回傳引數
location.hash	回傳片段
location.assign	和href,用來跳轉頁面(附帶歷史記錄)
location.replace	和href,用來跳轉頁面(不附帶歷史記錄)
location.reload	重新加載該頁面(ctrl+F5)

代碼展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <--我們希望點擊該按鍵后,出現提示n秒后跳轉頁面,并在倒計時結束后跳轉頁面-->
    
</head>
<body>
    <button>點擊我5s后跳轉頁面</button>
    <div></div>

    <script>
        var button = document.querySelector('button');
        var div = document.querySelector('div');
        button.addEventListener('click',function(){
            // 在點擊后，出現倒計時：
            var time = 5;
            setInterval(function(){
                if(time == 0){
                    //在這里我們使用href來跳轉頁面
                    location.href = 'https://www.baidu.com/';
                } else {
                    // 這里注意div修改文字用innerHTML
                    div.innerHTML = '還剩下' + time + '秒后跳轉頁面';
                    time--;
                }
            },1000)
        })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <--這部分我們來講解location的三種方法-->
    
</head>
<body>
    <button>assign</button>
    <button>replaca</button>
    <button>reload</button>

    <script>
        var buttons = document.querySelectorAll('button');
        // assign跳轉頁面，且保留歷史記錄
        buttons[0].addEventListener('click',function(){
            location.assign('https://www.baidu.com/');
        })
        // replace跳轉頁面，不保留歷史記錄
        buttons[1].addEventListener('click',function(){
            location.replace('https://www.baidu.com/');
        })
        // reload重繪頁面，類似于ctrl+f5
        buttons[2].addEventListener('click',function(){
            location.reload();
        })
    </script>
</body>
</html>

navigator物件

navigator物件包含有關瀏覽器的資訊,它有很多屬性,我們最常用的是userAgent,該屬性可以回傳由客戶機發給服務器的user-agent頭部資訊,用來判斷你目前使用的機型

我們常用下述代碼來判斷你打開的網頁是電腦端還是手機端:

if(navigator.userAgent.match(各種手機品牌)) {
    //如果是手機,就轉到手機端頁面
    window.location.href = "https://www.baidu.com/";
} else {
    //如果是電腦,就轉到電腦端頁面
    window.location.href = "http://news.baidu.com/";
}

history物件

window物件給我們提供了history物件,與瀏覽器歷史記錄進行互動,該物件包含了用戶訪問過的URL

history物件方法	說明
history.back()	可以后退網頁(類似于瀏覽器自帶后退按鍵)
history.forward()	可以前進網頁(類似于瀏覽器自帶前進按鍵)
history.go(引數)	可以自定義前進后退頁面(引數可以是正負數)

結束語

好的,關于BOM的知識我們就講解到這里,你是否完全明白了呢?

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/500012.html

標籤：JavaScript

上一篇：web前端工程化合集

下一篇：前端開發性能優化方案