Resize Observer API

Resize Observer API: ตรวจจับการเปลี่ยนแปลงขนาดของ Elements อย่างชาญฉลาด

ในโลกของการพัฒนาเว็บที่ Responsive และ Dynamic การจัดการกับขนาดของ Elements ต่างๆ เป็นสิ่งสำคัญอย่างยิ่ง ไม่ว่าจะเป็นการปรับ Layout ตามขนาดหน้าจอ, การ Trigger Animations เมื่อ Element เข้ามาใน Viewport หรือการคำนวณตำแหน่งของ Element อื่นๆ ที่ขึ้นอยู่กับขนาดของ Element หนึ่งๆ ปัญหาคือการตรวจจับการเปลี่ยนแปลงขนาดของ Element อย่างมีประสิทธิภาพและแม่นยำ ซึ่งในอดีตมักจะพึ่งพา Event Listener ของ window.onresize หรือการใช้ setInterval เพื่อตรวจสอบขนาดเป็นระยะๆ ซึ่งมีข้อเสียคืออาจจะไม่แม่นยำและกินทรัพยากรของ Browser มากเกินไป

Resize Observer API คือคำตอบสำหรับปัญหานี้! มันเป็น API ที่ช่วยให้เราสามารถเฝ้าติดตามการเปลี่ยนแปลงขนาดของ HTML Elements ได้อย่างมีประสิทธิภาพ โดย Browser จะแจ้งเตือนเราเมื่อขนาดของ Element ที่เราสนใจมีการเปลี่ยนแปลง ทำให้เราสามารถเขียนโค้ดที่ตอบสนองต่อการเปลี่ยนแปลงขนาดได้อย่างแม่นยำและประหยัดทรัพยากรมากกว่าวิธีการเดิมๆ

ทำไมต้อง Resize Observer?

ก่อนที่จะลงลึกในรายละเอียดการใช้งาน มาทำความเข้าใจกันก่อนว่า Resize Observer มีข้อดีอย่างไรเมื่อเทียบกับวิธีการอื่นๆ:

• ประสิทธิภาพ: Resize Observer จะทำงานเฉพาะเมื่อขนาดของ Element ที่เราสนใจมีการเปลี่ยนแปลงจริงๆ เท่านั้น ซึ่งต่างจากการใช้ setInterval ที่ต้องตรวจสอบขนาดเป็นระยะๆ แม้ว่าขนาดจะไม่ได้เปลี่ยนแปลงก็ตาม
• ความแม่นยำ: Resize Observer จะแจ้งเตือนเราก่อนที่ Browser จะทำการ Repaint หน้าจอ ทำให้เราสามารถปรับ Layout หรือคำนวณตำแหน่งของ Element อื่นๆ ได้อย่างแม่นยำ
• ความสะดวก: Resize Observer มี API ที่ใช้งานง่าย ทำให้เราสามารถเขียนโค้ดที่อ่านง่ายและบำรุงรักษาได้ง่าย
• รองรับ iframe: Resize Observer สามารถตรวจจับการเปลี่ยนแปลงขนาดของ Element ภายใน iframe ได้

การใช้ Resize Observer ช่วยลดภาระการทำงานของ Main Thread ใน Browser ทำให้ Website ของเราทำงานได้ลื่นไหลและตอบสนองได้ดีขึ้น ซึ่งเป็นสิ่งสำคัญอย่างยิ่งสำหรับ User Experience ที่ดี

การสร้าง ResizeObserver

การใช้งาน Resize Observer เริ่มต้นด้วยการสร้าง Instance ของ ResizeObserver โดย Constructor รับ Callback Function เป็น Parameter ซึ่ง Callback Function นี้จะถูกเรียกเมื่อขนาดของ Element ที่เราสังเกตการณ์มีการเปลี่ยนแปลง:

const observer = new ResizeObserver(entries => {
  // Callback function ที่จะถูกเรียกเมื่อขนาดของ Element เปลี่ยนแปลง
  for (let entry of entries) {
    // ทำอะไรบางอย่างกับ entry (ResizeObserverEntry)
    console.log('Element size changed:', entry.contentRect);
  }
});

เหตุผลเชิงออกแบบ: การใช้ Callback Function เป็น Pattern ที่พบบ่อยในการเขียน Asynchronous Code ใน JavaScript ช่วยให้เราสามารถแยก Logic ที่เกี่ยวข้องกับการเปลี่ยนแปลงขนาดออกจากส่วนอื่นๆ ของโค้ดได้อย่างชัดเจน นอกจากนี้ยังช่วยให้โค้ดของเราทำงานได้โดยไม่ Block Main Thread ของ Browser

Callback Function

Callback Function ที่เราส่งให้ Constructor ของ ResizeObserver จะได้รับ Array ของ ResizeObserverEntry Objects เป็น Argument แต่ละ ResizeObserverEntry Represent การเปลี่ยนแปลงขนาดของ Element หนึ่งๆ ที่เรากำลังสังเกตการณ์อยู่

ภายใน Callback Function เราสามารถ Loop ผ่าน Array ของ ResizeObserverEntry เพื่อเข้าถึงข้อมูลเกี่ยวกับการเปลี่ยนแปลงขนาดของแต่ละ Element ได้

