（JS基礎）BOM

window 對象

window對象 既是經過 JavaScript 訪問瀏覽器窗口的一個接口，又是 ECMAScript 規定的 Global 對象。

全局做用域下聲明的變量均會成爲 window 對象的屬性/方法。

let str = 'foo';
alert(window.str);   // 'foo'複製代碼

window 對象下的屬性和方法，能夠經過 "window." 調用，也可省略直接調用，如 "window.screenLeft" 與 "screenLeft" 是調用一樣的屬性。

經常使用屬性

• screenLeft：瀏覽器窗口左上角相對於屏幕左邊的距離。
• screenTop：瀏覽器窗口左上角相對於屏幕上方的距離。
• innerHeight：瀏覽器視口高度。
• innerWidth：瀏覽器視口寬度。

其中， window.outerWidth 和 window.outerHeight 各瀏覽器表現不一，實用性不大。

定時器

因爲 JavaScript 是單線程緣故，兩個定時器均不會在準確的時間執行，通常會稍遲於規定時間，而 "setInterval" 則部分可能會被跳過。（定時器的詳細描述及高級用法）

setTimeout

setTimeout(<function>,<timer>)：<function>表示延遲執行的函數；<timer>表示過多久執行該函數，毫秒爲單位。

setTimeout(function(){
  alert('timeout!');
}, 1000);    // 1秒後執行複製代碼

setInterval

setInterval(<function>,<timer>)：與 "setTimeout" 傳入的參數一致，表示每隔必定時間執行該函數。

setInterval(function(){
  console.log('timeout!');
}, 1000);    // 每隔1秒後執行複製代碼

彈出對話框

有三種系統對話框，用於向用戶展現或獲取特定信息，均爲 window 對象的方法。

alert(<string>);    // 警告框，顯示參數字符串
let bool = confirm(<string>);    // 確認框，顯示參數字符，能返回一個布爾值
let str = prompt(<string>);    // 輸入提示框，顯示參數字符串，能返回用戶輸入的字符串複製代碼

console 對象

經過 console 對象 內的方法能夠向 JavaScript 控制檯寫入消息。下面介紹幾個經常使用的。

console.log()

就是最經常使用的一種向控制檯打印內容的方法。除了通常用法console.log(value);外，還有另外一種使用佔位符的用法：

console.log('I like %s but I do not like %s.', 'Skittles', 'pus');
// I like Skittles but I do not like pus.複製代碼

常見的佔位符號：%o (字母o)表示接受對象，%s表示接受字符串，%d表示接受數值。

相似的打印信息還有console.info();、console.warn();、console.error();，都是向控制檯打印信息，只是顯示的效果不同，並且各瀏覽器可能會有差異。效果以下圖：

console.dir()

用法和console.log()一致，打印的內容也很類似，打印的內容相似文件樹樣式的交互列表，常用於對象。就我我的已知的，二者差異在於打印 HTML 元素，console.log()打印元素的 HTML 文檔，console.dir()打印的是該元素對象的屬性及方法，以下圖。

console.table()

打印出表格形式，常用於打印包含多個對象的數組。如arr=[{a:1,b:2,c:3},...]。效果以下圖：

還能夠傳入第二個參數，用於控制展現的字段，如console.table(arr, ["a", "b"]);就只顯示上圖的a和b兩列。

注意，console.table()只能處理最多1000行，所以它可能不適合全部數據集。

console.count()

打印計數器，用於統計該行命令執行的次數。傳入的參數只有一個，就是計數器的名稱，如console.count('myCount');。效果以下圖：

還有，能夠經過console.countReset('myCount');重置計數器。

console.assert()

對輸入的表達式進行斷言，只有表達式爲false時，才輸出相應的信息到控制檯。

console.assert(true, 1);    // 不會打印
console.assert(false, 1);   // Assertion failed: 1
複製代碼

console.trace()

向控制檯輸出一個堆棧跟蹤。效果以下：

console.time()

打印計時器。必須配合console.timeEnd();使用。用於計算函數執行耗時。都接受一個參數，就是計時器的名稱。示例以下：

