JavaScript API ResizeObserver使用示例

Posted on by

寫在前面

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

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

API介紹

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

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

如果我們隻想監聽某個元素的變化的話，這種操作就很浪費性能瞭。  

而ResizeObserver API就可以幫助我們：監聽一個DOM節點的變化，這種變化包括但不僅限於：

  • 某個節點的出現和隱藏
  • 某個節點的大小變化

瀏覽器兼容性

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

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

用法

ResizeObserver是個構造函數。在使用new關鍵字調用構造函數，返回實例對象時，需要傳入一個回調函數，這個回調用於監聽實例對象某個DOM節點的變化

// 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);
    });
}

效果展示：

另外我們可以給回調函數添加一個參數，用來獲取到該元素的一些信息

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

unobserve()

取消監聽某個DOM節點。比如說想在四秒後取消監聽

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

disconnect()

取消對所有節點的監聽。比如說想在四秒後取消監聽所有節點

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

取消監聽效果展示：

參考

https://www.jb51.net/article/255898.htm

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

以上就是JavaScript API ResizeObserver使用示例的詳細內容，更多關於JavaScript API ResizeObserver的資料請關註WalkonNet其它相關文章！

推薦閱讀：