瀏覽器內(nèi)置對(duì)象應(yīng)用實(shí)踐

? ?“?瀏覽器內(nèi)置對(duì)象，我們每天都與其打交道，可能你并未全面的去了解過(guò)它。我們一起討論下你有過(guò)哪些實(shí)踐。”

?

1.什么是瀏覽器對(duì)象模型？（BOM ：Browser Object Model）

? ? ?瀏覽器模型提供了獨(dú)?于內(nèi)容的、可以與瀏覽器 窗?進(jìn)?滑動(dòng)的對(duì)象結(jié)構(gòu)，瀏覽器提供的 API 其主要對(duì)象有：?

1. window 對(duì)象——BOM 的核?，是 js 訪問(wèn)瀏覽器的接?，也是 ES 規(guī)定的 Global 對(duì)象

2. ?location 對(duì)象：提供當(dāng)前窗?中的加載的?檔有關(guān)的信息和?些導(dǎo)航功能。既是 window 對(duì)象屬 性，也是 document 的對(duì)象屬性

3. ?navigator 對(duì)象：獲取瀏覽器的系統(tǒng)信息

4. ?screen 對(duì)象：?來(lái)表?瀏覽器窗?外部的顯?器的信息等

5. ?history 對(duì)象：保存??上?的歷史信息?

   
   

? ??內(nèi)置對(duì)象的一些方法或?qū)傩裕曳诺搅撕笪牡?點(diǎn)，羅列這些本身沒(méi)啥意思，懂得在實(shí)踐中使用才是有價(jià)值的學(xué)習(xí)。接下來(lái)我分享幾點(diǎn)我的實(shí)踐，當(dāng)然這并不能涵蓋我職業(yè)生涯中遇到的情況，你的工作學(xué)習(xí)中如有遇到別的場(chǎng)景，歡迎一起探討。

2. 我有過(guò)哪些實(shí)踐？

? ? ?2.1?斷網(wǎng)監(jiān)測(cè)

? ? ?我之前做了個(gè)展示實(shí)時(shí)數(shù)據(jù)的項(xiàng)目，正常狀況下用戶的電腦只要開(kāi)著這個(gè)監(jiān)測(cè)頁(yè)面，那么數(shù)據(jù)都能夠?qū)崟r(shí)刷新。不過(guò)，同事總會(huì)帶著筆記本前往各個(gè)會(huì)議室，這時(shí)無(wú)線網(wǎng)就會(huì)中斷，導(dǎo)致客戶端與服務(wù)端失去websocket連接，自然數(shù)據(jù)就不能實(shí)時(shí)刷新了。

? ? ?解決這個(gè)問(wèn)題很簡(jiǎn)單，我們就使用navigator這個(gè)內(nèi)置對(duì)象的online屬性來(lái)檢測(cè)用戶網(wǎng)絡(luò)是否連接正常。如果你想看這個(gè)API的兼容性，這里教大家一個(gè)判斷瀏覽器是否支持的技巧，我們可以使用caniuse網(wǎng)站查看，非常的直觀

https://caniuse.com/?search=navigator.onLine

? ??

??? 對(duì)應(yīng)的業(yè)務(wù)邏輯代碼，大家可以看一下，每隔5秒會(huì)檢測(cè)是否斷網(wǎng)。如果有出現(xiàn)過(guò)斷網(wǎng)，就會(huì)在網(wǎng)絡(luò)連接正常的時(shí)候嘗試重連，即如果心跳發(fā)送失敗，則表明失去與服務(wù)端websocket的連接，需要重連。

? ??