ResizeObserverEntry

ResizeObserverEntry Object มี Properties ที่สำคัญดังนี้:

• target: Element ที่มีการเปลี่ยนแปลงขนาด
• contentRect: Rectangle Object ที่ Represent ขนาดของ Content Box ของ Element
• borderBoxSize: Array ของ ResizeObserverSize Objects ที่ Represent ขนาดของ Border Box ของ Element (รองรับ Browser ที่ใหม่กว่า)
• contentBoxSize: Array ของ ResizeObserverSize Objects ที่ Represent ขนาดของ Content Box ของ Element (รองรับ Browser ที่ใหม่กว่า)
• devicePixelContentBoxSize: Array ของ ResizeObserverSize Objects ที่ Represent ขนาดของ Content Box ของ Element ใน Device Pixels (รองรับ Browser ที่ใหม่กว่า)

Property ที่สำคัญที่สุดคือ contentRect ซึ่งเป็น Rectangle Object ที่มี Properties ดังนี้:

• x: ตำแหน่ง X ของ Element
• y: ตำแหน่ง Y ของ Element
• width: ความกว้างของ Element
• height: ความสูงของ Element
• top: ตำแหน่ง Top ของ Element
• right: ตำแหน่ง Right ของ Element
• bottom: ตำแหน่ง Bottom ของ Element
• left: ตำแหน่ง Left ของ Element

เราสามารถใช้ contentRect เพื่อเข้าถึงขนาดและความกว้างของ Element ที่มีการเปลี่ยนแปลงได้

การเริ่มสังเกตการณ์ Element

หลังจากที่เราสร้าง ResizeObserver Instance แล้ว เราต้องบอกให้ Observer รู้ว่า Element ไหนที่เราต้องการสังเกตการณ์ โดยใช้ Method observe():

const element = document.getElementById('myElement');
observer.observe(element);

แนวปฏิบัติที่ดี: ควรตรวจสอบให้แน่ใจว่า Element ที่เราต้องการสังเกตการณ์มีอยู่ใน DOM แล้ว ก่อนที่จะเรียก observe() มิฉะนั้นอาจจะเกิด Error ได้

การหยุดสังเกตการณ์ Element

เมื่อเราไม่ต้องการสังเกตการณ์ Element ใดๆ อีกต่อไป เราสามารถเรียก Method unobserve() เพื่อหยุดการสังเกตการณ์:

observer.unobserve(element);

นอกจากนี้ เรายังสามารถเรียก Method disconnect() เพื่อหยุดการสังเกตการณ์ Element ทั้งหมดที่ Observer กำลังสังเกตการณ์อยู่:

observer.disconnect();

Trade-offs: การเรียก disconnect() จะทำให้ Observer หยุดทำงานอย่างสมบูรณ์ ซึ่งมีประโยชน์ในกรณีที่เราต้องการ Release Resources ที่ Observer ใช้ แต่ในขณะเดียวกันก็หมายความว่าเราจะต้องสร้าง Observer Instance ใหม่ หากเราต้องการเริ่มสังเกตการณ์ Element อีกครั้ง

ตัวอย่างการใช้งาน

สมมติว่าเรามี div Element ที่มี ID ว่า resizable-div และเราต้องการแสดงขนาดของ div ใน span Element ที่มี ID ว่า size-display เมื่อขนาดของ div มีการเปลี่ยนแปลง:

<div id="resizable-div" style="width: 200px; height: 100px; background-color: lightblue;">
  <p>Resize me!</p>
</div>
<span id="size-display"></span>

<script>
  const resizableDiv = document.getElementById('resizable-div');
  const sizeDisplay = document.getElementById('size-display');

  const observer = new ResizeObserver(entries => {
    for (let entry of entries) {
      const width = entry.contentRect.width;
      const height = entry.contentRect.height;
      sizeDisplay.textContent = `Width: ${width}px, Height: ${height}px`;
    }
  });

  observer.observe(resizableDiv);
</script>

ในตัวอย่างนี้ เราสร้าง ResizeObserver ที่จะ Update Text Content ของ span Element ด้วยขนาดของ div ทุกครั้งที่ขนาดของ div มีการเปลี่ยนแปลง

สรุป

Resize Observer API เป็นเครื่องมือที่มีประสิทธิภาพสำหรับการตรวจจับการเปลี่ยนแปลงขนาดของ HTML Elements ช่วยให้เราสามารถสร้าง Website ที่ Responsive และ Dynamic ได้อย่างมีประสิทธิภาพและแม่นยำ การทำความเข้าใจ Concept และการใช้งาน Resize Observer จะช่วยให้คุณเขียนโค้ด JavaScript ที่มีคุณภาพสูงและมอบประสบการณ์ที่ดีให้กับผู้ใช้งาน

ในบทความถัดไป เราจะมาเรียนรู้เกี่ยวกับ Intersection Observer API ซึ่งเป็น API ที่ช่วยให้เราสามารถตรวจจับเมื่อ Element เข้ามาใน Viewport ได้