React魔法堂：size-sensor源碼略讀

2022 年 10 月 21 日
筆記
javascript

前言

echarts-for-react在對echarts進行輕量級封裝的基礎上，額外提供圖表尺寸自適應容器尺寸的這小而實用的功能，而這功能的背後就是本文想介紹的size-sensor了。

源碼介紹

size-sensor源碼十分精簡，主要是對原生APIResizeObserver方案和object元素方案進行檢測和API統一化而已。

程式碼首先會檢測當前運行時是否支援原生APIResizeObserver，若不支援則使用object元素方案。下面我們將對兩種方案進行探討。

基於瀏覽器原生API – `ResizeObserver`實現

用於監聽Element內容盒子或邊框盒子或者SVGElement邊界尺寸的大小，並調用回調函數。
MDN: //developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver

/**
 * @param {ResizeObserverEntry} entries - 用於獲取每個元素改變後的新尺寸
 * @param {ResizeObserver} observer
 * @see //developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserverEntry
 */ 
function handleResize(entries, observer) {
  for (let entry of entries) {
    //......
  }
}
const target = document.getElementById('main')

const observer = new ResizeObserver(handleResize)

// 開始對指定DOM元素的監聽
observer.observe(target)

// 結束對指定DOM元素的監聽
observer.unobserve(target)

// 結束對所有DOM元素的監聽
observer.disconnect()

注意：在handleResize中修改target的尺寸並不會導致遞歸調用handleResize函數。

基於`object`元素的兼容方案實現

object元素用於內嵌影像、音頻、影片、Java applets、ActiveX、PDF和Flash等外部資源，因此其也會像iframe元素那樣生成獨立的browser context。
而browser context中Window實例的尺寸會保持和object元素的一致，因此可以通過訂閱browser context中Window實例的resize事件實現對容器的尺寸的監聽。

function bind(target, handle) {
  if (getComputedStyle(target).position === 'static') {
    target.style.position = 'relative'
  }

  let object = document.createElement('object')
  object.onload = () => {
    object.contentDocument.defaultView.addEventListener('resize', handle)
    // 初始化時先觸發一次
    handle()
  }
  object.style.display = 'block'
  object.style.position = 'absolute'
  object.style.top = 0
  object.style.let = 0
  object.style.width = '100%'
  object.style.height = '100%'
  object.style.pointerEvents = 'none'
  object.style.zIndex = -1
  object.style.opacity = 0
  object.type = 'text/html'

  target.appendChild(object)
  object.data = 'about:data'

  return () => {
    if (object.contentDocument) {
      object.contentDocument.defaultView.removeEventListener('resize', handle)
    }
    if (object.parentNode) {
      object.parentNode.removeChild(object)
    }
  }
}

這裡將object元素替換為iframe元素也是可以的，只需將object.data換成iframe.src即可。
注意：在handle中修改target的尺寸並會導致遞歸調用handle函數。

`ResizeObserver`的polyfill兼容方案 – `MutationObserver`

Repos: //github.com/que-etc/resize-observer-polyfill
Repos: //github.com/juggle/resize-observer

尊重原創，轉載請註明來自：//www.cnblogs.com/fsjohnhuang/p/16814327.html 肥仔John

Tags: javascript