JavaScript API ResizeObserver使用範例

2022-07-18 22:01:23

寫在前面

今天在看同事程式碼的時候看見這個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的資料請關注it145.com其它相關文章！