BOM-篇

1. BOM 概述

1.1 什麼是 BOM

1. BOM（Browser Object Model） 即瀏覽器物件模型，它提供了獨立於內容而與瀏覽器視窗進行互動的物件，其核心的物件是 window
2. BOM 由一些列相關的物件構成，並且每個物件都提供了很多方法與屬性
3. BOM 缺乏標準，JS語法的標準化組織是ECMA， DOM的標準化組織是W3C， BOM最初是Netscape瀏覽器標準的一部分
   

1.2 BOM 的構成

1. BOM 比 DOM 更大，它包含 DOM
   
2. window 物件是瀏覽器頂級物件，它具有雙重角色：
   a. 它是JS訪問瀏覽器視窗的一個介面
   b. 它是一個全域性物件。定義在全域性作用域中的變數、函式都會變成window物件的屬性和方法，在呼叫的時候
       可以省略window。前面學習的對話方塊都屬於window物件的方法，如：alert()、prompt()等

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

2. window物件常見的事件

2.1 視窗（頁面）載入事件

1. window.onload事件

1. window.onload 是視窗（頁面）載入事件，當文件內容（影像、指令碼檔案、CSS檔案）完全載入完成會觸發該事件，
   然後呼叫處理函式
2. 有了window.onload 就可以把JS程式碼寫在頁面元素的上方，因為onload是等頁面內容全部載入完畢，再去執行處理函式
3. window.onload傳統註冊方式只能寫一次，如果寫多個，會以最後一個window.onload為準，如果使用addEventListener
   註冊事件則沒有限制

	window.onload = function () {

	}
	// 或者
	window.addEventListener('load', function () {

	})

2. document.DOMContentLoaded事件

1. document.DOMContentLoaded 事件，當DOM載入完成就會觸發，不用等圖片、CSS、flash等，載入速度比onload更快
2. IE9 以上才支援
3. 如果頁面圖片很多的話，等onload觸發可能時間會較長，影響使用者體驗，此時使用DOMContentloaded可以讓使用者提前與網
   頁互動，提高使用者體驗

2.2 調整視窗大小事件

1. window.onresize 是調整視窗大小載入事件，當視窗大小發生變化時就會觸發

2.3 重新載入頁面事件

1. window.onpageshow 重新載入頁面時觸發
2. onpageshow 與 onload的區別：
   a. onload 在執行頁面的後退或前進的時候，如果網頁被快取了，就觸發不了（比如火狐瀏覽器）
   b. onpageshow 在執行頁面的後退或前進的時候，不管網頁被有沒有被快取了，都會觸發
3. onpageshow事件物件中有個屬性 persisted 可以判斷是不是快取的頁面觸發了事件，返回布林值

3. 定時器

3.1 兩種定時器

1. window 物件給我們提供了2個非常好用的方法-定時器： setTimeout()、setInterval()

3.2 setTimeout() 一次性定時器

1. setTimeout() 方法用於設定一個定時器，該定時器在定時器到期後執行呼叫函式
2. 語法：window.setTimeout(呼叫函式, [延遲的毫秒數])
3. 在呼叫的時候可以省略window，延遲時間單位是毫秒，可以省略，如果省略預設的是0

//=====方式一======================================================
	window.setTimeout(function () {
		// 函式體
	}, 2000) 
// ====方式二======================================================
	setTimeout(fn ,3000)
	setTimeout('fn()', 3000) // 不提倡這種寫法
	function  fn ()	{
		// 函式體
	}	 

4. 停止一次性定時器
   a. 語法：window.clearTimeout(timeoutID) 停止定時器
   b.引數：timeoutID是定時器的識別符號（給定時器起的名字）

3.4 setInterval() 重複定時器

1. setInterval() 方法重複呼叫一個函式，每隔這個（延時）時間，就呼叫一次回撥函式
2. 語法：window.setInterval(回撥函式，[間隔毫秒數])
3. 停止定時器：
   a. 語法： window.clearInterval(timeID)
   b. timeID 是定時器的識別符號（給定時器起的名字）

3.5 定時器的 this 指向

