Motivation

響應(yīng)式網(wǎng)站/Web應(yīng)用程序 根據(jù)視口大小調(diào)整內(nèi)容展示方式。這通常通過CSS和media查詢來完成。當CSS表現(xiàn)不好我們會使用Javascript。

比如document.addEventListener("resize",fun)或者Element的onresize屬性。通過監(jiān)聽window.resize事件，Javascript DOM操作與視口大小保持同步。

但你會意識到，這甚至不包括在窗口未被調(diào)整大小但元素改變其大小的情況。例如，添加新的子元素，設(shè)置元素的display樣式none或類似的操作會改變元素，其兄弟或祖先的大小。

隨著響應(yīng)式Web應(yīng)用程序的普及，對響應(yīng)式組件的需求也會增加。這些組件也需要有對resize事件做出響應(yīng)。不幸的是，Web平臺目前不提供組件跟蹤其大小的方法。

Current workarounds

一些應(yīng)用程序?qū)嵤┳灾频恼{(diào)整大小通知框架（例如：Polymer）。這種方法容易出錯，難以維護，并且需要每個組件都實施自制方法。

其他人巧妙的通過可以代替調(diào)整事件的事件來調(diào)整內(nèi)容（例如：<a href="https://github.com/wnr/element-resize-detector">element-resize-detector</a>）。目前最優(yōu)秀的方法都使用類似的技巧：

在組件中插入一個絕對定位的子項，并且以發(fā)出滾動事件的方式制作子項，或者在父項大小更改時制作window.resize。

絕對定位的子項方法在ShadowDOM或React等框架中不起作用。

這些方法都不可取。它們在正確性，代碼復(fù)雜性和性能方面都失敗了。

在當今的Web平臺上無法復(fù)制ResizeObserver功能。

這就是為什么ResizeObserver是一個有用的原始API。它對任何觀察到的元素的大小的變化作出反應(yīng)，與導(dǎo)致變化的原因無關(guān)。它還為您提供訪問觀察元素的新大小。

API

提到的“Observer”后綴的API共享一個簡單的API設(shè)計。ResizeObserver也不例外。

您創(chuàng)建一個ResizeObserver 對象并將回調(diào)傳遞給構(gòu)造函數(shù)。回調(diào)將被賦予一個數(shù)組ResizeOberverEntries- 每個觀察元素一個條目 - 包含元素的大小

var ro = new ResizeObserver( entries => { for (let entry of entries) { const cr = entry.contentRect; console.log('Element:', entry.target); console.log(`Element size: ${cr.width}px x ${cr.height}px`); console.log(`Element padding: ${cr.top}px ; ${cr.left}px`); } });// Observe one or multiple elements ro.observe(someElement);

Usage examples

以下是使用ResizeObserver在畫布內(nèi)繪制橢圓的示例。

<canvas style="width:10%;height:10%"></canvas> <canvas style="width:20%;height:20%"></canvas> function drawEllipse(entry) { let ctx = entry.target.getContext('2d'); let rx = Math.floor(entry.contentRect.width / 2); let ry = Math.floor(entry.contentRect.height / 2); ctx.beginPath(); ctx.clearRect(0,0, entry.contentRect.width,entry.contentRect.height); ctx.ellipse(rx, ry, rx, ry, 0, 0, 2 * Math.PI); ctx.stroke(); } // ResizeObserver delegates action to Element's handleResize method let ro = new ResizeObserver( entries => { for (let entry of entries) { if (entry.target.handleResize) entry.target.handleResize(entry); } }); // Set up observations var canvases = document.querySelectorAll('canvas'); for (let canvas of canvases) { canvas.handleResize = drawEllipse; ro.observe(canvas); }

內(nèi)聯(lián)框架可以檢測其大小何時發(fā)生變化，并通知父窗口。

let ro = new ResizeObserver(entries => { let idealSize = computeIdealSize(); window.parent.postMessage({ name: "iframeResize", width: idealSize.width, height: idealSize.height }, '*'); }); ro.observe(document.body);

當新消息到達時，我們?nèi)绾巫屃奶齑翱跐L動到底部？ResizeObserver解決方案將所有消息保存在不斷增長的中div，并觀察其大小。當新消息到達時，滾動到底部。
完整的例子 詳細討論了用戶滾動的處理。

.chat { overflow: scroll; } <div class="chat"> <!-- chat has the scrollbar --> <div class="chat-text"> <!-- chat-text contains chat text --> <div>jack: hi </div> <div>jill: hi </div> </div> </div let ro = new ResizeObserver( entries => { for (let e of entries) { let chat = e.target.parentNode; chat.scrollTop = chat.scrollHeight - chat.clientHeight; } }); ro.observe(document.querySelector('.chat-text'))

How

?

?

Performance

調(diào)整通知的大小可以有很高的頻率。Observer API避免了事件捕獲/泡泡的開銷。

框架作者可以在ResizeObserver之上提供一個開發(fā)友好的“基于事件”的API，以避免注冊太多的觀察者。

?

Notice

通知傳送順序

當多個ResizeObservers注冊時，通知應(yīng)按注冊順序傳送。

回調(diào)變更集應(yīng)按注冊順序列出元素。

內(nèi)聯(lián)元素

內(nèi)聯(lián)元素不應(yīng)該生成調(diào)整大小通知。

怎么樣變換？

轉(zhuǎn)換不會影響內(nèi)容大小。他們不應(yīng)該觸發(fā)通知。

動畫怎么樣？

影響內(nèi)容大小的動畫應(yīng)該會觸發(fā)通知。

如果工作成本很高，開發(fā)人員可能會希望在動畫期間跳過工作。

調(diào)整大小和可視性

當元素不可見時，內(nèi)容大小變?yōu)?。這將生成一個調(diào)整大小的通知。開發(fā)人員將能夠使用ResizeObserver觀察可見性。

?

本文參考：

ResizeObserver: It’s Like document.onresize for Elements ----- https://developers.google.com/web/updates/2016/10/resizeobserver

WICG/ResizeObserver ----- https://github.com/WICG/ResizeObserver/blob/master/explainer.md

轉(zhuǎn)載于:https://www.cnblogs.com/CrossGod/p/ResizeObserver.html

總結(jié)

以上是生活随笔為你收集整理的ResizeObserver - 元素resize监听API的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。