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

變異觀察者

概述：

MutationObserver 介面監(jiān)視 DOM 樹中的更改，替換現(xiàn)已棄用的 Mutation Events。它可以檢測節(jié)點何時新增、刪除或修改，使其成為動態(tài)應(yīng)用程式的必備工具。

主要特點：

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

問。 MutationObserver 是如何運作的？

MutationObserver 實例是使用回呼函數(shù)建立的，每當(dāng) DOM 中發(fā)生指定的變更時就會觸發(fā)該回呼函數(shù)。

MutationObserver 中的選項

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

• childList：監(jiān)視子節(jié)點的新增或刪除。

• 屬性：追蹤目標節(jié)點屬性的變更。

• attributeFilter：限制對指定屬性的監(jiān)控。

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

• characterData：觀察節(jié)點文字內(nèi)容的變化。

• characterDataOldValue：捕獲文字內(nèi)容修改前的先前值。

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

用例：

• 動態(tài)更新 UI 元素。
• 實作 DOM 變更的自訂行為。
• 監(jiān)控第三方函式庫的修改。

路口觀察者

概述：

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

主要特點：

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

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

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

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

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

路口觀察器中的選項

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

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

• 閾值：0 到 1 之間的值（或值數(shù)組），指示觸發(fā)回調(diào)所需的可見性百分比。

問。交集是如何計算的？

Intersection Observer API 使用矩形來計算交叉區(qū)域：

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

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

基本文法

<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

用例：

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

進階功能：

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

歷史API

概述：

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

主要特點：

• 使用pushState和replaceState來管理歷史堆疊。
• 使用 popstate 監(jiān)聽導(dǎo)覽事件。
• 更新瀏覽器的網(wǎng)址列，無需重新載入整頁。

基本文法：

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)

用例：

• 使用動態(tài)路由建構(gòu) SPA。
• 透過瀏覽器導(dǎo)航管理應(yīng)用程式狀態(tài)。
• 建立自訂導(dǎo)航體驗。
• 重要提示：
• 確保舊版瀏覽器有適當(dāng)?shù)幕赝恕?
• 與 URL 參數(shù)結(jié)合以獲得更好的 SEO。

組合這些 API

這些 API 可以協(xié)同工作來建立複雜的 Web 應(yīng)用程式。例如：

• 使用MutationObserver來監(jiān)控動態(tài)DOM變化。
• 實作 IntersectionObserver 來透過 DOM 變更新增 延遲載入內(nèi)容。
• 利用歷史API在應(yīng)用程式內(nèi)提供無縫導(dǎo)航。

範(fàn)例用例：

當(dāng)使用者向下滾動（無限滾動）時，部落格應(yīng)用程式會動態(tài)載入貼文。它還會更新 URL 以反映當(dāng)前帖子，而無需重新加載頁面，從而確保更好的用戶體驗並改善 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

結(jié)論

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

以上是原生 JavaScript API 簡介：MutationObserver、IntersectionObserver 與 History API的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！