BOM 常用屬性和方法

BOM 提供了一些很實(shí)用的特性，如定時(shí)器、彈出框、窗口尺寸等。

1. 彈出框

BOM 提供了三種彈出框：

• window.alert 警告框
• window.prompt 提示框
• window.confirm 確認(rèn)框

三種彈出框都會(huì)阻塞 JavaScript 的執(zhí)行，用戶與彈出框交互后才會(huì)繼續(xù)執(zhí)行代碼。

調(diào)用彈出框時(shí)可以省略 window。

1.1 警告框

警告框在 demo 和調(diào)試過程中比較常用。

window.alert('彈出！');

alert 方法接受一個(gè)參數(shù)，即要提示的內(nèi)容。

警告框沒有其他交互，只有單純的提示作用。

因?yàn)榫婵蜷L(zhǎng)得不是很好看，在各個(gè)瀏覽器下的樣式也不統(tǒng)一，所以正式產(chǎn)品很少會(huì)用到。

1.2 提示框

提示框也可以用于提示信息，同時(shí)還能向用戶收集信息。

var 用戶輸入的內(nèi)容 = window.prompt(提示信息, 輸入框內(nèi)的默認(rèn)值);

var result = window.prompt('操作不可逆，請(qǐng)輸入 "確認(rèn)" 以繼續(xù)操作', '不了不了');

if (result === '確認(rèn)') {
  alert('操作成功');
}

1.3 確認(rèn)框

確認(rèn)框可以展示信息，同時(shí)詢問用戶是確定還是取消。

var 用戶選擇的結(jié)果 = window.confirm(提示信息);

var result = window.confirm('確定要?jiǎng)h除這條信息嗎？');

if (result) {
  alert('刪除成功');
} else {
  console.log('已取消');
}

部分中后臺(tái)系統(tǒng)的關(guān)鍵才做會(huì)使用彈出框，因?yàn)閺棾隹蛘{(diào)用后整個(gè)窗口是無法操作的，可以提高警示作用。

2. 定時(shí)器

定時(shí)器特別常用，前面提到的事件優(yōu)化中的節(jié)流防抖，也有定時(shí)器參與。

BOM 提供了兩種定時(shí)器：

• window.setTimeout 在一定時(shí)間后做一些事情
• window.setInterval 每隔一段事件做一些事情

定時(shí)器并不是精確的，會(huì)因?yàn)樯舷挛沫h(huán)境的各種因素產(chǎn)生偏差。

定時(shí)器的最小延遲事件是 4ms ，其在 HTML5 spec有被描述。

現(xiàn)代瀏覽器為了優(yōu)化后臺(tái)性能損耗等，使在非當(dāng)前 tab 的頁(yè)面中的定時(shí)器的最小延遲在 1000ms 以上。

2.1 setTimeout

setTimeout()方法設(shè)置一個(gè)定時(shí)器，該定時(shí)器在定時(shí)器到期后執(zhí)行一個(gè)函數(shù)或指定的一段代碼。(MDN)

使用 setTimeout 創(chuàng)建的定時(shí)器會(huì)在一定時(shí)間后最一次事情，做完后就再也不會(huì)調(diào)用了。

setTimeout(要做的事情, 多少毫秒后做);

其中 要做的事情 可以是個(gè)函數(shù)，也可以是個(gè)字符串，但幾乎沒有使用字符串的場(chǎng)景，也不推薦使用字符串，原因可以參考 eval 相關(guān)內(nèi)容。

setTimeout(function() {
  console.log('1秒過去了');
}, 1000);

setTimeout('console.log("2秒過去了...?")', 2000);

定時(shí)器是可以取消的，一種是利用標(biāo)志進(jìn)行取消。

var flag = false;

setTimeout(function() {
  if (flag) return;
  console.log('哈哈哈哈哈哈哈哈！');
}, 5000);

flag = !confirm('五秒后會(huì)狂笑！');

利用標(biāo)志，在定時(shí)器執(zhí)行的時(shí)候判斷，如果標(biāo)志不成立，則不執(zhí)行即可。

另一種是利用 clearTimeout 方法。

var timer = setTimeout(function() {
  console.log('哈哈哈哈哈哈哈哈！');
}, 5000);

if (!confirm('五秒后會(huì)狂笑！')) {
  clearTimeout(timer);
}

setTimeout 方法會(huì)返回一個(gè)數(shù)值，這個(gè)值是定時(shí)器的標(biāo)志，通過傳遞給 clearTimeout 就可以取消定時(shí)任務(wù)。
他們效果其實(shí)差不多，但是非必要的情況下推薦使用 clearTimeout。

2.2 setInterval

setInterval 和 setTimeout 區(qū)別就在后者只會(huì)執(zhí)行一次，前者會(huì)一直反復(fù)執(zhí)行。

setInterval(要做的事情, 多少毫秒后做);

第一個(gè)參數(shù)和 setTimeout 一樣，可以是字符串也可以是函數(shù)。

var count = 0;
setInterval(function() {
  console.log((++count) + '秒過去了');
}, 1000);

每過一秒鐘，傳遞給定時(shí)器的函數(shù)就會(huì)執(zhí)行一次。

setInterval 也可以被取消，但不推薦使用標(biāo)志的形式，建議使用 clearInterval。

var count = 0;

var timer = setInterval(function() {
  console.log((++count) + '秒過去了');

  if (count >= 3) {
    console.log('不要浪費(fèi)時(shí)間盯著這里啦');
    clearInterval(timer);
  }
}, 1000);

用法和 clearTimeout 幾乎一致，就不再贅述了。

3. 當(dāng)前窗口的尺寸

通過 innerHeight 和 innerWidth 屬性就可以獲取到當(dāng)前窗口的視口尺寸，視口可以理解為窗口中顯示頁(yè)面的部分。

function logSize() {
  var width = window.innerWidth;
  var height = window.innerHeight;

  console.log('窗口尺寸：' + width + 'x' + height);
}

logSize();

window.addEventListener('resize', function() {
  logSize();
});

4. 其他

5. 小結(jié)

開發(fā)網(wǎng)頁(yè)應(yīng)用的時(shí)候，BOM 相關(guān)的屬性和方法用到的比較多的就是定時(shí)器和獲取窗口尺寸。

window 下還有類似 parseInt、parseFloat 這樣的數(shù)學(xué)相關(guān)的方法，但目前 ES6 標(biāo)準(zhǔn)將他們挪動(dòng)到了 Number 下，也就是說可以通過 Number.parseInt 來調(diào)用，放到了本該屬于他們的地方，但項(xiàng)目中如果要使用，推薦使用 shim 或者 polyfill，不然部分瀏覽器可能不支持。