寫(xiě)在前面

今天在看同事代碼的時(shí)候看見(jiàn)這個(gè)API，出于好奇就去了解了一下。

這是一個(gè)實(shí)驗(yàn)中的功能 此功能某些瀏覽器尚在開(kāi)發(fā)中，請(qǐng)參考瀏覽器兼容性表格以得到在不同瀏覽器中適合使用的前綴。由于該功能對(duì)應(yīng)的標(biāo)準(zhǔn)文檔可能被重新修訂，所以在未來(lái)版本的瀏覽器中該功能的語(yǔ)法和行為可能隨之改變。——來(lái)自MDN的提醒

API介紹

眾所周知window.resize事件能幫我們監(jiān)聽(tīng)窗口大小的變化。但是reize事件會(huì)在一秒內(nèi)觸發(fā)將近60次，所以很容易在改變窗口大小時(shí)導(dǎo)致性能問(wèn)題。

換句話說(shuō)，window.resize事件通常是浪費(fèi)的，因?yàn)樗鼤?huì)監(jiān)聽(tīng)每個(gè)元素的大小變化（只有window對(duì)象才有resize事件），而不是具體到某個(gè)元素的變化。

如果我們只想監(jiān)聽(tīng)某個(gè)元素的變化的話，這種操作就很浪費(fèi)性能了。  

而ResizeObserver API就可以幫助我們：監(jiān)聽(tīng)一個(gè)DOM節(jié)點(diǎn)的變化，這種變化包括但不僅限于：

• 某個(gè)節(jié)點(diǎn)的出現(xiàn)和隱藏
• 某個(gè)節(jié)點(diǎn)的大小變化

瀏覽器兼容性

這是JavaScript一個(gè)極其新的API，所以在兼容方面還不是很好。

順便給大家安利一個(gè)工具——Can I use，用于查詢API在各個(gè)瀏覽器的兼容性

用法

ResizeObserver是個(gè)構(gòu)造函數(shù)。在使用new關(guān)鍵字調(diào)用構(gòu)造函數(shù)，返回實(shí)例對(duì)象時(shí)，需要傳入一個(gè)回調(diào)函數(shù)，這個(gè)回調(diào)用于監(jiān)聽(tīng)實(shí)例對(duì)象某個(gè)DOM節(jié)點(diǎn)的變化

// HTML
<div class="wrapper" ref="wrapper"></div>
// css
.wrapper {
  height: 500px;
  background-color: blueviolet;
}
// js
 mounted() {
    const resizeObserver = new ResizeObserver(entries => {
      console.log("我的resize變化啦");
      // console.log(entries);
    });
}

效果展示：

另外我們可以給回調(diào)函數(shù)添加一個(gè)參數(shù)，用來(lái)獲取到該元素的一些信息

然后，實(shí)例對(duì)象myObserver方法除了有observe方法之外，還有disconnect方法和unobserve方法。

unobserve()

取消監(jiān)聽(tīng)某個(gè)DOM節(jié)點(diǎn)。比如說(shuō)想在四秒后取消監(jiān)聽(tīng)

setTimeout(() => {
  resizeObserver.unobserve(this.$refs.wrapper);
}, 4000);

disconnect()

取消對(duì)所有節(jié)點(diǎn)的監(jiān)聽(tīng)。比如說(shuō)想在四秒后取消監(jiān)聽(tīng)所有節(jié)點(diǎn)

setTimeout(() => {
  resizeObserver.disconnect(this.$refs.wrapper);
}, 4000);

取消監(jiān)聽(tīng)效果展示：

參考

http://www.dbjr.com.cn/article/255898.htm

https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver

以上就是JavaScript API ResizeObserver使用示例的詳細(xì)內(nèi)容，更多關(guān)于JavaScript API ResizeObserver的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論