一文讀懂 MutationObserver 的基本原理和應用場景
MutationObserver 是用于監視 DOM 樹內的特定節點的 Web API 接口，一旦監測到節點發生變化，就會通知回調函數執行相應的邏輯。該 API 的兼容性很好，但由于如今流行的 JS 框架都旨在“數據驅動視圖”，使得這個 API 容易被大眾遺忘。
本文將介紹 MutationObserver 的基本原理、使用方法和應用場景，幫助讀者更好地理解和應用這個靈活且強大的 API。
前言
事情是這樣的，某天我想給文檔網站加個訪問量統計的插件，這個插件是第三方的，工作原理是將數據填充到頁面中特定 id 的節點上，例如有一個 <span id="pv"></span> 的節點，插件加載完成后就會通過 dqS (document.querySelect) 找到 id 為 pv 的節點然后把 pv 數據渲染上去。問題就在于，我這個文檔網站并不是靜態的，所有工作都是在運行時完成，類似一個用 Vue 驅動的網頁，一開始只有 #app 節點，所以這個第三方腳本不能直接放在 index.html 文檔中加載，否則可能頁面還沒渲染完，腳本就已經開始 dqS 了，結果肯定是沒有數據顯示。而頁面真正渲染完成并不在 DOMContentLoaded 階段，使得 defer 異步加載也失去用處。
如果你的網站是自己用例如 Vue 這樣的框架編寫的，那你自然會想到在 onMounted 生命周期里加載腳本，但在這個場景下頁面真正渲染完成是在一個黑盒當中，那么我要如何才能獲知這個本“不存在”的 DOM 節點出現的時機呢？
起初我想到的是一個笨拙但有用的解決方案，那就是使用定時器函數，我們只需要輪詢節點是否存在，等到它出現的時候，便可以開始加載第三方腳本：
const timer = setInterval(() => {
if (document.getElementById('xxxx')) {
// TODO: 此時開始加載第三方腳本
clearInterval(timer) // 清除定時器
}
}, 1000)效果如下所示：
這種方式雖然可以有效運作，但是很明顯的缺陷是不夠靈活，定時器的間隔時間難以定義，設置長了生效慢，設置短了又產生太多不必要的開銷。
有沒有什么方法可以避免無意義的輪詢，又能在渲染完成第一時間加載腳本呢？這就要提到 MutationObserver 這個瀏覽器 API 了。
變動觀察器
MutationObserver 是Web API 中的一個接口，用于監測 DOM 樹中的變化。
它可以觀察特定節點或其子節點的任何更改，例如添加、刪除或修改子節點、屬性變化、文本變化等等。
當 MutationObserver 綁定到一個節點上時，它會創建一個觀察器實例，該實例會監聽其綁定的節點及其子節點的變化，并在發生變化時觸發一個回調函數。
這個 API 的使用非常簡單，我們以上面的場景為例，只需要監聽文檔樹的根節點，然后在其子節點每次發生變化時進行 dqS 就可以了，代碼如下：
// 選擇一個要監聽的節點
const targetNode = document.body
// 創建一個新的 MutationObserver
const observer = new MutationObserver(() => {
if (document.getElementById('xxx')) {
// TODO: 此時開始加載第三方腳本
observer.disconnect(); // 銷毀監視者
}
})
const config = { childList: true, subtree: true } // 對哪些更改做出反應
// 綁定目標節點并啟動監視者
observer.observe(targetNode, config)在完成對應邏輯后應該及時調用 observer.disconnect() 銷毀監視者，否則第三方腳本里如果也操作了 DOM 就會不斷遞歸。
在上面代碼的回調函數中打印 dqS 信息，這里前三次 DOM 發生變動時特定節點還不存在，直到第四次變動出現了特定節點，于是加載第三方腳本，渲染數據，并關閉監視者。
config 對象有如下這些值，這些布爾選項表示會“對哪些更改做出反應”：
- ? childList：監聽子節點變動
- ? subtree：監聽所有后代節點的變動
- ? attributes：監聽節點的特性變化
- ? attributeFilter：特性名稱數組，只觀察選定的特性
- ? characterData：是否觀察文本內容
- ? attributeOldValue：是否將特性的舊值和新值都傳遞給回調
- ? characterDataOldValue：是否將 node.data 的舊值和新值都傳遞給回調
應用場景
除了上文的第三方腳本場景，還有哪些場景可以使用呢？
編輯器自動保存
當我們給一個普通的 div 添加 contentEditable 屬性時，它便具有了可編輯的能力，這時我們可以通過 MutationObserver 來監聽文本內容的變動，并執行某些邏輯，例如在發生改動時觸發自動保存等。
// 使用以下簡單的代碼片段，修改文本并觀察控制臺的輸出：
<div contentEditable id="editor">
點擊開始 <b>編輯文本</b>。
</div>
<style>
#editor {
height: 200px;
padding: 1rem;
}
</style>
<script>
const observer = new MutationObserver(mutationRecords => {
for (mutation of mutationRecords) {
console.log(mutation.type); // 輸出屬性變化的類型
console.log('oldValue: '+mutation.oldValue)
console.log(mutation.target.data) // 文本變動
}
});
// 觀察除了特性之外的所有變動
observer.observe(editor, {
childList: true, // 觀察直接子節點
subtree: true, // 及其更低的后代節點
characterData: true,
characterDataOldValue: true // 將舊的數據傳遞給回調
});
</script>MutationRecord 對象有如下一些屬性：
- ? type：變動類型，attributes：特性被修改了，characterData：數據被修改了（文本），childList：添加/刪除了子元素
- ? target：更改發生在何處
- ? addedNodes / removedNodes：添加/刪除的節點，數組格式
- ? previousSibling / nextSibling：添加/刪除的節點的上一個/下一個兄弟節點
- ? attributeName / attributeNamespace：被更改的特性的名稱/命名空間（XML）
- ? oldValue：修改前的值，僅適用于特性或文本更改（需設置相應選項 attributeOldValue / characterDataOldValue）
Div 水印
在上面的文本編輯器例子中，除了在文本框修改會觸發監聽回調，打開控制臺在文檔樹中直接修改也能觸發回調：
這就給我們提供了一種保護 DOM 結構的思路：例如在頁面中打水印的場景，只需要用最簡單的 div 覆蓋最上層實現，然后監聽這些水印節點，無論水印被何種方式刪除，都可以監聽到然后把它還原回去~
同理，如果頁面中插入第三方廣告，也可以用來檢查廣告是否被屏蔽等。
總結
MutationObserver 的優點在于它可以捕獲多種類型的 DOM 變化，包括元素的添加、刪除、屬性更改、文本內容變化等，而不需要顯式地監聽每一種變化類型，這意味著它更靈活、更可靠，并且可以適應各種應用場景。
從架構的角度上來看，MutationObserver 可以構建更高效、更靈活的代碼，因為它符合設計模式中最基本的“開閉原則”，即對擴展開放，對修改關閉。該原則提倡當需要添加新的功能時，不應修改已有的代碼，而是應該通過擴展已有的代碼來實現新的功能。當已存在的代碼成為黑盒時，有效地監聽 DOM 變化并做出相應的擴展邏輯，可以更優雅地完成需求。
以上就是文章的全部內容，感謝看到這里！本人知識水平有限，如有錯誤望不吝指正，如果覺得寫得不錯，對你有所幫助或啟發，可以點贊收藏支持一下，也歡迎關注，我會更新更多實用的前端知識與技巧。我是茶無味de一天(公眾號：品味前端)，希望與你共同成長~
