JavaScript 的 Observer 模式扮演著至關(guān)重要的角色。Observer模式允許開發(fā)者監(jiān)聽對(duì)象的變化，并在變化發(fā)生時(shí)自動(dòng)執(zhí)行相應(yīng)的操作。這種機(jī)制在前端開發(fā)中尤為重要，尤其是在處理動(dòng)態(tài)數(shù)據(jù)、用戶交互和異步操作時(shí)

接下來盤點(diǎn)一下 JavaScript 中那些至關(guān)重要的 Observer

MutationObserver 監(jiān)聽DOM變化

MutationObserver是 JavaScript 中用于監(jiān)聽DOM樹變化的接口。它可以在 DOM 節(jié)點(diǎn)被添加、刪除或修改時(shí)觸發(fā)回調(diào)函數(shù)。與舊的 Mutation Events 相比，MutationObserver更加高效和靈活。

使用場(chǎng)景

• 動(dòng)態(tài)加載內(nèi)容時(shí)，監(jiān)聽新元素的插入。
• 監(jiān)聽元素的屬性變化，如class、style等。
• 監(jiān)聽子節(jié)點(diǎn)的變化，如添加或刪除子元素。

示例代碼

圖片

兼容性

圖片

IntersectionObserver 監(jiān)聽元素可見性

IntersectionObserver用于監(jiān)聽目標(biāo)元素與其祖先元素或視口的交叉狀態(tài)。它可以幫助開發(fā)者判斷元素是否進(jìn)入或離開視口，從而實(shí)現(xiàn)懶加載、無限滾動(dòng)等功能。

使用場(chǎng)景

• 圖片懶加載：當(dāng)圖片進(jìn)入視口時(shí)再加載。
• 無限滾動(dòng)：監(jiān)聽列表底部元素，觸發(fā)加載更多內(nèi)容。
• 廣告曝光統(tǒng)計(jì)：統(tǒng)計(jì)廣告元素的曝光次數(shù)。

示例代碼

圖片

兼容性

圖片

ResizeObserver 監(jiān)聽元素尺寸變化

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

使用場(chǎng)景

• 響應(yīng)式布局：根據(jù)元素尺寸動(dòng)態(tài)調(diào)整布局。
• 圖表重繪：當(dāng)容器尺寸變化時(shí)，重新繪制圖表。
• 自適應(yīng)組件：根據(jù)父容器尺寸調(diào)整子組件大小。

示例代碼

圖片

兼容性

圖片

PerformanceObserver 監(jiān)聽性能指標(biāo)

PerformanceObserver 用于監(jiān)聽性能相關(guān)的指標(biāo)，如資源加載時(shí)間、首次繪制時(shí)間等。它可以幫助開發(fā)者分析和優(yōu)化頁面性能。

使用場(chǎng)景

• 監(jiān)控頁面加載性能。
• 分析資源加載時(shí)間。
• 監(jiān)控長(zhǎng)任務(wù)和用戶交互延遲。

示例代碼

圖片

兼容性

圖片