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

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

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

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

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

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

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

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

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

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

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

 const node = document.queryselector（'。某個(gè)元素'）

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

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

容易得多！

斷開觀察者的連接

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

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

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

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

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

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

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

obs.disconnect（）

MutationObserver的觀察選項(xiàng)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 const node = document.queryselector（'。某個(gè)元素'）

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

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

斷開交叉點(diǎn)觀察者

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

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

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

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

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

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

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

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

IntersectionObserver選項(xiàng)

如果您想知道，IntersectionObserver提供了三個(gè)選項(xiàng)：

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

這是一篇文章，可幫助您了解IntersectionObserver選項(xiàng)。

在實(shí)踐中通過(guò)Splendid Labz在實(shí)踐中使用它

Splendid Labz的Utils庫(kù)包含ResizeObserver，MutationObserver和IntersectionObserver。

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

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

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

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

除了我們上面編寫的代碼（在上一篇文章中）之外，Splendid Labz中的每個(gè)觀察者方法還能夠讓您一次觀察並停止觀察多個(gè)元素（除了MutationObserver，因?yàn)樗鼪](méi)有未觀察到的方法）

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

//一次不參加兩個(gè)項(xiàng)目
const subset = [項(xiàng)目[0]，項(xiàng)目[1]]
obs.unobserve（子集）

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

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

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

（我在寫作時(shí)仍在製作文檔，以便看起來(lái)相對(duì)空。

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

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

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

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

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

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