大家好许赃，我是IT修真院鄭州分院第三期的學(xué)員高雪峰跟压，一枚正直、純潔塞茅、善良的前端程序員
今天給大家分享一下亩码，修真院官網(wǎng)JS（職業(yè)）任務(wù)4，深度思考中的知識點——BOM
1.背景介紹
Browser Object Model凡桥，瀏覽器對象模型蟀伸，簡稱BOM，是JavaScript在使用過程中極其重要的組成部分缅刽，也是在瀏覽器實現(xiàn)JavaScript的核心。多年來蠢络，BOM缺少一個比較統(tǒng)一的標(biāo)準(zhǔn)衰猛，基本上都是各大瀏覽器提供商各自為政，對其進(jìn)行擴展補充刹孔。W3C為了把瀏覽器中的JavaScript最基本部分標(biāo)準(zhǔn)化啡省，已經(jīng)將BOM的主要方面納入到了HTML5標(biāo)準(zhǔn)中。接下啦髓霞，我們接著上一次多的內(nèi)容卦睹，來認(rèn)識一下它。
2.知識剖析
2.1什么是間歇調(diào)用和超時調(diào)用方库？
Javascript是單線程語言结序，但允許通過設(shè)置超時值和間歇時間值調(diào)度代碼在特定的時刻執(zhí)行。
超時調(diào)用纵潦，在指定時間過后執(zhí)行代碼徐鹤。需要通過window對象的setTimeout()方法，它接受兩個參數(shù)：要執(zhí)行的代碼邀层，和以毫秒表示的時間返敬。第一個參數(shù)可以是一個包含js代碼的字符串，也可以是一個函數(shù)寥院。第二個參數(shù)是等待多長時間的毫秒數(shù)劲赠。這里需要注意的是，由于js是單線程語言，因此凛澎，當(dāng)時間到了之后霹肝，代碼也許并不會如想象的一般，立即執(zhí)行预厌，它只是表示時間到了以后將要執(zhí)行的代碼放到了js的處理任務(wù)的隊列中阿迈，還要老老實實地排隊等候進(jìn)一步的處理。
//不建議傳遞字符串轧叽！
setTimeout("alert('Hello Da Wa!')", 1000);
//推薦以下寫法
setTimeout(function(){
alert('Hello World!')
}, 2000);
//使用清除方法在代碼未調(diào)用前清除該項苗沧，在超時調(diào)用之前處理才會生效，超時調(diào)用之后執(zhí)行的話什么也不會改變炭晒。
clearTimeout();
間隔調(diào)用待逞，在每隔指定時間就執(zhí)行執(zhí)行代碼，直到間歇調(diào)用被取消或者頁面被卸載网严。它需要通過window對象的setInterval()方法识樱，它接受兩個參數(shù)：要執(zhí)行的代碼，和以毫秒表示的時間震束。第一個參數(shù)可以是一個包含js代碼的字符串怜庸，也可以是一個函數(shù)。第二個參數(shù)是間隔多長時間的毫秒數(shù)垢村。取消間歇調(diào)用的重要性遠(yuǎn)遠(yuǎn)大于取消超時調(diào)用割疾，防止間歇調(diào)用的循環(huán)執(zhí)行。在項目開發(fā)中嘉栓，最好不要使用間歇調(diào)用宏榕。
//不建議傳遞字符串！
setInterval("alert('Hello Da Wa!')", 1000);
//推薦以下寫法
setInterval(function(){
alert('Hello World!')
}, 2000);
//使用清除方法在代碼未調(diào)用前清除該項侵佃，為防止間隔調(diào)用無限循環(huán)下去麻昼，必須使用這個方法
clearInterval();
2.2 location對象
location對象是BOM對象中有一個極為重要的對象，它也是一個特別的對象馋辈。它既是window對象的屬性抚芦，又是document對象的屬性，也就是說首有，window.location和document.location引用的是同一個對象燕垃。
相關(guān)鏈接：w3school（http://www.w3school.com.cn/jsref/dom_obj_location.asp）
location對象可以通過多種方式改變?yōu)g覽器的位置。最常用的方式是assign()井联，（assign翻譯為分配卜壕，選派，歸屬）烙常。它可以打開一個新的url并在瀏覽器的歷史記錄中生成一條記錄轴捎。使用window.location或者location.href設(shè)置一個url值鹤盒，也會以該值調(diào)用assign()方法。
location.assign('http://www.baidu.com');
//以下方法等價于上邊的寫法
window.location = 'http://www.baidu.com';
location.;
location對象的其他屬性也可以修改url地址侦副，同樣會在瀏覽器的歷史記錄中生成一條新的記錄侦锯。用戶通過單擊“后退”就可以返回前一個頁面的地址。如果我們不希望用戶再返回去秦驯，我們就使用到了replace()這個方法尺碰，它接受一個參數(shù)——要跳轉(zhuǎn)的url，瀏覽器位置發(fā)生變化译隘，同時亲桥，不會和剛剛提到的那幾個方法一樣，會在歷史記錄中生成新紀(jì)錄固耘，因此也就不會返回原有的位置了题篷。
于位置有關(guān)的，還有一個方法——reload()厅目，作用是重新加載當(dāng)前的頁面番枚。如果不加任何參數(shù)，它就會以最有效的方式進(jìn)行重新加載损敷，也就是用瀏覽器緩存進(jìn)行加載葫笼。我們?nèi)绻霃娭凭W(wǎng)頁從服務(wù)器端重新加載數(shù)據(jù)過來，可以提供一個true值拗馒。例如：location.reload(true)渔欢。
2.3 navigator對象
navigator對象，用于識別客戶端瀏覽器信息瘟忱，最早由Netscape Navigation 2.0引入。瀏覽器各自可能也有自有的識別客戶端信息的對象或者方法苫幢，但是navigator對象是所有支持js的瀏覽器所共有的访诱。
除了識別顯示客戶端的信息之外，navigator對象也提供了一個檢測插件的方法韩肝，使用plugins數(shù)組触菜。該數(shù)組包括以下內(nèi)容：name（插件的名字）、description（插件的描述）哀峻、filename（插件的文件名）涡相、length（插件所處理的MIME類型數(shù)量）。
2.4 screen對象
screen對象剩蟀，在編程過程中使用的頻次并不高催蝗，是一個比較低調(diào)的存在。它用來表述客戶端的能力育特，包括瀏覽器窗口外部的顯示器信息丙号，像素高度和寬度，DPI值，顏色的位數(shù)（多為32位）犬缨、屏幕的位深等信息喳魏。
2.5 history對象
history對象，用于保存用戶自打開瀏覽器時以后的歷史記錄怀薛，是window對象的屬性刺彩。可以使用go()的方法在歷史記錄中任意跳轉(zhuǎn)枝恋，可以向后也可以向前创倔。這個方法可以接受一個向后或者向前的頁面數(shù)（整數(shù)值）。負(fù)值表示向后跳轉(zhuǎn)鼓择，正值表示向前跳轉(zhuǎn)三幻。也可以傳遞一個字符串參數(shù)，該字符串必須是瀏覽器歷史記錄中存在的呐能，否則無效念搬。
history.go(-1);
history.go(1);
history.go(2);
3.常見問題
問題: 如何使用超時調(diào)用的方法，避免間隔調(diào)用的問題摆出？
4.解決方案
這里引入《JavaScript高級程序設(shè)計》中的一段代碼進(jìn)行解決方案的介紹朗徊。這樣做的優(yōu)點是，超時調(diào)用可以執(zhí)行一次自行停止偎漫，不存在無限循環(huán)執(zhí)行的情況爷恳，不用刻意使用清除的方法對該方法進(jìn)行處理，比之于間隔調(diào)用象踊，不會因為不受限制而出現(xiàn)問題温亲。
var num = 0;
var max = 10;
var a = null;
function old(){
? ? ? num++;
//如果執(zhí)行次數(shù)達(dá)到了max設(shè)定的值，則取消后續(xù)尚未執(zhí)行的調(diào)用
? ? ? if(num == max){
? ? ? ? ? ? ?clearInterval(a);
? ? ? ? ? ? ?alert("Done");
? ? ? ? }
}
a = setInterval(old, 1000);
//使用超時調(diào)用規(guī)避間隔調(diào)用的循環(huán)執(zhí)行問題
function b(){
? ? ? ? num++;
//如果執(zhí)行次數(shù)未達(dá)到max設(shè)定的值杯矩，則設(shè)置另一次超時調(diào)用
? ? ? ? if(num < max){
? ? ? ? ? ? ? ? ? ?setTimeout(b, 1000);
? ? ? ? ?} else {
? ? ? ? ? ? ? ? ? ?alert("Done");
? ? ? ? ? }
}
setTimeout(b, 1000);
5.編碼實戰(zhàn)
參看上邊各知識點簡單的demo演示栈虚，暫無更多demo！
6.擴展思考
問題: 如何在列表網(wǎng)頁史隆，點擊頁碼等條件重新加載數(shù)據(jù)后魂务，從頂部顯示？
這里使用到了location.hash的方法進(jìn)行處理泌射。
//頁面跳轉(zhuǎn)置頂顯示粘姜，使用以下兩行代碼
$location.hash('');
$anchorScroll();
7.參考文獻(xiàn)
參考一：《JavaScript高級程序設(shè)計》
參考二: w3school：http://www.w3school.com.cn/index.html
8.更多討論
討論點：大家對于window對象還有哪些認(rèn)識，分享一下熔酷？
PPT：https://ptteng.github.io/PPT/PPT/js-04-bom%20(2).html#/
視頻：https://v.qq.com/x/page/r0515qq8isk.html
文本鏈接：http://www.jnshu.com/daily/26200?dailyType=others&total=148&page=1&uid=7446&sort=0&orderBy=3
------------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個工程師孤紧，現(xiàn)在開始，找個師兄纯陨，帶你入門坛芽，掌控自己學(xué)習(xí)的節(jié)奏留储，學(xué)習(xí)的路上不再迷茫”咙轩。
這里是技能樹.IT修真院获讳，成千上萬的師兄在這里找到了自己的學(xué)習(xí)路線，學(xué)習(xí)透明化活喊，成長可見化丐膝，師兄1對1免費指導(dǎo)〖鼐眨快來與我一起學(xué)習(xí)吧~
你可以直接點擊此鏈接：http://jnshu.com/login/1/84959420
