Resize Observer API مکانیزم کارآمدی را ارائه میکند که به وسیله آن کد میتواند یک عنصر را برای تغییرات اندازه آن نظارت کند و هر بار که اندازه تغییر میکند اعلانهایی به ناظر تحویل داده میشود.
مفاهیم و کاربرد
طیف وسیعی از موارد استفاده برای تکنیکهای طراحی واکنشگرا (و غیره) وجود دارد که به تغییرات اندازه یک عنصر پاسخ میدهند، اما قبلاً پیادهسازیهای آنها اغلب هک و/یا شکننده بودهاند.
به عنوان مثال، پرسش های رسانه ای /
window.matchMedia
برای بهروزرسانی طرحبندیها در نقاطی خاص، زمانی که اندازههای دید درگاه تغییر میکند، عالی هستند، اما اگر بخواهید طرحبندی را در پاسخ به تغییر اندازه یک عنصر خاص، که محفظه بیرونی نیست، تغییر دهید، چه؟
برای دستیابی به این هدف، یک راه حل محدود گوش دادن به تغییرات یک رویداد مناسب است که به عنصر مورد علاقه شما در تغییر اندازه اشاره می کند (مثلاً رویداد تغییر اندازه پنجره)، سپس متوجه شوید که ابعاد جدید یا سایر ویژگی های عنصر بعد از آن چیست یک تغییر اندازه با استفاده از
Element.getBoundingClientRect
یا
Window.getComputedStyle
، مثلا.
const resizeObserver = new ResizeObserver(entries = {
for (let entry of entries) {
if(entry.contentBoxSize) {
...