BOM初識

• BOM概述
• • 什麼是BOM
  • BOM的構成
• window
• • 視窗加載事件
  • 調整視窗大小事件
• setTimeout()
• • 定時器setTimeout()
  • 停止setTimeout定時器
  • setInterval()定時器
  • 倒計時案例
• JS執行機制
• • JS是單線程
  • 同步和異步
  • 執行順序
  • 執行機制總結
• Location
• • 什麼是location對象
  • URL
  • location對象的屬性
• Navigator
• History
• Screen

BOM概述

什麼是BOM

BOM即浏覽器對象模型，它提供了獨立于内容而與浏覽器視窗進行互動的對象，其核心對象是window。

BOM由一系列相關的對象構成，并且每個對象都提供了很多方法與屬性。

BOM的構成

常見的BOM對象

• window：代表整個浏覽器視窗。
• Navigator ：代表浏覽器目前的資訊，通過Navigator我們可以擷取使用者目前使用的是什麼浏覽器。
• Location： 代表浏覽器目前的url資訊，通過Location我們可以擷取或者設定目前的位址資訊。
• History：代表浏覽器的曆史資訊，通過History我們可以實作上一步/重新整理/下一步操作。
• Screen：代表使用者的螢幕資訊。

  

  （圖源有蟬.）

window

window對象是浏覽器頂級對象，具有雙重角色。

1. 它是JS通路浏覽器視窗的一個接口。
2. 它是全局對象，定義在全局作用域中的變量、函數都會變成window對象的屬性和方法。

注意：window下的一個特殊屬性

window.name

.

視窗加載事件

<script>
        window.addEventListener("load", function()  {});
        //或者
        window.onload = function() {};     
</script>    
           

1. window.onload

   是視窗加載事件，文檔内容完全加載完成會觸發該事件。

2. window.onload

   是傳統注冊方式，隻能寫一次，如果有多次，以最後一次為準，而

   window.addEventListener

   則沒有限制。

<script>
        document.addEventListener('DOMContentLoaded',function()  {});
</script>  
           

DOMContentLoaded

事件觸發時，僅當DOM加載完成，不包括樣式表，圖檔，flash等，加載速度比load快一點。

調整視窗大小事件

<script>
        window.addEventListener("resize", function()  {});
        //或者
        window.onresize = function() {};     
</script>  
           

window.onresize

是調整視窗大小事件，當觸發時就調用處理函數。

setTimeout()

定時器setTimeout()

<script>
       window.setTimeout(調用函數，[延遲毫秒數])；
</script>  
           

setTimeout()

方法用于設定一個定時器，該定時器到期後執行調用函數。

1. 延遲毫秒數預設是0，如果寫，機關是毫秒。
2. 因為定時器可能有很多，是以我們要給定時器指派。

3. setTimeout()

   這個調用函數我們也稱回調函數callback。而這個函數需要等待時間。

停止setTimeout定時器

<script>
       window.clearTimeout(timeoutID)；
</script>  
           

clearTimeout()

方法取消了先前調用的

setTimeout()

定時器。

setInterval()定時器

<script>
       window.setInterval(回調函數，[延遲毫秒數])；
</script>  
           

setInterval()

方法重複調用一個函數，每隔這個時間調用一次函數。

倒計時案例

<style>
        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: #000000;
            color: #ffffff;
            line-height: 40px;
            text-align: center;
        }
  </style>
           

<div>
      <span class="hour">1</span>
      <span class="minute">2</span>
      <span class="second">3</span>
</div>
           

<script>
        const hour = document.querySelector('.hour');
        const minute = document.querySelector('.minute');
        const second = document.querySelector('.second');   
        let inputTime = +new Date('2020-6-1 12:00:00'); // 傳回得是使用者輸入時間總的毫秒數
        countDown(); // 我們先調用一次這個函數，防止第一次重新整理頁面有空白
        // 開啟定時器
        setInterval(countDown,1000);
        function countDown() {
            let nowTime = +new Date(); //傳回目前時間總的毫秒數
            let times = (inputTime - nowTime) / 1000 // times是剩餘時間總得秒數
            let h = parseInt(times / 60 / 60 % 24);
            h = h<10?'0'+h:h;
            hour.innerHTML = h;
            let m = parseInt(times / 60 % 60);
            m = m<10?'0'+m:m;
            minute.innerHTML = m;
            let s = parseInt(times % 60);
            s = s<10?'0'+s:s;
            second.innerHTML = s;
        }
        </script>
           

JS執行機制

JS是單線程

JS是單線程語言。 JS的Event Loop是JS的執行機制。深入了解JS的執行,就等于深入了解JS裡的event loop。

單線程就意味着，所有任務需要排隊，前一個任務結束，才會執行後一個任務。如果前一個任務耗時很長，後一個任務就不得不一直等着。

同步和異步

**同步：**在主線程上排隊執行的任務，隻有前一個任務結束後再執行後一個任務，程式的執行順序與任務的排列順序是一緻的、同步的。

**異步：**不進入主線程、而進入"任務列"（task queue）的任務，隻有"任務隊列"通知主線程，某個異步任務可以執行了，該任務才會進入主線程執行。

它們的本質差別：這條流水線上各個流程的執行順序不同。

執行順序

1. 先執行執行棧中的同步任務。
2. 異步任務（回調函數）放入任務隊列中。
3. 一旦執行棧中的所有同步任務執行完畢，系統就會按次序讀取任務隊列中的異步任務，于是被讀取的異步任務結束等待狀态，進入執行棧，開始執行。
4. 由于主線程不斷的重複獲得任務，執行任務，再擷取任務，再執行，是以這種機制被稱為“事件循環”。

執行機制總結

更多

Location

封裝目前視窗正在打開的url對象

什麼是location對象

window 對象給我們提供了一個location屬性用于擷取或設定窗體的URL，并且可以用于解析URL。因為這個屬性傳回的是一個對象，是以我們将這個屬性也稱為location對象

URL

統一資源定位符（Uniform Resoure Locator,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	主機（域名）www.itheima.com
port	端口号可選，省略時使用方案的預設端口
path	路徑由零或多個’/'符号隔開的字元串，一般用來表示主機上的一個目錄或者檔案位址
query	參數 以鍵值對的形式通過&符号分割開來
fragment	片段 #後面内容 常見于連結錨點

location對象的屬性

對象屬性	傳回值
location.href	擷取或者設定整個URL
location.host	傳回主機（域名）www.itheima.com
location.port	傳回端口号 如果未寫傳回空字元串
location.pathname	傳回路徑
location.search	傳回參數
location.hash	傳回片段 #後面内容常見于錨點連結

Navigator

封裝浏覽器配置資訊的對象。

這個對象包含有關浏覽器的資訊，它有很多屬性，我們最常用的是 userAgent,該屬性可以傳回由客戶機發送伺服器的user-agent頭部的值

History

儲存目前視窗打開後成功通路過的url的曆史記錄棧

屬性	說明
history.length	傳回浏覽器曆史清單中的 URL 數量
history.back()	加載 history 清單中的前一個 URL
history.go(numberURL)	加載曆史清單中的某個具體的頁面。
history.forward	加載曆史清單中下一個URL，等同于history.go(1)

Screen