欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript?API?ResizeObserver使用示例

 更新時間：2022年07月18日 17:45:02   作者：MAYOHA  
這篇文章主要為大家介紹了JavaScript?API?ResizeObserver的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

寫在前面

今天在看同事代碼的時候看見這個API，出于好奇就去了解了一下。

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

API介紹

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

換句話說，window.resize事件通常是浪費的，因為它會監(jiān)聽每個元素的大小變化（只有window對象才有resize事件），而不是具體到某個元素的變化。

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

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

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

瀏覽器兼容性

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

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

用法

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

// 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ù)添加一個參數(shù)，用來獲取到該元素的一些信息

然后，實例對象myObserver方法除了有observe方法之外，還有disconnect方法和unobserve方法。

unobserve()

取消監(jiān)聽某個DOM節(jié)點。比如說想在四秒后取消監(jiān)聽

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

disconnect()

取消對所有節(jié)點的監(jiān)聽。比如說想在四秒后取消監(jiān)聽所有節(jié)點

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

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

參考

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的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論