function fn() {
  console.time('myTimer');
  for (let i = 0; i < 1000; i++) { }
  console.timeEnd('myTimer');
}
fn();   // myTimer: 1ms複製代碼

console.group()

將打印內容分組顯示。必須配合console.groupEnd()使用。在控制檯上建立一個新的分組，隨後輸出到控制檯上的內容都會被添加一個縮進，表示該內容屬於當前分組，直到調用console.groupEnd()以後，當前分組結束。分組內能夠包含另外的分組。傳入惟一參數，就是分組的名稱。示例以下：

console.clear()

這個沒什麼好說的，就是清除控制檯的全部打印內容。

location 對象

location 對象 提供了與當前窗口中加載的文檔有關的信息，還提供了一些導航功能。簡言之跟URL有關。它既是 window 對象的屬性，也是 document 對象的屬性。

屬性

如下屬性均爲可讀寫，修改屬性值時，頁面會以新的URL刷新頁面（hash除外）。

• hash：哈希模式下，"#"後面的字符串，無則返回空字符串。
• host：服務器名稱及端口號(若是有)，如 "www.foo.com:80"。
• hostname：服務器名稱，如 "www.foo.com"。
• href：完整 URL。
• pathname：路徑名，如 "/path"。
  
• port：端口號。
• protocol：協議，如 "https:"。
• search：查詢字符串，如 "?user=admin"。
  

方法：

• assign(<url>)：打開該URL並生成一條瀏覽器歷史紀錄，如location.assign('https://www.baidu.com');。

• replace(<url>)：一樣是打開新URL，與 "assign" 不一樣的是，會替換當前瀏覽器記錄。
• reload()：無參數，從新加載本頁面。

history 對象

history 對象 是 widow 對象的屬性之一，用於保存用戶的上網記錄，從窗口被打開的一刻算起。

屬性

• length：獲取歷史記錄的條數。

方法

• go(<number|string>)：傳入正整數時，表示前進 n 條記錄；負數則後退；傳入字符串時，表示跳轉到最近一條包含該字符串的歷史紀錄；無效信息則什麼都不發生。
• back()：無參數，後退一條記錄。
• forward()：無參數，前進一條記錄。
  

"無刷新"路由的方法：

• pushState(<data>, <title>, <url>)：<data>用於觸發popstate事件時的數據，能夠時任意類型；<title>表示該路由的標題，通常路由器都將其忽略；<url>只能使用同源的，可使用相對路徑。該方法會在 history.state 添加一條記錄，但不會刷新頁面，只改變路由地址，使用history.go(-1)能返回上一個路由，並清除history.state的相應記錄，這方法是 vue 框架的路由實現的原理。
• replaceState(<data>, <title>, <url>)：與pushState()相似，有一樣的參數，一樣在history.state添加一條記錄，不一樣的是會將當前路由替換，致使history.go(-1)不能返回當前路由。
  

上面兩個方法還涉及一個事件：當活動歷史記錄條目更改時，將觸發popstate事件。在 window 對象上能夠添加該事件，即window.addEventListener('popstate', <cb>);，其中，事件對象event中的state屬性正是pushState或repalceState方法傳入的第一個參數。

順便一說

當history.state內有值，history.go(-1)不會刷新頁面，只改變路由地址；不然會刷新頁面並跳轉。

navigation 對象

navigation 對象 一樣屬於 window 的屬性。一般用於檢測瀏覽器的特性。

經常使用屬性

• geolocation：返回一個Geolocation對象，經過這個對象能夠訪問設備的位置信息，如navigator.geolocation.getCurrentPosition(e=>{console.log(e)});。
• connection：實驗性API，到目前只有 chrome 瀏覽器實現。只讀，返回一個包含設備的網絡鏈接信息的對象。
• cookieEnable：布爾值，瀏覽器不支持或者用戶禁用了cookie，都會返回false。
• onLine：布爾值，瀏覽器是否聯網。

經常使用方法

• vibrate(pattern)：使設備（有震動硬件）產生有頻率的震動。若設備不支持震動，該方法將無效（返回false）。若某震動方式已經在進行中（當該方法調用時），則前一個震動方式中止，新的取而代之。（關於pattern參數的說明）