observeResize

observeResize 函式用來監聽元素尺寸的變化，當尺寸發生變化時，會執行指定的回呼函式。

該函式使用 ResizeObserver 實作，但採用了單例模式，因此效能更佳。

使用方式

按需引入函式：

import { observeResize } from 'mdui/functions/observeResize.js';

使用範例：

// 監聽 document.body 的尺寸變化
const observer = observeResize(document.body, function (entry, observer) {
  // 此時 document.body 的尺寸發生了變化，可透過 entry 取得新的尺寸
  console.log(entry);

  // 可呼叫該方法取消監聽
  observer.unobserve();
});

// 也可以呼叫函式回傳值的 unobserve 方法取消監聽
observer.unobserve();

API

observeResize(target: string | HTMLElement | JQ<HTMLElement>, callback: Callback): ObserveResize

target 參數可以是 CSS 選擇器、DOM 元素、或 JQ 物件。

Callback

(entry: ResizeObserverEntry, observer: ObserveResize) => void

在回呼函式中，this 指向 ObserveResize。

ObserveResize

{
  unobserve: () => void;
}