在上一篇文章中，我向您展示瞭如何將評估大小API重構(gòu)為更簡單的方法：

 //從中
cont observer = new resizeObserver（observerfn）

函數(shù)observerfn（條目）{
  （讓條目進(jìn)入）{
    //每條條目做點事
  }
}

const element = document.queryselector（'＃some-element'）
observer.observe（element）;

 //對此 
const node = document.queryselector（'＃some-element'）
cont obs = resizeObserver（node，{
  回調(diào)（{entry}）{
    //每條條目做點事
  }
}））

今天，我們將為突變處理器和IntersectionObserver做同樣的事情。

重構(gòu)突變觀察者

突變操作器的API與ResizeObserver的API幾乎相同。因此，我們實際上可以復(fù)制為resizeObserver編寫的整個代碼列表，然後將其複製到MutationObserver。

導(dǎo)出函數(shù)stutobserver（node，options = {}）{
  cont觀察者=新的突變操作器（觀察者）
  const {呼叫，... opts} =選項
  observer.observe（節(jié)點，opts）

  函數(shù)observerfn（條目）{
    對於（條目的const條目）{
      //回調(diào)模式
      if（options.callback）options.callback（{條目，條目，觀察者}）
      //事件聽眾模式
      別的 {
        node.dispatchevent（
          新的CustomeVent（“突變”，{
            詳細(xì)信息：{條目，條目，觀察者}，
          }））
        ）
      }
    }
  }
}

現(xiàn)在，您可以使用帶有回調(diào)模式或事件偵聽器模式的MutationObserver。

 const node = document.queryselector（'。某個元素'）

//回調(diào)模式 
cont obs = mutationobserver（node，{
  回調(diào)（{entries，entries}）{
    //在每個條目中做您想做的事
  }
}））

//事件聽眾模式
node.addeventlistener（'stutate'，event => {
  const {entry} = event.detail
  //在每個條目中做您想做的事
}））

容易得多！

斷開觀察者的連接

與有兩種停止觀察元素的方法的resizeObserver不同，突變處理器只有一種斷開方法。

導(dǎo)出函數(shù)stutobserver（node，options = {}）{
  // ... 
  返回 {
    disconnect（）{
      observer.disconnect（）
    }
  }
}

但是，MutationObserverhas atakerecordsmethod使您可以在斷開連接之前獲得未經(jīng)處理的記錄。由於我們應(yīng)該在斷開連接之前武申，讓我們在斷開連接中使用它。

要創(chuàng)建一個完整的API，我們也可以返回此方法。

導(dǎo)出函數(shù)stutobserver（node，options = {}）{
  // ... 
  返回 {
    // ...
    disconnect（）{
      const記錄= observer.takerecords（）
      observer.disconnect（）
      if（records.length> 0）觀察者（記錄）
    }
  }
}

現(xiàn)在，我們可以通過斷開連接輕鬆斷開突變觀察者的連接。

 const node = document.queryselector（'。某個元素'）
cont obs = mutationobserver（/ * ... */）

obs.disconnect（）

MutationObserver的觀察選項

如果您想知道，MutationObserver的觀察方法可以採用7種選??項。他們每個人都決定要觀察什麼，並且它們都默認(rèn)為false。

• 子樹：監(jiān)視整個節(jié)點的子樹
• 兒童列表：加法或刪除兒童元素的監(jiān)視。如果子樹是正確的，則監(jiān)視所有後代元素。
• 屬性：更改屬性的監(jiān)視
• attributeFilter：要監(jiān)視的特定屬性數(shù)組
• attributeOldValue：是否已更改了先前的屬性值
• 角色達(dá)塔：角色數(shù)據(jù)更改的監(jiān)視
• targeDataOldValue：是否記錄先前的字符數(shù)據(jù)值

重構(gòu)交叉點觀察者

相交手術(shù)器的API與其他觀察者相似。同樣，您必須：

1. 創(chuàng)建一個新的觀察者：使用新關(guān)鍵字。該觀察者採用觀察者函數(shù)進(jìn)行執(zhí)行。
2. 對觀察到的變化做一些事情：這是通過傳遞到觀察者的觀察者函數(shù)來完成的。
3. 觀察一個特定元素：使用觀察方法。
4. （選項）請訪問元素：通過使用Unobserve或斷開方法（取決於您使用的觀察者）。

但是IntersectionObserver要求您在步驟1中傳遞選項（而不是步驟3）。因此，這是使用InterSectionObserver API的代碼。

 //步驟1：創(chuàng)建一個新的觀察者並傳遞相關(guān)選項
const options = {//....*/}
cont觀察者=新的IntersectionObserver（觀察者，選項）

//步驟2：對觀察到的更改做點什麼
函數(shù)observerfn（條目）{
  對於（條目的const條目）{
    //進(jìn)入條目
  }
}

//步驟3：觀察元素
const element = document.queryselector（'＃some-element'）
observer.observe（元素）

//步驟4（可選）：使用它完成後，請斷開觀察者
observer.disconnect（element）

由於代碼是相似的，因此我們還可以復(fù)制我們?yōu)橥蛔兲幚砥骶帉懙拇a中的代碼中的相交器。這樣做時，我們必須記住將選項傳遞到IntersectionObserver而不是觀察方法中。

