MutationObserver 是用于監(jiān)視 DOM 樹內(nèi)的特定節(jié)點的 Web API 接口，一旦監(jiān)測到節(jié)點發(fā)生變化，就會通知回調(diào)函數(shù)執(zhí)行相應(yīng)的邏輯。該 API 的兼容性很好，但由于如今流行的 JS 框架都旨在“數(shù)據(jù)驅(qū)動視圖”，使得這個 API 容易被大眾遺忘。

本文將介紹 MutationObserver 的基本原理、使用方法和應(yīng)用場景，幫助讀者更好地理解和應(yīng)用這個靈活且強大的 API。

前言

事情是這樣的，某天我想給文檔網(wǎng)站加個訪問量統(tǒng)計的插件，這個插件是第三方的，工作原理是將數(shù)據(jù)填充到頁面中特定 id 的節(jié)點上，例如有一個 <span id="pv"></span> 的節(jié)點，插件加載完成后就會通過 dqS (document.querySelect) 找到 id 為 pv 的節(jié)點然后把 pv 數(shù)據(jù)渲染上去。問題就在于，我這個文檔網(wǎng)站并不是靜態(tài)的，所有工作都是在運行時完成，類似一個用 Vue 驅(qū)動的網(wǎng)頁，一開始只有 #app 節(jié)點，所以這個第三方腳本不能直接放在 index.html 文檔中加載，否則可能頁面還沒渲染完，腳本就已經(jīng)開始 dqS 了，結(jié)果肯定是沒有數(shù)據(jù)顯示。而頁面真正渲染完成并不在 DOMContentLoaded 階段，使得 defer 異步加載也失去用處。

如果你的網(wǎng)站是自己用例如 Vue 這樣的框架編寫的，那你自然會想到在 onMounted 生命周期里加載腳本，但在這個場景下頁面真正渲染完成是在一個黑盒當(dāng)中，那么我要如何才能獲知這個本“不存在”的 DOM 節(jié)點出現(xiàn)的時機呢？

起初我想到的是一個笨拙但有用的解決方案，那就是使用定時器函數(shù)，我們只需要輪詢節(jié)點是否存在，等到它出現(xiàn)的時候，便可以開始加載第三方腳本：

const timer = setInterval(() => {
    if (document.getElementById('xxxx')) {
      // TODO: 此時開始加載第三方腳本
      clearInterval(timer) // 清除定時器
    }
}, 1000)

效果如下所示：

這種方式雖然可以有效運作，但是很明顯的缺陷是不夠靈活，定時器的間隔時間難以定義，設(shè)置長了生效慢，設(shè)置短了又產(chǎn)生太多不必要的開銷。

有沒有什么方法可以避免無意義的輪詢，又能在渲染完成第一時間加載腳本呢？這就要提到 MutationObserver 這個瀏覽器 API 了。

變動觀察器

MutationObserver 是Web API 中的一個接口，用于監(jiān)測 DOM 樹中的變化。

它可以觀察特定節(jié)點或其子節(jié)點的任何更改，例如添加、刪除或修改子節(jié)點、屬性變化、文本變化等等。

當(dāng) MutationObserver 綁定到一個節(jié)點上時，它會創(chuàng)建一個觀察器實例，該實例會監(jiān)聽其綁定的節(jié)點及其子節(jié)點的變化，并在發(fā)生變化時觸發(fā)一個回調(diào)函數(shù)。

這個 API 的使用非常簡單，我們以上面的場景為例，只需要監(jiān)聽文檔樹的根節(jié)點，然后在其子節(jié)點每次發(fā)生變化時進行 dqS 就可以了，代碼如下：

// 選擇一個要監(jiān)聽的節(jié)點
const targetNode = document.body

// 創(chuàng)建一個新的 MutationObserver
const observer = new MutationObserver(() => {
  if (document.getElementById('xxx')) {
    // TODO: 此時開始加載第三方腳本
    observer.disconnect(); // 銷毀監(jiān)視者
  }
})

const config = { childList: true, subtree: true } // 對哪些更改做出反應(yīng)

// 綁定目標(biāo)節(jié)點并啟動監(jiān)視者
observer.observe(targetNode, config)

在完成對應(yīng)邏輯后應(yīng)該及時調(diào)用 observer.disconnect() 銷毀監(jiān)視者，否則第三方腳本里如果也操作了 DOM 就會不斷遞歸。