initWebSocket() {    this.connection();    let that= this;    // 斷開(kāi)重連機(jī)制,嘗試發(fā)送消息,捕獲異常發(fā)生時(shí)重連    this.timer = setInterval(() => {        if (navigator.onLine) {            console.log('網(wǎng)絡(luò)連接正常');            try {                that.stompClient.send("Heartbeat test");            } catch (err) {                console.log("WebSocket斷線了%s,開(kāi)始重連", err);                that.connection();            }        } else {????????????console.log('已斷網(wǎng)，WebSocket斷線了%s');        }    }, 5000);},connection() {    let that=this;    // 建立連接對(duì)象    let socket = new SockJS(`${process.env.VUE_APP_WEBSOCKET_URL}/xxxxx-websocket`);    // 獲取STOMP子協(xié)議的客戶端對(duì)象    this.stompClient = Stomp.over(socket);    // 定義客戶端的認(rèn)證信息,按需求配置    let headers = {}    // 向服務(wù)器發(fā)起websocket連接    this.stompClient.connect(headers,() => {        this.stompClient.subscribe('/xxxxx/realtime/ready', (msg) => {            // 訂閱服務(wù)端提供的某個(gè)topic            console.log('WebSocket收到消息%s，刷新實(shí)時(shí)數(shù)據(jù)',msg.body);            that.reloadAll();        },headers);    }, (err) => {        // websocket連接發(fā)生錯(cuò)誤時(shí)的處理函數(shù)        console.log('WebSocket連接失敗%s',err);    });},disconnect() {    // 斷開(kāi)websocket連接    if (this.stompClient) {        this.stompClient.disconnect();    }}

? ???

? ? ?2.2?不同屏幕適配

? ? ?之前做了一個(gè)web應(yīng)用系統(tǒng)，有一個(gè)常見(jiàn)的適配問(wèn)題。用戶有的使用筆記本，有的是寬屏臺(tái)式機(jī)。假定我們將某個(gè)業(yè)務(wù)的表格列寬設(shè)置一個(gè)固定值，可能在筆記本上能夠良好的展示，但到了臺(tái)式機(jī)顯示屏，表格展示可能就不能鋪滿屏幕。

? ? ?解決這個(gè)問(wèn)題，我們使用到了Document 對(duì)象，可以稱作是DOM對(duì)象。

我們通過(guò)document.body.clientWidth獲取內(nèi)部寬度。

頁(yè)面是vue做的，示例代碼如下：

2.2.1首先定義一下變量

data() {    return {            screenWidth: document.body.clientWidth-50    }}

2.2.2?表格中按需確立列寬，例如screenWidth*0.1

        prop="property_name"        label="列名"        :show-overflow-tooltip="true"        align="center"        :width="screenWidth*0.1"></el-table-column>

2.2.3?不要忘了一步，用戶切換屏幕尺寸時(shí)，記得修改變量

mounted () {    //監(jiān)聽(tīng)屏幕寬度    window.onresize = () => {        return (() => {            window.screenWidth = document.body.clientWidth-50;            this.screenWidth = window.screenWidth;        })()    }}

2.3 獲取地址欄path及參數(shù)

這個(gè)比較簡(jiǎn)單，留這個(gè)大家做一下吧。

3.?內(nèi)置對(duì)象方法參考

Window 對(duì)象 windows 對(duì)象是整個(gè)瀏覽器對(duì)象模型的核?，其扮演著既是接??是全局對(duì)象的??

alert()、 confirm() 、prompt()、 open() 、

onerror() 、setTimeout() 、setInterval()

窗?位置：

screenLeft 、screenTop、 screenX 、

screenY 、moveBy(x,y) moveTo(x,y)?

窗???：

innerWidth 、innerHeight、outerWidth、 outerHeight、

resizeTo(width, height)、 resizeBy(width, height)?

定時(shí)器

setTimeout 、setInterval

Location 對(duì)象 提供當(dāng)前窗?中的加載的?檔有關(guān)的信息和?些導(dǎo)航功能。既是 window 對(duì)象屬性，也是 document 的對(duì)象屬性?

location 對(duì)象的主要屬性：?

hash、 host、 hostname、 href 、pathname、 port 、protocol 、search?

Navigation 對(duì)象 navigation 接?表???代理的狀態(tài)和標(biāo)識(shí)，允許腳本查詢它和注冊(cè)??進(jìn)??些活動(dòng)?

History 對(duì)象 history 對(duì)象保存著??上?的歷史記錄，從窗?被打開(kāi)的那?刻算起，history 對(duì)象是?窗?的瀏覽 歷史??檔和?檔狀態(tài)列表的形式表?。

go() 、back()、 forword() 、length?

學(xué)無(wú)止境，覺(jué)得不錯(cuò)的話，請(qǐng)記得為我關(guān)注、點(diǎn)贊、轉(zhuǎn)發(fā)三連哦！