COOL IT IDEAS AND STUFF

See the original english version Click here!

ใน Browser เราสามารถใช้ addEventListener เพื่อต้อง Listen User Events ได้ แต่ถ้าเราต้องการ Listen การเปลี่ยนแปลงของ DOM หรือ Browser Behavior ล่ะ? Browsers ได้เตรียม Observers หลายตัวไว้ให้เพื่อตอบสนองความต้องการเหล่านี้ และบทความนี้จะมาแนะนำ 3 Web Observers ที่ Web Developer ทุกคนควรรู้จักไว้

1. MutationObserver

MutationObserver Interface สามารถ Monitor การเปลี่ยนแปลงใน DOM Tree และเป็นส่วนหนึ่งของ DOM3 Event Specification มันสามารถ Monitor การเปลี่ยนแปลง Properties ของ Node ปัจจุบัน, การเปลี่ยนแปลงใน Child Nodes รวมทั้งอื่น ๆ และนี่คือตัวอย่างง่าย ๆ:

เมื่อคลิกที่ปุ่ม คุณจะเห็นว่า MutationObserver มีการ Listen การเปลี่ยนแปลง และสามารถทราบได้อย่างชัดเจนว่า attributes การเปลี่ยนแปลงหรือว่า childList มีการเปลี่ยนแปลง

มันเป็นสิ่งสำคัญโดยเฉพาะอย่างยิ่งที่ Observer Event Callbacks ทั้งหมดเป็น microtasks ซึ่งมีประโยชน์อยู่ 2 ประการคือ

• มันเป็น Asynchronous มันไม่เหมือนกับ Mutation Events ที่เรียกใช้ Synchronous Callback ทุกครั้งที่ DOM เปลี่ยนแปลง แต่จะรอ DOM เปลี่ยนแปลงหลาย ๆ รายการก่อนที่จะเรียกใช้ Asynchronous Callback
• มันสามารถรับประกัน Real-Time ได้แน่นอน มันจะถูกเรียกก่อนที่ macro task ครั้งต่อไปจะเริ่มขึ้น

นี่คือตัวอย่างการใช้ Mutation Events และ MutationObserver:

ใช้ค่า Default เป็น 3 โดยเมื่อคลิกปุ่ม Add Multiple Child คุณจะเห็นว่ามีการเรียก insertCallback 3 ครั้ง ในขณะที่ observerCallback ถูกเรียกเพียงครั้งเดียว และใน mutationsList  คุณจะได้รับ Records ของการเปลี่ยนแปลงทั้ง 3 นี้ ขอแนะนำให้คุณลองเปลี่ยนเป็นหมายเลขอื่น ๆ เพื่อทดสอบได้

ด้านล่างนี้เป็นภาพหน้าจอของ Performance:

User Click Event เป็น macro task หลังจากคลิกที่ปุ่ม จะเห็นได้ว่า DOMNodeInserted Event จะถูกเรียก 3 ครั้ง และ observerCallback จะถูกเรียกหนึ่งครั้งใน microtask ขั้นตอนต่อไปคือให้ Browser สร้าง Frame ใหม่ ถ้า User ทำการ Click อีกครั้ง macro task ใหม่จะเริ่มต้นขึ้น

ดังนั้น มันจึงเป็นใช้กลไกของ Event Loop อย่างชาญฉลาดเพื่อแก้ปัญหาแบบ Real-Time โดยไม่กระทบต่อ Performance

2. ResizeObserver

หากต้องการ Listen การเปลี่ยนแปลงขนาดของ Browser Window เราสามารถใช้ addEventListener เพื่อ Listen Resize Event และเพื่อ Listen Single Element คุณสามารถใช้ ResizeObserver

ResizeObserver Interface Reports จะเปลี่ยน Dimensions ของ Content หรือ Border-Box ของ Element หรือ Bounding Box ของ SVGElement

และนี่ก็คือตัวอย่างง่าย ๆ:

โปรดทราบว่า ResizeObserver จะทำการ callback เมื่อเริ่มต้น ลาก Slide ด้านบนเพื่อดูว่า callbacks จะถูกเรียกตามลำดับ และคุณจะไม่รู้สึกว่ามันเกิดการ Lag ใด ๆ ซึ่งก็เนื่องมาจาก microtasks ที่เรากล่าวถึงไปแล้วข้างต้น

resizeObserver จะมีประโยชน์อย่างยิ่งในกรณีที่เราทำการใช้ Visualization Chart

3. IntersectionObserver

IntersectionObserver Interface จะสามารถสังเกตการเปลี่ยนแปลงในส่วนที่ Intersection กันของ Element เป้าหมายด้วย Element ระดับบนสุดหรือ Document Viewport ในการสร้างนั้น คุณสามารถระบุเกณฑ์สำหรับ Scale ส่วนที่มองเห็นได้ของส่วนที่ Intersection กัน

และนี่ก็คือ ตัวอย่างง่าย ๆ:

เลื่อน Scroll Bar ใน Container Area เพื่อดู Console Output โดยที่ intersectionRatio จะระบุ Ratio ของ Intersection ปัจจุบัน โดยเราจะระบุ Output ที่ 0.5 และ 1

API นี้มีประโยชน์อย่างมากสำหรับเรื่อง Lazy Loading ของรูปภาพ หรือ Data Collection

รายละเอียดเพิ่มเติม

นอกจาก Observer ของ Monitoring Elements ทั้ง 3 ข้างต้นแล้ว ยังมี Observer อีก 2 ประเภท ได้แก่ PerformanceObserver และ ReportingObserver โดย:

• PerformanceObserver จะใช้เพื่อ Monitor Performance Measurement Events โดย Callback Function จะทำงานเมื่อมี Measurement Event (Performance Entries) จากนั้นคุณสามารถเลือก Report เพื่อการวิเคราะห์ Performance ได้
• ReportingObserver จะอนุญาตให้รวบรวมและเข้าถึง Reports ตัวอย่างเช่น เมื่อใช้ API ที่เลิกใช้แล้วของ Browser มันจะทำการเรียกใช้ Callback Function แต่เนื่องจากนี่ไม่ใช่ Error คุณจึงสามารถใช้ ReportingObserver เพื่อ Listen เท่านั้น

ที่มา: https://levelup.gitconnected.com/

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

บทความล่าสุด

• Top 5 Browser Extensions สำหรับ Data Scientists
• 9 VS Code Extensions ที่มีประโยชน์ต่อการพัฒนา Web
• 8 Python Packages ที่คนทำงานสาย Data ควรรู้จักไว้