介紹

BOM(Browser Object Model)是瀏覽器對象模型

1. window對象是一個全局對象, 也是JS中的頂級對象
2. 通過var定義在全局作用域中的變量和函數都會變成window對象的屬性和方法
3. window對象下的屬性和方法調用時一般省略window

間歇函數

定時器

定時器是間歇函數的一種, 可以每個每隔一段時間, 重復執行代碼, 無需手動觸發

// 1.匿名函數
setInterval(()=>{}, 1000)// 2.函數名調用
function fn() {}
setInterval(fn, 1000) // 不帶(),否則只調用一次// 3.函數調用
function fn() {}
setInterval('fn()', 1000) // 不推薦// 4.清理定時器
clearInterval(定時器id);

注意:

1. 完整寫法由window調用, 一般省略
2. 延遲的毫秒數可以省略, 默認0
3. 定時器創建后會返回 id, 用于清除定時器

延時器

延時器是間歇函數的一種, 可以延時指定時間, 然后執行代碼

// 1.匿名函數
setTimeout(()=>{}, 1000)// 2.函數名調用
function fn() {}
setTimeout(fn, 1000) // 不帶(),否則只調用一次// 3.函數調用
function fn() {}
setTimeout('fn()', 1000) // 不推薦// 4.清理定時器
clearTimeout(延時器id);

JS執行機制

1. JS語言的特點之一就是單線程, 同一時間只能處理一個任務
2. 這是因為JS設計的使命就是處理網頁中的用戶交互以及DOM操作, 這就要求程序中所有的任務都必須是線性的, 前一個任務結束, 再執行后一個任務, 只有這樣, 才能保證用戶交互和DOM操作是有序的, 不然同一時間添加一個元素又刪除這個元素, 程序就亂套了, 單線程正好符合這種設計要求
3. 但是單線程也存在問題, 如果JS執行時間過長, 就會造成頁面渲染的不連貫, 導致頁面阻塞.
4. 為了解決這個問題, HTML提出了Web Worker標準, 允許JS可以創建多個線程, 于是就有了同步和異步的概念,
5. 同步任務就是放在主線程上, 立即執行的任務
6. 異步任務就是交由宿主環境執行, 執行完成后推入任務隊列排隊的任務, JS的異步是通過回調函數實現的
7. 為了保證同步任務和異步任務有序執行, 就有了事件循環的概念, 就是先執行主線程的同步任務, 等所有同步任務執行結束后, 再依次讀取任務隊列中的異步任務, 這種不斷讀取任務, 執行任務的機制, 稱為事件循環
8. JS雖然通過事件循環實現了異步編程, 但是本質還是單線程語言
9. 異步任務也可以分兩種, 一種是宿主環境執行的宏任務, 執行完畢后推入宏任務隊列, 一種是JS引擎執行的微任務, 執行完畢后推入微任務隊列, 主線程一旦閑置, 優先清空微任務執行, 再執行宏任務隊列

location對象

location對象拆分并保存了URL地址的各個組成部分

1. location.href 獲取或設置整個URL
2. location.host 返回域名
3. location.port 返回端口號
4. location.pathname 返回路徑
5. location.search 返回 ? 后面的查詢參數
6. location.hash 返回 # 后面的內容, 常用于錨點鏈接
7. location.assign(); 可以跳轉頁面,有后退功能
8. location.replace(); 替換當前頁面,不能后退
9. location.reload(); 刷新當前頁面, 如果傳入true表示強制刷新(Ctrl + F5)

navigator對象

navigator對象記錄了瀏覽器相關的信息, 較常用的是userAgent屬性, 可以返回瀏覽器版本和平臺信息

<script>
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 = "";  //電腦
} 
</script>

histroy對象

history對象可以與瀏覽器記錄進行交互.

1. history.back(); 后退頁面
2. history.forward(); 前進功能
3. history.go(參數); 參數1前進頁面, 參數-1后退頁面

本地存儲

把數據存儲在用戶硬盤中, 由瀏覽器進行管理, 實現數據持久化存儲

sessionStorage

// 儲存數據
sessionStorage.setItem('key',value);
// 獲取數據
sessionStorage.getItem('key');
// 刪除數據
sessionStorage.removeItem('key');
// 刪除所有數據
sessionStorage.clear();

1. 生命周期為關閉瀏覽器窗口;
2. 在同一個窗口下數據可以共享
3. 容量限制大約5M

localStorage

// 儲存數據
localStorage.setItem('key',value);
// 獲取數據
localStorage.getItem('key');
// 刪除數據
localStorage.removeItem('key');
// 刪除所有數據
localStorage.clear();

1. 生命周期為永久,除非手動刪除;
2. 在不同窗口下數據也可以共享(同一瀏覽器都可以);
3. 容量限制大約20M

查看本地存儲數據

存儲復雜數據

本地存儲里面只能存儲字符串的數據格式, 如需需要儲存復雜數據, 就需要使用JSON對象

JSON對象就是 屬性 和 值 都由雙引號包裹的數據結構

// 序列化
// 把復雜數據轉換成JSON字符串
JSON.stringify(數據)// 反序列化
// 把JSON字符串還原成對象格式 
JSON.parse(數據)

窗口操作

//1.打開空窗口
window.open();   //2.打開窗口
// url文件路徑
// name新窗口的名稱
// features窗口屬性,大小等信息
// 會返回剛剛創建的窗口,用于關閉
window.open(url,[name],[features]);//3.關閉窗口
window.close();    //3.關閉剛剛創建的窗口
newWin.close();   //4.把當前窗口關閉
window.close();