JS4-BOM瀏覽器物件型別

阿新 • • 發佈：2021-11-13

什麼是BOM

瀏覽器的頂級物件

頁面載入事件以及注意事項

定時器函式

JS執行機制

頁面跳轉、重新整理

history、navigator物件

什麼是BOM

瀏覽器物件模型(Browser Object Model)，主要作用是提供獨立於內容而與瀏覽器視窗進行互動的物件，核心是window，BOM缺乏標準

對比

DOM BOM

文件物件模型瀏覽器物件模型

頂級物件的document 頂級物件是window

主要學習操作元素主要和瀏覽器視窗互動，重新整理跳轉等

W3C BOM是瀏覽器廠商各自定義的，相容性差

BOM的構成

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

是JS訪問瀏覽器視窗的一個介面
是一個全域性物件，定義在全域性作用域中的變數、函式都會變成window物件的方法和屬性
在呼叫的時候可以省略window，前面學習的對話方塊alert()、prompt()等
window下不要直接定義變數為name，因為有個特殊屬性window.name

window物件常見事件

視窗載入事件

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

window.onload是視窗載入事件，當文件enrich完全載入完成會觸發該事件（包括影象、指令碼檔案、CSS檔案等），就呼叫的處理函式

有了window.onload就可以把JS程式碼寫到頁面元素的上方，但是寫了多個後只處理最後一個
如果用addEventListener則沒有限制

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

僅當DOM載入完成時才會觸發，不包含樣式表、圖片、flash等，ie9以上才支援

在頁面圖片很多載入很慢的時候，可以提前獲取互動，保證使用者體驗

調整視窗大小事件

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

調整視窗大小事件

只要視窗帶下發生畫素變化時，就會觸發
用於響應式佈局；window.innerWidth可以獲得螢幕寬度

        var div = document.querySelector('div');
        window.addEventListener('resize', function () {
            if (window.innerWidth <= 800) {
                div.style.display = 'none';
            }	else {
                div.style.display = 'block';
            }
        })

定時器

兩種定時器

setTimeOut()

window.setTimeout(呼叫函式，[延遲的毫秒數]);

延遲時間可以省略
呼叫函式可以直接寫函式，還可以寫函式名
還有一個寫法'函式名()',不提倡
頁面中可能有很多定時器，我們經常給定時器加識別符號

  function callback() {
            console.log('111');
        }
        var time1 = setTimeout(callback, 3000);
        var time2 = setTimeout(callback, 1000);

回撥函式callback：需要等待時間，時間到了才去呼叫這個函式以前的.onclick=function()裡面的函式也是回撥函式

案例：5s後自動隱藏廣告

        var ad = document.querySelector('.ad');
        setTimeout(function () {
            ad.style.display = 'none';
        }, 5000)

計時器停止：

window.clearTimeout(timeoutID)

setInterval()定時器

window.setInterval(回撥函式，[間隔的毫秒數])

執行過程不同，本函式是每間隔一定時間就執行一次，會不斷執行，setTimeout只執行一次

案例：秒殺倒計時

這個倒計時是不斷變化的，因此需要定時器來自動變化（setInterval）
三個盒子分別存放時分秒
三個黑色盒子利用innerHTML放入計算的小時分鐘秒數
最好先呼叫一次函式，防止剛重新整理頁面時出現空白

        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');
        var inputTime = +new Date('2021-3-13 18:00:00');//使用者想輸入的時間
        countDown();//最好先呼叫一次函式，防止剛重新整理頁面時出現空白
        //開啟定時器 每秒都呼叫該函式
        setInterval(countDown, 1000);
        function countDown(time) {
            var nowTime = +new Date();//當前時間總的毫秒數
            var times = (inputTime - nowTime) / 1000;//秒數
            var h = parseInt(times / 60 / 60 % 24);
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h;
            var m = parseInt(times / 60 % 60);
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60);
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }

window.clearInterval();停止定時器