導(dǎo)出函數(shù)stutobserver（node，options = {}）{
  const {呼叫，... opts} =選項
  cont Observer =新的突變操作器（觀察者，選擇）
  observer.observe（節(jié)點）

  函數(shù)observerfn（條目）{
    對於（條目的const條目）{
      //回調(diào)模式
      if（options.callback）options.callback（{條目，條目，觀察者}）
      //事件聽眾模式
      別的 {
        node.dispatchevent（
          新的CustomeVent（“ Intersect”，{
            詳細(xì)信息：{條目，條目，觀察者}，
          }））
        ）
      }
    }
  }
}

現(xiàn)在，我們可以將IntersectionObserver使用相同的易於使用的API使用：

 const node = document.queryselector（'。某個元素'）

//回調(diào)模式 
cont obs = InterSectionObserver（node，{
  回調(diào)（{entries，entries}）{
    //在每個條目中做您想做的事
  }
}））

//事件聽眾模式
node.addeventlistener（'Intersect'，event => {
  const {entry} = event.detail
  //在每個條目中做您想做的事
}））

斷開交叉點觀察者

相互作用Observer的方法是ResizeObserver和MutationObserver的結(jié)合。它有四種方法：

• 觀察：觀察一個元素
• 未觀察：停止觀察一個元素
• 斷開：停止觀察所有元素
• TakeRecords：獲得未經(jīng)處理的記錄

因此，我們可以結(jié)合使用ResizeObserver和MutationObserver編寫的方法：

導(dǎo)出函數(shù)InterSectionObserver（node，options = {}）{
  // ...
  返回 {
    unobserve（node）{
      observer.unobserve（節(jié)點）
    }，，

    disconnect（）{
      //在斷開連接之前記錄記錄。
      const記錄= observer.takerecords（）
      observer.disconnect（）
      if（records.length> 0）觀察者（記錄）
    }，，
    
    takerecords（）{
      返回observer.takerecords（）
    }，，
  }
}

現(xiàn)在，我們可以停止使用Unobserve或斷開方法觀察。

 const node = document.queryselector（'。某個元素'）
cont obs = IntersectionObserver（節(jié)點，/*....* /）

//斷開觀察者
obs.disconnect（）

IntersectionObserver選項

如果您想知道，IntersectionObserver提供了三個選項：

• 根：用於檢查觀察到的元素是否可見的元素
• rootmargin：讓您從根邊緣指定偏移量
• 閾值：確定何時記錄觀察者條目

這是一篇文章，可幫助您了解IntersectionObserver選項。

在實踐中通過Splendid Labz在實踐中使用它

Splendid Labz的Utils庫包含ResizeObserver，MutationObserver和IntersectionObserver。

如果您不想將上述摘要復(fù)製到每個項目中，則可以使用它們。

進(jìn)口 { 
  resizeObserver， 
  交叉手術(shù)器， 
  突變行為 
}來自'Splendidlabz/utils/dom'

const Mode = document.queryselector（'Some-Element'）

const resizeObs = resizeObserver（node， / * ... * /）
const InterSectObs = InterSectionObserver（節(jié)點， / * ... * /）
cont untateObs = mutationObserver（節(jié)點， / * ... * /）

除了我們上面編寫的代碼（在上一篇文章中）之外，Splendid Labz中的每個觀察者方法還能夠讓您一次觀察並停止觀察多個元素（除了MutationObserver，因為它沒有未觀察到的方法）

 const項目= document.queryselectorall（'。元素'）
cont obs = resizeObserver（項目，{
  回調(diào)（{entries，entries}）{
    / *在這裡做您想做的事 */
  }
}））

//一次不參加兩個項目
const subset = [項目[0]，項目[1]]
obs.unobserve（子集）

因此，它可能更容易使用我已經(jīng)為您創(chuàng)建的功能。 ??

無恥的插頭：Splendid Labz包含大量有用的實用程序 - 用於CSS，JavaScript，Astro和Svelte - 我在過去幾年中創(chuàng)建的。

我已經(jīng)把它們都停在了出色的實驗室中，因此我不再需要在互聯(lián)網(wǎng)上搜索大多數(shù)網(wǎng)絡(luò)項目的有用功能。如果您看看，您可能會享受我遵守的東西！

（我在寫作時仍在製作文檔，以便看起來相對空。

學(xué)習(xí)重構(gòu)的東西

如果您喜歡我解釋如何重構(gòu)觀察者API的方式，您可能會發(fā)現(xiàn)我如何教JavaScript有趣。

在我的JavaScript課程中，您將學(xué)習(xí)建立20個現(xiàn)實生活中的組件。我們將從簡單開始，添加功能和重構(gòu)。

重構(gòu)是一種學(xué)習(xí)的重要技能 - 在這裡，我確保您將其鞏固到大腦中。

就是這樣！希望您閱讀這篇文章很開心！

以上是交叉和突變觀察者的更好的API的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！