調(diào)整觀察者，突變觀察者和相交觀察者的大小都是比較舊的同行更具性能的好API：

• resizeObserver比調(diào)整大小事件更好
• 突變操作器替代了現(xiàn)在不屑一顧的突變事件
• IntersectionObserver可讓您進(jìn)行某些滾動(dòng)交互，而較少的性能開(kāi)銷(xiāo)。

這三個(gè)觀察者的API非常相似（但它們的差異是我們以后會(huì)遇到的）。要使用觀察者，您必須遵循以下步驟：

1. 使用新關(guān)鍵字創(chuàng)建一個(gè)新的觀察者：該觀察者接收一個(gè)觀察者函數(shù)以執(zhí)行。
2. 對(duì)觀察到的變化做一些事情：這是通過(guò)傳遞到觀察者的觀察者函數(shù)來(lái)完成的。
3. 觀察一個(gè)特定元素：使用觀察方法。
4. （選項(xiàng)）刪除元素：通過(guò)使用Unobserve或disconnect方法。 （取決于您正在使用的觀察者）。

在實(shí)踐中，上述步驟看起來(lái)像ResizeObserver一樣。

 //步驟1：創(chuàng)建一個(gè)新的觀察者
cont observer = new resizeObserver（observerfn）

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

//步驟3：觀察一個(gè)元素
const element = document.queryselector（'＃some-element'）
observer.observe（element）;

//步驟4（可選）：斷開(kāi)觀察者
observer.disconnect（element）

在明確了步驟后，這看起來(lái)很清楚（可以理解）。但沒(méi)有評(píng)論，它看起來(lái)像是一團(tuán)糟：

 cont observer = new resizeObserver（observerfn）

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

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

好消息是：我認(rèn)為我們可以改善觀察者API并使其更易于使用。

調(diào)整大小的觀察者

讓我們從resizeObserver開(kāi)始，因?yàn)樗瞧渲凶詈?jiǎn)單的。首先，我們編寫(xiě)一個(gè)函數(shù)，該函數(shù)封裝了我們創(chuàng)建的resizeObserver。

函數(shù)resizeObserver（）{
  // ...做點(diǎn)什么
}

開(kāi)始重構(gòu)resizeObserver代碼的最簡(jiǎn)單方法是將我們創(chuàng)建的所有內(nèi)容都放入ResizeObserver中。

函數(shù)resizeObserver（）{
  cont observer = new resizeObserver（observerfn）

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

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

接下來(lái)，我們可以將元素傳遞到功能中以使其更簡(jiǎn)單。當(dāng)我們執(zhí)行此操作時(shí)，我們可以消除document.queryselector系列。

函數(shù)resizeObserver（element）{
  cont observer = new resizeObserver（observerfn）

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

  observer.observe（node）;
}

這使該功能更具通用性，因?yàn)槲覀儸F(xiàn)在可以將任何元素傳遞到其中。

 //使用resizeObserver函數(shù)
const node = document.queryselector（'＃some-element'）
cont obs = resizeObserver（節(jié)點(diǎn)）

這已經(jīng)比每次使用時(shí)從頭開(kāi)始編寫(xiě)所有ResizeObserver代碼要容易得多。

接下來(lái)，很明顯，我們必須將觀察者函數(shù)傳遞給回調(diào)。因此，我們可以做到這一點(diǎn)：

 //不好
function resizeObserver（node，observerfn）{
  cont observer = new resizeObserver（observerfn）
  observer.observe（node）;
}

由于觀察者始終是相同的 - 它可以通過(guò)條目循環(huán)并在每個(gè)條目上行動(dòng) - 我們可以保留觀察者并通過(guò)回調(diào)進(jìn)行回調(diào)以在調(diào)整元素大小時(shí)執(zhí)行任務(wù)。

 // 更好的 
function resizeObserver（node，callback）{
  cont observer = new resizeObserver（observerfn）

  函數(shù)observerfn（條目）{
    （讓條目進(jìn)入）{
      回調(diào)（條目）
    }
  }

  observer.observe（node）;
}

為了使用此功能，我們可以將回調(diào)傳遞到ResizeObserver中 - 這使得resizeObserver的操作與我們已經(jīng)熟悉的事件偵聽(tīng)器有些類(lèi)似。

 //使用resizeObserver函數(shù)
const node = document.queryselector（'＃some-element'）
cont obs = resizeObserver（node，entry => {
  //每條條目做點(diǎn)事
}））

我們可以通過(guò)提供條目和條目來(lái)使回調(diào)更好。傳遞額外變量的性能沒(méi)有打擊，因此這里沒(méi)有任何危害提供更大的靈活性。

函數(shù)resizeObserver（element，callback）{
  cont observer = new resizeObserver（observerfn）

  函數(shù)observerfn（條目）{
    （讓條目進(jìn)入）{
      回調(diào)（{entries，條目}）
    }
  }

  observer.observe（element）;
}

然后，如果需要，我們可以在回調(diào)中獲取條目。

 //使用resizeObserver函數(shù)
// ...
cont obs = resizeObserver（node，（{entries，entries}）=> {
  // ...
}））

接下來(lái)，將回調(diào)作為選項(xiàng)參數(shù)而不是變量傳遞是有意義的。這將使resizeObserver與我們將在下一篇文章中創(chuàng)建的突變處理器和IntersectionObserver函數(shù)更加一致。

 function resizeObserver（element，options = {}）{
  const {callback} =選項(xiàng)
  cont observer = new resizeObserver（observerfn）

  函數(shù)observerfn（條目）{
    （讓條目進(jìn)入）{
        回調(diào)（{entries，條目}）
      }
  }

  observer.observe（element）;
}