在上面代碼的回調(diào)函數(shù)中打印 dqS 信息，這里前三次 DOM 發(fā)生變動時特定節(jié)點還不存在，直到第四次變動出現(xiàn)了特定節(jié)點，于是加載第三方腳本，渲染數(shù)據(jù)，并關(guān)閉監(jiān)視者。

config 對象有如下這些值，這些布爾選項表示會“對哪些更改做出反應(yīng)”：

• ? childList：監(jiān)聽子節(jié)點變動
• ? subtree：監(jiān)聽所有后代節(jié)點的變動
• ? attributes：監(jiān)聽節(jié)點的特性變化
• ? attributeFilter：特性名稱數(shù)組，只觀察選定的特性
• ? characterData：是否觀察文本內(nèi)容
• ? attributeOldValue：是否將特性的舊值和新值都傳遞給回調(diào)
• ? characterDataOldValue：是否將 node.data 的舊值和新值都傳遞給回調(diào)

應(yīng)用場景

除了上文的第三方腳本場景，還有哪些場景可以使用呢？

編輯器自動保存

當(dāng)我們給一個普通的 div 添加 contentEditable 屬性時，它便具有了可編輯的能力，這時我們可以通過 MutationObserver 來監(jiān)聽文本內(nèi)容的變動，并執(zhí)行某些邏輯，例如在發(fā)生改動時觸發(fā)自動保存等。

// 使用以下簡單的代碼片段，修改文本并觀察控制臺的輸出：
<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, // 觀察直接子節(jié)點
  subtree: true, // 及其更低的后代節(jié)點
  characterData: true,
  characterDataOldValue: true // 將舊的數(shù)據(jù)傳遞給回調(diào)
});  
</script>

MutationRecord 對象有如下一些屬性：

• ? type：變動類型，attributes：特性被修改了，characterData：數(shù)據(jù)被修改了（文本），childList：添加/刪除了子元素
• ? target：更改發(fā)生在何處
• ? addedNodes / removedNodes：添加/刪除的節(jié)點，數(shù)組格式
• ? previousSibling / nextSibling：添加/刪除的節(jié)點的上一個/下一個兄弟節(jié)點
• ? attributeName / attributeNamespace：被更改的特性的名稱/命名空間（XML）
• ? oldValue：修改前的值，僅適用于特性或文本更改（需設(shè)置相應(yīng)選項 attributeOldValue / characterDataOldValue）

Div 水印

在上面的文本編輯器例子中，除了在文本框修改會觸發(fā)監(jiān)聽回調(diào)，打開控制臺在文檔樹中直接修改也能觸發(fā)回調(diào)：

這就給我們提供了一種保護 DOM 結(jié)構(gòu)的思路：例如在頁面中打水印的場景，只需要用最簡單的 div 覆蓋最上層實現(xiàn)，然后監(jiān)聽這些水印節(jié)點，無論水印被何種方式刪除，都可以監(jiān)聽到然后把它還原回去~

同理，如果頁面中插入第三方廣告，也可以用來檢查廣告是否被屏蔽等。

總結(jié)

MutationObserver 的優(yōu)點在于它可以捕獲多種類型的 DOM 變化，包括元素的添加、刪除、屬性更改、文本內(nèi)容變化等，而不需要顯式地監(jiān)聽每一種變化類型，這意味著它更靈活、更可靠，并且可以適應(yīng)各種應(yīng)用場景。

從架構(gòu)的角度上來看，MutationObserver 可以構(gòu)建更高效、更靈活的代碼，因為它符合設(shè)計模式中最基本的“開閉原則”，即對擴展開放，對修改關(guān)閉。該原則提倡當(dāng)需要添加新的功能時，不應(yīng)修改已有的代碼，而是應(yīng)該通過擴展已有的代碼來實現(xiàn)新的功能。當(dāng)已存在的代碼成為黑盒時，有效地監(jiān)聽 DOM 變化并做出相應(yīng)的擴展邏輯，可以更優(yōu)雅地完成需求。

以上就是文章的全部內(nèi)容，感謝看到這里！本人知識水平有限，如有錯誤望不吝指正，如果覺得寫得不錯，對你有所幫助或啟發(fā)，可以點贊收藏支持一下，也歡迎關(guān)注，我會更新更多實用的前端知識與技巧。我是茶無味de一天(公眾號：品味前端)，希望與你共同成長~