مقدمه ای سریع برای تغییر اندازه مشاهدهگر API

تصویر
عکس پروفایل Noon Hacker Contributors Mozilla

مشارکت کنندگان موزیلا

موزیلا (به شکل moz://a) یک انجمن نرم افزار رایگان است که در سال 1998 توسط اعضای نت اسکیپ تأسیس شد.

Resize Observer API مکانیزم کارآمدی را ارائه می‌کند که به وسیله آن کد می‌تواند یک عنصر را برای تغییرات اندازه آن نظارت کند و هر بار که اندازه تغییر می‌کند اعلان‌هایی به ناظر تحویل داده می‌شود.

مفاهیم و کاربرد

طیف وسیعی از موارد استفاده برای تکنیک‌های طراحی واکنش‌گرا (و غیره) وجود دارد که به تغییرات اندازه یک عنصر پاسخ می‌دهند، اما قبلاً پیاده‌سازی‌های آنها اغلب هک و/یا شکننده بوده‌اند.

به عنوان مثال، پرسش های رسانه ای /

window.matchMedia

برای به‌روزرسانی طرح‌بندی‌ها در نقاطی خاص، زمانی که اندازه‌های دید درگاه تغییر می‌کند، عالی هستند، اما اگر بخواهید طرح‌بندی را در پاسخ به تغییر اندازه یک عنصر خاص، که محفظه بیرونی نیست، تغییر دهید، چه؟

برای دستیابی به این هدف، یک راه حل محدود گوش دادن به تغییرات یک رویداد مناسب است که به عنصر مورد علاقه شما در تغییر اندازه اشاره می کند (مثلاً رویداد تغییر اندازه پنجره)، سپس متوجه شوید که ابعاد جدید یا سایر ویژگی های عنصر بعد از آن چیست یک تغییر اندازه با استفاده از

Element.getBoundingClientRect

یا

Window.getComputedStyle

، مثلا.

const resizeObserver = new ResizeObserver(entries = {
  for (let entry of entries) {
    if(entry.contentBoxSize) {
     ...