大家好，我是IT修真院鄭州分院第三期的學員高雪峰，一枚正直、純潔、善良的前端程序員
今天給大家分享一下，修真院官網JS（職業）任務4，深度思考中的知識點——BOM
1.背景介紹
Browser Object Model，瀏覽器對象模型，簡稱BOM，是JavaScript在使用過程中極其重要的組成部分，也是在瀏覽器實現JavaScript的核心。多年來，BOM缺少一個比較統一的標準，基本上都是各大瀏覽器提供商各自為政，對其進行擴展補充。W3C為了把瀏覽器中的JavaScript最基本部分標準化，已經將BOM的主要方面納入到了HTML5標準中。接下啦，我們接著上一次多的內容，來認識一下它。
2.知識剖析
2.1什么是間歇調用和超時調用？
Javascript是單線程語言，但允許通過設置超時值和間歇時間值調度代碼在特定的時刻執行。
超時調用，在指定時間過后執行代碼。需要通過window對象的setTimeout()方法，它接受兩個參數：要執行的代碼，和以毫秒表示的時間。第一個參數可以是一個包含js代碼的字符串，也可以是一個函數。第二個參數是等待多長時間的毫秒數。這里需要注意的是，由于js是單線程語言，因此，當時間到了之后，代碼也許并不會如想象的一般，立即執行，它只是表示時間到了以后將要執行的代碼放到了js的處理任務的隊列中，還要老老實實地排隊等候進一步的處理。
//不建議傳遞字符串！
setTimeout("alert('Hello Da Wa!')", 1000);
//推薦以下寫法
setTimeout(function(){
alert('Hello World!')
}, 2000);
//使用清除方法在代碼未調用前清除該項，在超時調用之前處理才會生效，超時調用之后執行的話什么也不會改變。
clearTimeout();
間隔調用，在每隔指定時間就執行執行代碼，直到間歇調用被取消或者頁面被卸載。它需要通過window對象的setInterval()方法，它接受兩個參數：要執行的代碼，和以毫秒表示的時間。第一個參數可以是一個包含js代碼的字符串，也可以是一個函數。第二個參數是間隔多長時間的毫秒數。取消間歇調用的重要性遠遠大于取消超時調用，防止間歇調用的循環執行。在項目開發中，最好不要使用間歇調用。
//不建議傳遞字符串！
setInterval("alert('Hello Da Wa!')", 1000);
//推薦以下寫法
setInterval(function(){
alert('Hello World!')
}, 2000);
//使用清除方法在代碼未調用前清除該項，為防止間隔調用無限循環下去，必須使用這個方法
clearInterval();
2.2 location對象
location對象是BOM對象中有一個極為重要的對象，它也是一個特別的對象。它既是window對象的屬性，又是document對象的屬性，也就是說，window.location和document.location引用的是同一個對象。
相關鏈接：w3school（http://www.w3school.com.cn/jsref/dom_obj_location.asp）
location對象可以通過多種方式改變瀏覽器的位置。最常用的方式是assign()，（assign翻譯為分配，選派，歸屬）。它可以打開一個新的url并在瀏覽器的歷史記錄中生成一條記錄。使用window.location或者location.href設置一個url值，也會以該值調用assign()方法。
location.assign('http://www.baidu.com');
//以下方法等價于上邊的寫法
window.location = 'http://www.baidu.com';
location.;
location對象的其他屬性也可以修改url地址，同樣會在瀏覽器的歷史記錄中生成一條新的記錄。用戶通過單擊“后退”就可以返回前一個頁面的地址。如果我們不希望用戶再返回去，我們就使用到了replace()這個方法，它接受一個參數——要跳轉的url，瀏覽器位置發生變化，同時，不會和剛剛提到的那幾個方法一樣，會在歷史記錄中生成新紀錄，因此也就不會返回原有的位置了。
于位置有關的，還有一個方法——reload()，作用是重新加載當前的頁面。如果不加任何參數，它就會以最有效的方式進行重新加載，也就是用瀏覽器緩存進行加載。我們如果想強制網頁從服務器端重新加載數據過來，可以提供一個true值。例如：location.reload(true)。
2.3 navigator對象
navigator對象，用于識別客戶端瀏覽器信息，最早由Netscape Navigation 2.0引入。瀏覽器各自可能也有自有的識別客戶端信息的對象或者方法，但是navigator對象是所有支持js的瀏覽器所共有的。
除了識別顯示客戶端的信息之外，navigator對象也提供了一個檢測插件的方法，使用plugins數組。該數組包括以下內容：name（插件的名字）、description（插件的描述）、filename（插件的文件名）、length（插件所處理的MIME類型數量）。
2.4 screen對象
screen對象，在編程過程中使用的頻次并不高，是一個比較低調的存在。它用來表述客戶端的能力，包括瀏覽器窗口外部的顯示器信息，像素高度和寬度，DPI值，顏色的位數（多為32位）、屏幕的位深等信息。
2.5 history對象
history對象，用于保存用戶自打開瀏覽器時以后的歷史記錄，是window對象的屬性。可以使用go()的方法在歷史記錄中任意跳轉，可以向后也可以向前。這個方法可以接受一個向后或者向前的頁面數（整數值）。負值表示向后跳轉，正值表示向前跳轉。也可以傳遞一個字符串參數，該字符串必須是瀏覽器歷史記錄中存在的，否則無效。
history.go(-1);
history.go(1);
history.go(2);
3.常見問題
問題: 如何使用超時調用的方法，避免間隔調用的問題？
4.解決方案
這里引入《JavaScript高級程序設計》中的一段代碼進行解決方案的介紹。這樣做的優點是，超時調用可以執行一次自行停止，不存在無限循環執行的情況，不用刻意使用清除的方法對該方法進行處理，比之于間隔調用，不會因為不受限制而出現問題。
var num = 0;
var max = 10;
var a = null;
function old(){
? ? ? num++;
//如果執行次數達到了max設定的值，則取消后續尚未執行的調用
? ? ? if(num == max){
? ? ? ? ? ? ?clearInterval(a);
? ? ? ? ? ? ?alert("Done");
? ? ? ? }
}
a = setInterval(old, 1000);
//使用超時調用規避間隔調用的循環執行問題
function b(){
? ? ? ? num++;
//如果執行次數未達到max設定的值，則設置另一次超時調用
? ? ? ? if(num < max){
? ? ? ? ? ? ? ? ? ?setTimeout(b, 1000);
? ? ? ? ?} else {
? ? ? ? ? ? ? ? ? ?alert("Done");
? ? ? ? ? }
}
setTimeout(b, 1000);
5.編碼實戰
參看上邊各知識點簡單的demo演示，暫無更多demo！
6.擴展思考
問題: 如何在列表網頁，點擊頁碼等條件重新加載數據后，從頂部顯示？
這里使用到了location.hash的方法進行處理。
//頁面跳轉置頂顯示，使用以下兩行代碼
$location.hash('');
$anchorScroll();
7.參考文獻
參考一：《JavaScript高級程序設計》
參考二: w3school：http://www.w3school.com.cn/index.html
8.更多討論
討論點：大家對于window對象還有哪些認識，分享一下？
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修真院
“我們相信人人都可以成為一個工程師，現在開始，找個師兄，帶你入門，掌控自己學習的節奏，學習的路上不再迷茫”。
這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學習路線，學習透明化，成長可見化，師兄1對1免費指導。快來與我一起學習吧~
你可以直接點擊此鏈接：http://jnshu.com/login/1/84959420
