JavaScript 系列筆記：

初識 JavaScript

JavaScript 系列筆記——ECMAscript（壹）

JavaScript 系列筆記——DOM（貳）

JavaScript 系列筆記——BOM（叄）

目錄

BOM

1. BOM 概述

2. window 物件的常見事件

3. 定時器

4. JS 執行佇列

5. location 物件

6. navigator 物件

7. history 物件

BOM

1. BOM 概述

1.1 什么是 BOM

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

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

BOM 缺乏標準，JavaScript 語法的標準化組織是 ECMA，DOM 的標準化組織是 W3C，BOM 最初是Netscape 瀏覽器標準的一部分，

1.2 BOM 的構成

BOM 比 DOM 更大，它包含 DOM，

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

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

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

2. window 物件的常見事件

2.1 視窗加載事件

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

window.onload 是視窗 (頁面）加載事件,當檔案內容完全加載完成會觸發該事件(包括影像、腳本檔案、CSS檔案等), 就呼叫的處理函式，

注意：

1. 有了 window.onload 就可以把 JS 代碼寫到頁面元素的上方，因為 onl oad 是等頁面內容全部加載完畢，再去執行處理函式，

2. window.onload 傳統注冊事件方式 只能寫一次，如果有多個，會以最后一個 window.onload 為準，

3. 如果使用 addEventListener 則沒有限制

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

DOMContentLoaded 事件觸發時，僅當DOM加載完成，不包括樣式表，圖片，flash等等

如果頁面的圖片很多的話, 從用戶訪問到onload觸發可能需要較長的時間, 互動效果就不能實作，必然影響用戶的體驗，此時用 DOMContentLoaded 事件比較合適，

2.2 調整視窗大小事件

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

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

注意：

1. 只要視窗大小發生像素變化，就會觸發這個事件，

2. 我們經常利用這個事件完成回應式布局， window.innerWidth 當前螢屏的寬度

3. 定時器

3.1 兩種定時器

window 物件給我們提供了 2 個非常好用的方法-定時器，

• setTimeout()
• setInterval()

3.2 setTimeout() 定時器

window.setTimeout(呼叫函式，延遲毫秒數)

setTimeout() 方法用于設定一個定時器，該定時器在定時器到期后執行呼叫函式，

這個呼叫函式我們也稱為回呼函式 callback

普通函式是按照代碼順序直接呼叫， 而這個函式，需要等待時間，時間到了才去呼叫這個函式，因此稱為回呼函式，

簡單理解： 回呼，就是回頭呼叫的意思，上一件事干完，再回頭再呼叫這個函式，

注意：

1. window 可以省略，

2. 這個呼叫函式可以直接寫函式，或者寫函式名或者采取字串 ‘函式名()' 三種形式，第三種不推薦

3. 延遲的毫秒數省略默認是 0，如果寫，必須是毫秒，

4. 因為定時器可能有很多，所以我們經常給定時器賦值一個識別符號，

3.3 停止 setTimeout() 定時器

window.clearTimeout(timeoutID)

clearTimeout() 方法取消了先前通過呼叫 setTimeout() 建立的定時器，

注意：

1. window 可以省略，

2. 里面的引數就是定時器的識別符號 ，

3.4 setInterval() 定時器

window.setInterval(回呼函式, 間隔毫秒數)

setInterval() 方法重復呼叫一個函式，每隔這個時間，就去呼叫一次回呼函式，

注意：

1. window 可以省略，

2. 這個呼叫函式可以直接寫函式，或者寫函式名或者采取字串 '函式名()' 三種形式，

3. 間隔的毫秒數省略默認是 0，如果寫，必須是毫秒，表示每隔多少毫秒就自動呼叫這個函式，

4.因為定時器可能有很多，所以我們經常給定時器賦值一個識別符號，

5. 第一次執行也是間隔毫秒數之后執行，之后每隔毫秒數就執行一次，

3.5 停止 setInterval() 定時器

window.clearInterval(intervalID)

clearInterval() 方法取消了先前通過呼叫 setInterval()建立的定時器，

注意：

1. window 可以省略，

2. 里面的引數就是定時器的識別符號 ，

4. JS 執行佇列

4.1 JS 是單執行緒

JavaScript 語言的一大特點就是單執行緒，也就是說，同一個時間只能做一件事，這是因為 Javascript 這門腳本語言誕生的使命所致——JavaScript 是為處理頁面中用戶的互動，以及操作 DOM 而誕生的，比如我們對某個 DOM 元素進行添加和洗掉操作，不能同時進行， 應該先進行添加，之后再洗掉，

單執行緒就意味著，所有任務需要排隊，前一個任務結束，才會執行后一個任務，這樣所導致的問題是： 如果JS 執行的時間過長，這樣就會造成頁面的渲染不連貫，導致頁面渲染加載阻塞的感覺，

4.2 同步和異步

為了解決這個問題，利用多核 CPU 的計算能力，HTML5 提出 Web Worker 標準，允許JavaScript 腳本創建多個執行緒，于是，JS 中出現了同步和異步，

同步

前一個任務結束后再執行后一個任務，程式的執行順序與任務的排列順序是一致的、同步的，比如做飯的同步做法：我們要燒水煮飯，等水開了（10分鐘之后），再去切菜，炒菜，

異步

你在做一件事情時，因為這件事情會花費很長時間，在做這件事的同時，你還可以去處理其他事情，比如做飯的異步做法：我們在燒水的同時，利用這10分鐘，去切菜，炒菜，

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

4.3 同步和異步

同步任務

同步任務都在主執行緒上執行，形成一個執行堆疊，

異步任務

JS 的異步是通過回呼函式實作的，

一般而言，異步任務有以下三種型別:

1. 普通事件，如 click、resize 等

2. 資源加載，如 load、error 等

3. 定時器，包括 setInterval、setTimeout 等

異步任務相關回呼函式添加到任務佇列中（任務佇列也稱為訊息佇列），

4.4 JS 執行機制

1. 先執行執行堆疊中的同步任務，

2. 異步任務（回呼函式）放入任務佇列中，

3. 一旦執行堆疊中的所有同步任務執行完畢，系統就會按次序讀取任務佇列中的異步任務，于是被讀取的異步任務結束等待狀態，進入執行堆疊，開始執行，

由于主執行緒不斷的重復獲得任務、執行任務、再獲取任務、再執行，所以這種機制被稱為事件回圈（ event loop），

5. location 物件

5.1 什么是 location 物件

window 物件給我們提供了一個 location 屬性用于獲取或設定表單的 URL，并且可以用于決議 URL ， 因為這個屬性回傳的是一個物件，所以我們將這個屬性也稱為 location 物件，

5.2 URL

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

URL 的一般語法格式為：

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

5.3 location 物件的屬性

重點：href 和 search

5.4 location 物件的方法

6. navigator 物件

navigator 物件包含有關瀏覽器的資訊，它有很多屬性，我們最常用的是 userAgent，該屬性可以回傳由客戶機發送服務器的 user-agent 頭部的值，

下面前端代碼可以判斷用戶那個終端打開頁面，實作跳轉

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS
|Symbian|Windows Phone)/i))) {
     window.location.href = ""; //手機
} else {
     window.location.href = ""; //電腦
}

7. history 物件

window 物件給我們提供了一個 history 物件，與瀏覽器歷史記錄進行互動，該物件包含用戶（在瀏覽器視窗中）訪問過的 URL，