有時外界需要內部的變數，需要在函式外定義物件，可以定義為null

this

指向呼叫它的物件

全域性作用域下或者普通函式下this指向window；（定時器裡面的this指向window）
方法呼叫中this指向的是呼叫它的物件

btn.addEventListener('click',function(){})
btn.onclick=function(){};
//都指向btn

建構函式中this指向建構函式的例項

var fun=new Fun();//this指向fun

JS執行佇列

JS單執行緒

JS是單執行緒語言，同一時間只能做一件事。

單執行緒意味著所有任務需要排隊，如果JS執行事件過長，會造成其他程式碼等待時間過長

為了解決這個問題，HTM5提出了Web Worker標準，允許JS建立多個執行緒，因此出現了同步和非同步

同步和非同步

同步：

前一個任務結束後再執行後一個任務，程式的執行順序和任務的排列順序是一致的、同步的

非同步：

做一件事情的時候同時還可以做其他事情

本質區別：這條流水線上各個流程執行順序不同

同步任務：同步任務都在主執行緒上進行，行程一個執行棧

非同步任務：JS的非同步是通過回撥函式實現的，

普通事件：如click、resize等
資源載入，如load、error等
定時器，如setinterval、setTimeout等

非同步任務相關回調函式新增到任務佇列（訊息佇列）中。

JS執行機制

先執行執行棧中同步任務
非同步任務放入任務佇列中
一旦執行棧中所有同步任務執行完畢，系統就會按次序讀取任務佇列中的非同步任務，於是被讀取的非同步任務結束等待狀態，進入執行棧，開始執行

由於主執行緒不斷的獲取任務、執行任務、再獲取任務、再執行任務，這種機制被稱為事件迴圈

Location物件

window物件給我們提供了一個location屬性用於獲取或設定窗體的URL，並且可以用於解析URL。該屬性返回的是一個物件，因此也稱為Location物件

URL

統一資源定位符(Uniform Resource Locator)，是網際網路標準資源的地址，網際網路每個檔案都有位移的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 埠號可選，省略時使用方案的預設埠，如http的預設埠為80
path路徑由零或多個'/'符號隔開的字串，一般用來表示主機上的一個目錄或檔案地址
query 引數以鍵值對的形式，用&號分割開
fragment 片段 #後面內容，常見於連線錨點

Location物件的屬性

location.href 獲取或設定整個URL 可以實現點選某位置跳轉其他頁面

location.host 返回主機（域名）

location.port 返回埠號

location.pathname返回路徑

location.search 返回引數(query)

location.hash 返回片段 #後面內容常見於連結錨點

案例：5s後自動跳轉頁面

var timer=5;
setInterval(function(){
if(timer==0){
    location.href='http://www.itcast.cn';
}else{
    div.innerHTML='將在'+timeer+'s 後跳轉首頁'; 
    timer--;}
},1000)

案例：提交表單後跳轉到另一個頁面並顯示

第一個登陸頁面，裡有提交表單，利用action='index.html'提交到第二個頁面，input表單必須有name屬性，作為提交的屬性
第二個頁面，可以使用第一個頁面的引數，利用了引數的傳遞，從location.search可以得到
location.search得到的是形如 ?name=Andy 的樣式，需要去掉問號（substr(開始的位置，位數)
還需要利用split('=')分開引數和值

Location常用方法

location.assign 跳轉頁面，記錄瀏覽器歷史，可以使用後退功能

location.replace 跳轉頁面，但是不記錄歷史，無法後退

location.reload 重新載入，相當於重新整理頁面，如果引數為true表示強制重新整理（不讀取快取中圖片，機載較慢），不填表示類似於F5直接重新整理

navigator物件

navigator.userAgent顯示瀏覽器資訊、系統資訊

if((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad|hpwOS|SysbianOS|Windows Phone|UCWEB|BlackBerry|Nokia|RIM|IEMobile|Mobile)/i){
location.href="http://www.cnblogs.com/dying"}
else{
    location.href="";
}