文章目錄
- BOM
-
- wdinow對象
-
- window對象常見事件
- 定時器
- JS執行機制
-
- 線程
- 同步和異步
- 其他對象
-
- location對象
- navigator對象
- history對象
BOM
BOM（Browser Object Model） 浏覽器對象模型，它提供了獨立于内容而與浏覽器視窗進行互動的對象，其核心對象是 window
BOM 由一系列相關的對象構成，并且每個對象都提供了很多方法與屬性
wdinow對象
- 是 JS 通路浏覽器視窗的一個接口
- 是一個全局對象。定義在全局作用域中的變量、函數都會變成 window 對象的屬性和方法
window對象常見事件
視窗加載事件：
① window.onload：是視窗（頁面）加載事件，當文檔内容（包括圖像、腳本檔案、css檔案等）完全加載完成會觸發該事件
- window.οnlοad=function( ){ }
- window.addEventListener(‘load’,function( ){ })
注意：
- 有了 window.onload 就可以把 JS 代碼寫到頁面元素的上方，因為 onload 是等頁面内容全部加載完畢，再去執行處理函數
- window.onload 傳統注冊事件方式 隻能寫一次，如果有多個，會以最後一個 window.onload 為準
- 如果使用 addEventListener 則沒有限制
② document.DOMContentLoaded: 在DOM加載完成時觸發，不包括CSS樣式表、圖檔和flash動畫等額外内容加載
注意：
- Ie9以上才支援
- 如果頁面的圖檔很多的話,從使用者通路到onload觸發可能需要較長的時間,互動效果就不能實作，必然影響使用者的體驗，此時用 DOMContentLoaded事件比較合适
調整視窗大小事件：
window.onresize： 當浏覽器視窗大小發生改變時會觸發該事件
- widow.οnresize=function( ){ }
- window.addEventListener(‘resize’,function( ){ })
定時器
window 對象提供了兩個定時器：
- 回調函數可以直接寫函數，或者寫函數名或者采取字元串 ‘函數名()’ 三種形式
- 定時器可能有很多，經常給定時器指派一個辨別符ID
定時器中this指向window
案例：60s内隻能發送一次短信
<body>
手機号碼：<input type="number"> <button>發送</button>
<script>
var btn = document.querySelector('button')
var time = 60
btn.addEventListener('click', function () {
//設定狀态不可用
btn.disabled = true
//建立定時器
var timer = setInterval(function () {
if (time == 0) {
clearInterval(timer)
btn.disabled = false
btn.innerHTML = '發送'
} else {
btn.innerHTML = '還剩下' + time + '秒'
time--
}
}, 1000)
})
</script>
</body>
JS執行機制
線程
- 程序：應用程式的一次動态運作 ，有獨立的記憶體空間
- 線程：程序的執行機關，一個程序可以分為若幹個線程
JavaScript 語言的一大特點就是單線程，也就是說，同一個時間隻能做一件事
單線程就意味着，所有任務需要排隊，前一個任務結束，才會執行後一個任務。這導緻的問題是： 如果 JS 執行的時間過長，這樣就會造成頁面的渲染不連貫，導緻頁面渲染加載阻塞的感覺
同步和異步
為了解決上述問題，利用多核 CPU 的計算能力，HTML5 提出 Web Worker 标準，允許 JavaScript 腳本建立多個線程。于是，JS 中出現了同步和異步
- 同步：前一個任務結束後再執行後一個任務，程式的執行順序與任務的排列順序一緻、同步
- 異步：做一件事的同時，可處理其它事情
- 同步任務： 同步任務都在主線程上執行，形成一個執行棧
- 異步任務： JS 的異步是通過回調函數實作的，異步任務相關回調函數添加到任務隊列中（任務隊列也稱為消息隊列)
一般而言，異步任務有以下三種類型:
- ①普通事件，如 click、resize 等
- ②資源加載，如 load、error 等
- ③定時器，包括setInterval、setTimeout 等
JS執行機制：
<body>
<script>
console.log(1)
setTimeout(function(){
console.log(3)
},1000)
for(var i=0,str='';i<900000;i++){
str+=i;
}//利用字元串拼接拖慢執行時間
console.log(2)
</script>
</body>
其他對象
location對象
window 對象給我們提供了一個 location 屬性用于擷取或設定窗體的 URL，并且可以用于解析 URL 。 因為這個屬性傳回的是一個對象，是以将這個屬性也稱為 location 對象
URL (Uniform Resource Locator, URL) ：統一資源定位符
- 格式： protocol : // host [:port] / path / [?query] # fragment
- 例如： http: // www.sinna.cn/index.html ？name=sam&age=20 # link
URL組成：
常用屬性：
常用方法：
navigator對象
navigator 對象包含有關浏覽器的資訊 導航對象
常用屬性：
常用方法：
<body>
<script>
//navigator對象
console.log("核心："+navigator.appCodeName)
console.log("名稱："+navigator.appName)
console.log("版本："+navigator.appVersion)
console.log("cookie："+navigator.cookieEnabled)
console.log("平台："+navigator.platform)
</script>
</body>
history對象
window 對象提供了一個 history 對象，與浏覽器曆史記錄進行互動。該對象包含使用者（在浏覽器視窗中）通路過的 URL
常用屬性：
常用方法：