1. 一般情況下，this 在定義函式的時候，確定不了指向，只有在呼叫函式的的時候才能確定 。遵循誰呼叫，
   this 就指向誰的原則
2. 全域性作用域或者普通函式中的this指向全域性物件window（定時器裡面的this指向window）

4. JS執行機制

4.1 JS 是單執行緒

1. JS語言的一大特點就是單執行緒，也就是說同一時間只能做一件事情。
2. 這是因為JS這門指令碼語言誕生的使命所致（JS是為處理頁面中使用者的互動，以及操作DOM誕生的）。
3. 比如對某個DOM元素進行新增刪除操作，不能同時進行，應該先新增後刪除

4.2 JS 單執行緒導致的問題

1. 單執行緒就意味著，所有任務需要排隊，前一個任務結束，才會執行後一個任務。
2. 這樣所導致的問題是：如果JS執行時間過長就會造成頁面渲染不連貫，導致頁面渲染載入阻塞的感覺
3. 比如定時器的延遲時間，就需要等待

4.3 同步和非同步

1. 為了解決單執行緒的問題，利用多核CPU的計算能力，HTML5 提出Web Worker標準，允許JS指令碼建立多個執行緒。
   於是JS出現了同步和非同步
2. 同步：前一個任務執行完再執行後一個任務，程式的執行順序與任務的排列順序是一致的、同步的。
3. 非同步：在做一件事情的時候，因為這件事情會花費很長時間，在做這件事情的同時，還可以去處理其它事情。

4.4 同步任務

1. 同步任務都在主執行緒上執行，形成一個執行棧
   

4.5 非同步任務

1. JS 的非同步是通過回撥函式實現的。
2. 一般而言，非同步任務有以下三種型別：
   a. 普通事件，如：click、resize等
   b. 資源載入，如：load、error等
   c. 定時器，setInterval、setTimeout等
3. 非同步任務相關的回撥函式新增到任務佇列中（任務佇列也稱為訊息佇列）
   

4.6 JS執行機制

1. 先執行執行棧中的同步任務
2. 非同步任務（回撥函式）放入任務佇列中
3. 一旦執行棧中的所有同步任務執行完畢，系統會按次序讀取任務佇列中的非同步任務，於是被讀取的非同步任務結束等待狀態，
   進入執行棧，開始執行，執行完之後，主執行緒再查詢任務佇列有沒有任務，有就取出來放到執行棧中執行
4. 由於主執行緒不斷重複的獲得任務、執行任務、再獲得任務、再執行，所以這種機制被稱為事件迴圈（eventloop）
   
   

5. location 物件（操作URL的）

5.1 什麼是 location 物件

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

5.2 URL 是什麼

1. 統一資源定位符（Uniform Resource Locator ，URL）是網際網路上標準資源的地址。
2. 網際網路上的每個檔案都有一個唯一的URL，它包含的資訊指出檔案的位置以及瀏覽器應該怎麼處理它。
3. URL的一般語法格式為：
   格式一：protocol://host[:port]/path/[?query]#fragment
   案例：http://www.itcast.cn/index.html?name=andy&age=18#link
   

5.3 location 物件的屬性

1. 重點記住：href、search
   

5.4 location 物件的方法

1. assign() 和 replace() 都是跳轉頁面
2. 不同之處在於assign()會記錄頁面的歷史記錄。而replace()不會記錄歷史記錄,所以不能後退頁面
3. reload() 是重新整理頁面， reload(true)加個引數true為強制重新整理，強制重新整理會清除頁面快取
   

6. navigator 物件（識別客戶機裝置）

1. navigator 物件包含有關瀏覽器的資訊，它有很多屬性，我們常見的是userAgent，該屬性可以返回由客戶機傳送至
   伺服器的user-agent頭部的值
2. userAgent 屬性可以幫我們判斷客戶端是手機還是電腦
   

7. history物件（瀏覽器前進後退功能）

1. window物件給我們提供了一個history物件，與瀏覽器歷史記錄進行互動。該物件包含使用者（在瀏覽器視窗中）訪問
   過的URL
   
2. history 物件一般在實際開發中比較少用，但是會在一些OA辦公系統中見到