原生 JavaScript API 簡介：MutationObserver、IntersectionObserver 與 History API

現代 Web 應用程式需要回應能力、效率和動態互動性。原生 JavaScript API（例如 MutationObserver、IntersectionObserver 和 History API）可讓開發人員直接應對這些挑戰，而無需外部程式庫。讓我們詳細探索這些 API，了解它們的用例，並學習如何有效地利用它們的功能。

變異觀察者

概述：

MutationObserver 介面監視 DOM 樹中的更改，替換現已棄用的 Mutation Events。它可以檢測節點何時新增、刪除或修改，使其成為動態應用程式的必備工具。

主要特點：

• 監視 DOM 樹的變更。
• 偵測對屬性、子節點和文字內容的修改。
• 非同步操作，確保對效能的影響最小。

問。 MutationObserver 是如何運作的？

MutationObserver 實例是使用回呼函數建立的，每當 DOM 中發生指定的變更時就會觸發該回呼函數。

MutationObserver 中的選項

• 子樹：觀察目標節點及其所有後代。

• childList：監視子節點的新增或刪除。

• 屬性：追蹤目標節點屬性的變更。

• attributeFilter：限制對指定屬性的監控。

• attributeOldValue：捕獲屬性變更之前的先前值。

• characterData：觀察節點文字內容的變化。

• characterDataOldValue：捕獲文字內容修改前的先前值。

HTML 語法

<div>



<p><strong>JS Syntax</strong><br>
</p>

<pre class="brush:php;toolbar:false">
const target = document.querySelector('#something')

const observer = new MutationObserver(function(mutations){
    mutations.forEach(function(mutation){
    console.log('Mutation detected:', mutation)
  })
})

const config = {attributes:true, childList:true, characterData:true, subtree:true}

observer.observe(target,config)

//observer.disconnect() - to stop observing

用例：

• 動態更新 UI 元素。
• 實作 DOM 變更的自訂行為。
• 監控第三方函式庫的修改。

路口觀察者

概述：

IntersectionObserver 是一個非同步觀察目標元素相對於根容器或視窗的可見性變化的介面。它通常用於延遲載入、無限滾動和分析。

主要特點：

• 有效追蹤元素可見性。
• 減少對捲動事件偵聽器的依賴。
• 提供對閾值的細粒度控制。

問。路口觀察器如何運作？

Intersection Observer API 會在發生以下任一情況時觸發回呼：

1. 目標元素與裝置的視口或指定的根元素相交。

2. 觀察者第一次開始觀察目標元素。

路口觀察器中的選項

• root：用作檢查可見性的視口的元素。如果未指定，則預設為瀏覽器的視窗。

• rootMargin：根周圍的邊距，指定為字串（例如「10px 20px」）。擴大或縮小可觀察區域。

• 閾值：0 到 1 之間的值（或值數組），指示觸發回調所需的可見性百分比。

問。交集是如何計算的？

Intersection Observer API 使用矩形來計算交叉區域：

• 不規則形狀的元素被視為適合完全包圍它們的最小矩形。

• 對於部分可見的元素，使用包含所有可見部分的最小矩形。無論元素形狀或可見性如何，這都可以確保測量的一致性。

基本文法

<div>



<p><strong>JS Syntax</strong><br>
</p>

<pre class="brush:php;toolbar:false">
const target = document.querySelector('#something')

const observer = new MutationObserver(function(mutations){
    mutations.forEach(function(mutation){
    console.log('Mutation detected:', mutation)
  })
})

const config = {attributes:true, childList:true, characterData:true, subtree:true}

observer.observe(target,config)

//observer.disconnect() - to stop observing

用例：

• 延遲載入圖片或影片。
• 實現無限滾動。
• 追蹤使用者對特定元素的參與度。

進階功能：

• 多個閾值：使用閾值數組觀察部分可見度。
• 根邊距：擴展視口的邊界以進行早期偵測。

歷史API

概述：

History API 使 Web 應用程式能夠操作瀏覽器的會話歷史記錄。它允許添加、替換或修改條目，而無需重新加載頁面，這是單頁應用程式 (SPA) 的基石。

主要特點：

• 使用pushState和replaceState來管理歷史堆疊。
• 使用 popstate 監聽導覽事件。
• 更新瀏覽器的網址列，無需重新載入整頁。

基本文法：

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Element is visible in the viewport.')
      // Optionally stop observing
      observer.unobserve(entry.target)
    }
  })
})

// Target elements to observe
const targetElement = document.querySelector('.lazy-load')

// Start observing
observer.observe(targetElement)

用例：

• 使用動態路由建構 SPA。
• 透過瀏覽器導航管理應用程式狀態。
• 建立自訂導航體驗。
• 重要提示：
• 確保舊版瀏覽器有適當的回退。
• 與 URL 參數結合以獲得更好的 SEO。

組合這些 API

這些 API 可以協同工作來建立複雜的 Web 應用程式。例如：

• 使用MutationObserver來監控動態DOM變化。
• 實作 IntersectionObserver 來透過 DOM 變更新增 延遲載入內容。
• 利用歷史API在應用程式內提供無縫導航。

範例用例：

當使用者向下滾動（無限滾動）時，部落格應用程式會動態載入貼文。它還會更新 URL 以反映當前帖子，而無需重新加載頁面，從而確保更好的用戶體驗並改善 SEO。

<div>



<p><strong>JS Syntax</strong><br>
</p>

<pre class="brush:php;toolbar:false">
const target = document.querySelector('#something')

const observer = new MutationObserver(function(mutations){
    mutations.forEach(function(mutation){
    console.log('Mutation detected:', mutation)
  })
})

const config = {attributes:true, childList:true, characterData:true, subtree:true}

observer.observe(target,config)

//observer.disconnect() - to stop observing

結論

MutationObserver、IntersectionObserver 和 History API 為動態和互動式 Web 應用程式提供了強大的本機解決方案。透過了解它們的功能並有效地整合它們，開發人員可以建立高效能且功能豐富的應用程序，而無需嚴重依賴外部庫。