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

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

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

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

在實踐中，上述步驟看起來像ResizeObserver一樣。

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

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

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

//步驟4（可選）：斷開觀察者
observer.disconnect（element）

在明確了步驟后，這看起來很清楚（可以理解）。但沒有評論，它看起來像是一團糟：

 cont observer = new resizeObserver（observerfn）

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

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

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

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

讓我們從resizeObserver開始，因為它是其中最簡單的。首先，我們編寫一個函數(shù)，該函數(shù)封裝了我們創(chuàng)建的resizeObserver。

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

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

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

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

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

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

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

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

  observer.observe（node）;
}

這使該功能更具通用性，因為我們現(xiàn)在可以將任何元素傳遞到其中。

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

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

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

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

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

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

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

  observer.observe（node）;
}

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

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

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

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

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

  observer.observe（element）;
}

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

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

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

 function resizeObserver（element，options = {}）{
  const {callback} =選項
  cont observer = new resizeObserver（observerfn）

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

  observer.observe（element）;
}

然后，我們可以使用ResizeObserver。

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

觀察者也可以選擇一個選項

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

因此，我們需要從選項對象中提取這些選項并傳遞它們進行觀察。

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

可選：活動聽眾模式

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

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

  // ...
}

然后，我們可以收聽像這樣的評估大小事件：

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

同樣，這是可選的。

不觀察元素

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

• 未觀察：停止觀察一個元素
• 斷開：停止觀察所有元素

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

兩種方法都對我們到目前為止所建造的東西做同樣的事情，因為我們只允許resizeObserver觀察一個元素。因此，選擇您喜歡停止觀察元素的任何方法。

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

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

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

代碼段

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

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

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

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

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

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

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

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

獎勵：出色的Labz ResizeObserver能夠一次觀察多個元素。它也可以一次毫無訪問。

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

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

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

重構(gòu)非常有用（而且很重要），因為它的過程使我們可以創(chuàng)建易于使用或維護的代碼。

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

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

就是這樣！

希望您喜歡這件作品，并在下一個見到您。

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