JavaScript 的 Observer 模式扮演著至關重要的角色。Observer模式允許開發者監聽對象的變化，并在變化發生時自動執行相應的操作。這種機制在前端開發中尤為重要，尤其是在處理動態數據、用戶交互和異步操作時

接下來盤點一下 JavaScript 中那些至關重要的 Observer

MutationObserver 監聽DOM變化

MutationObserver是 JavaScript 中用于監聽DOM樹變化的接口。它可以在 DOM 節點被添加、刪除或修改時觸發回調函數。與舊的 Mutation Events 相比，MutationObserver更加高效和靈活。

使用場景

• 動態加載內容時，監聽新元素的插入。
• 監聽元素的屬性變化，如class、style等。
• 監聽子節點的變化，如添加或刪除子元素。

示例代碼

圖片

兼容性

圖片

IntersectionObserver 監聽元素可見性

IntersectionObserver用于監聽目標元素與其祖先元素或視口的交叉狀態。它可以幫助開發者判斷元素是否進入或離開視口，從而實現懶加載、無限滾動等功能。

使用場景

• 圖片懶加載：當圖片進入視口時再加載。
• 無限滾動：監聽列表底部元素，觸發加載更多內容。
• 廣告曝光統計：統計廣告元素的曝光次數。

示例代碼

圖片

兼容性

圖片

ResizeObserver 監聽元素尺寸變化

ResizeObserver用于監聽元素尺寸的變化。與傳統的 window.resize 事件不同，ResizeObserver可以精確監聽單個元素的尺寸變化，而不受頁面其他部分的影響。

使用場景

• 響應式布局：根據元素尺寸動態調整布局。
• 圖表重繪：當容器尺寸變化時，重新繪制圖表。
• 自適應組件：根據父容器尺寸調整子組件大小。

示例代碼

圖片

兼容性

圖片

PerformanceObserver 監聽性能指標

PerformanceObserver 用于監聽性能相關的指標，如資源加載時間、首次繪制時間等。它可以幫助開發者分析和優化頁面性能。

使用場景

• 監控頁面加載性能。
• 分析資源加載時間。
• 監控長任務和用戶交互延遲。

示例代碼

圖片

兼容性

圖片