然后，我們可以使用ResizeObserver。

 cont obs = resizeObserver（node，{
  回調(diào)（{entries，entries}）{
    //做點(diǎn)什么...
  }
}））

觀察者也可以選擇一個(gè)選項(xiàng)

resizeObserver的觀察方法可以采用一個(gè)包含一個(gè)屬性框的選項(xiàng)對(duì)象。這決定了觀察者是否會(huì)觀察到內(nèi)容框，邊框框或設(shè)備像素盒框的更改。

因此，我們需要從選項(xiàng)對(duì)象中提取這些選項(xiàng)并傳遞它們進(jìn)行觀察。

 function resizeObserver（element，options = {}）{
  const {呼叫，... opts} =選項(xiàng)
  // ...
  observer.observe（元素，opts）;
}

可選：活動(dòng)聽(tīng)眾模式

我更喜歡使用回調(diào)，因?yàn)樗芎?jiǎn)單。但是，如果您想使用標(biāo)準(zhǔn)事件偵聽(tīng)器模式，我們也可以這樣做。這里的訣竅是發(fā)出一個(gè)事件。由于已經(jīng)進(jìn)行了調(diào)整大小，因此我們將其稱(chēng)為“調(diào)整大小”。

 function resizeObserver（element，options = {}）{
  // ...
  函數(shù)observerfn（條目）{
    （讓條目進(jìn)入）{
      如果（回調(diào)）回調(diào)（{entries，entries}）
      別的 {
        node.dispatchevent（
          新的CustomeVent（'resize-obs'，{
            詳細(xì)信息：{條目，條目}，
          }），
        ）
      }
    }
  }

  // ...
}

然后，我們可以收聽(tīng)像這樣的評(píng)估大小事件：

 cont obs = resizeObserver（節(jié)點(diǎn)）
node.addeventlistener（'resize-obs'，event => {
  const {條目，條目} = event.detail
}））

同樣，這是可選的。

不觀察元素

最后一步是允許用戶(hù)在不再需要觀察時(shí)停止觀察元素。為此，我們可以返回兩個(gè)觀察者方法：

• 未觀察：停止觀察一個(gè)元素
• 斷開(kāi)：停止觀察所有元素

function resizeObserver（node，options = {}）{
  // ...
  返回 {
    unobserve（node）{
      observer.unobserve（節(jié)點(diǎn)）
    }，，
    
    disconnect（）{
      observer.disconnet（）
    }
  }
}

兩種方法都對(duì)我們到目前為止所建造的東西做同樣的事情，因?yàn)槲覀冎辉试SresizeObserver觀察一個(gè)元素。因此，選擇您喜歡停止觀察元素的任何方法。

 cont obs = resizeObserver（node，{
  回調(diào)（{entries，entries}）{
    //做點(diǎn)什么...
  }
}））

//停止觀察所有元素 
obs.disconect（）

這樣，我們已經(jīng)完成了為ResizeObserver（resizeObserver函數(shù)）創(chuàng)建更好的API。

代碼段

這是我們?yōu)閞esizeObserver編寫(xiě)的代碼

導(dǎo)出函數(shù)resizeObserver（node，options = {}）{
  cont observer = new resizeObserver（observerfn）
  const {呼叫，... opts} =選項(xiàng)

  函數(shù)observerfn（條目）{
    對(duì)于（條目的const條目）{
      //回調(diào)模式
      如果（回調(diào)）回調(diào)（{{條目，條目，觀察者}）
      //事件聽(tīng)眾模式
      別的 {
        node.dispatchevent（
          新的CustomeVent（'resize-obs'，{
            詳細(xì)信息：{條目，條目，觀察者}，
          }））
        ）
      }
    }
  }
 
  observer.observe（節(jié)點(diǎn)）

  返回 {
    unobserve（node）{
      observer.unobserve（節(jié)點(diǎn)）
    }，，
    
    disconnect（）{
      observer.disconnect（）
    }
  }
}

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

Splendid Labz擁有一個(gè)Utils庫(kù)，其中包含我們上面制作的ResizeObserver的增強(qiáng)版本。如果您想使用增強(qiáng)的觀察者，或者您不想將觀察者代碼復(fù)制到項(xiàng)目中，則可以使用它。

從'@Splendidlabz/utils/dom'導(dǎo)入{resizeObserver}

const node = document.queryselector（'。某個(gè)元素'）
cont obs = resizeObserver（node，{
  回調(diào)（{entries，entries}）{
    / *在這里做您想做的事 */
  }
}））

獎(jiǎng)勵(lì)：出色的Labz ResizeObserver能夠一次觀察多個(gè)元素。它也可以一次毫無(wú)訪問(wèn)。

 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（子集）

發(fā)現(xiàn)重構(gòu)有幫助嗎？

重構(gòu)非常有用（而且很重要），因?yàn)樗倪^(guò)程使我們可以創(chuàng)建易于使用或維護(hù)的代碼。

如果您發(fā)現(xiàn)這種重構(gòu)運(yùn)動(dòng)有用，那么您可能會(huì)喜歡我在學(xué)習(xí)JavaScript課程中向嶄露頭角的開(kāi)發(fā)人員教JavaScript。

在本課程中，您將學(xué)會(huì)構(gòu)建20個(gè)現(xiàn)實(shí)世界中的組件。對(duì)于每個(gè)組件，我們開(kāi)始簡(jiǎn)單。然后，我們添加功能，您將在此過(guò)程中學(xué)習(xí)重構(gòu)。

就是這樣！

希望您喜歡這件作品，并在下一個(gè)見(jiàn)到您。

以上是調(diào)整大小觀察者更好的API的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！