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

變異觀察者

概述：

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

主要特點：

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

問。 MutationObserver 是如何工作的？

MutationObserver 實例是使用回調(diào)函數(shù)創(chuàng)建的，每當 DOM 中發(fā)生指定的更改時就會觸發(fā)該回調(diào)函數(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 元素。
• 實現(xiàn) DOM 更改的自定義行為。
• 監(jiān)控第三方庫的修改。

路口觀察者

概述：

IntersectionObserver 是一個異步觀察目標元素相對于根容器或視口的可見性變化的接口。它通常用于延遲加載、無限滾動和分析。

主要特點：

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

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

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

1. 目標元素與設(shè)備的視口或指定的根元素相交。

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

路口觀察器中的選項

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

• 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 應用程序能夠操作瀏覽器的會話歷史記錄。它允許添加、替換或修改條目，而無需重新加載頁面，這是單頁應用程序 (SPA) 的基石。

主要特點：

• 使用pushState和replaceState管理歷史堆棧。
• 使用 popstate 監(jiān)聽導航事件。
• 更新瀏覽器的地址欄，無需重新加載整頁。

基本語法：

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。
• 通過瀏覽器導航管理應用程序狀態(tài)。
• 創(chuàng)建自定義導航體驗。
• 重要提示：
• 確保舊版瀏覽器有適當?shù)幕赝恕?/li>
• 與 URL 參數(shù)結(jié)合以獲得更好的 SEO。

組合這些 API

這些 API 可以協(xié)同工作來創(chuàng)建復雜的 Web 應用程序。例如：

• 使用MutationObserver來監(jiān)控動態(tài)DOM變化。
• 實現(xiàn) IntersectionObserver 來通過 DOM 更改添加 延遲加載內(nèi)容。
• 利用歷史API在應用程序內(nèi)提供無縫導航。

示例用例：

當用戶向下滾動（無限滾動）時，博客應用程序會動態(tài)加載帖子。它還會更新 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

結(jié)論

MutationObserver、IntersectionObserver 和 History API 為動態(tài)和交互式 Web 應用程序提供了強大的本機解決方案。通過了解它們的功能并有效地集成它們，開發(fā)人員可以構(gòu)建高性能且功能豐富的應用程序，而無需嚴重依賴外部庫。

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