上下文感知的網絡組件比您想像的要容易

本文探討了Web組件的經常被忽視的生命週期回調，展示了它們如何啟用上下文感知的元素。我們將構建一個對環境反應的Web組件，展示這些功能的功能。

系列概述

本文是簡化Web組件開發的系列的一部分：

• 網絡組件：比您想像的要容易
• 交互式網絡組件：比您想像的要容易
• 在WordPress中使用Web組件：比您想像的要容易
• 帶有Web組件的內置元素：比您想像的要容易
• 上下文感知的Web組件：比您想像的要容易（本文）
• Web組件偽級和偽元素：比您想像的要容易

Web組件生命週期回調

四個關鍵回調管理Web組件的生命週期：

• connectedCallback ：將元素添加到DOM時發射。
• disconnectedCallback ：從DOM中刪除元素時被觸發。
• adoptedCallback ：將元素移至新文檔時被解僱。
• attributeChangedCallback ：當觀察到的屬性更改時被解僱。

讓我們以一個實用的例子來說明這些。

世界末日後的人組成部分

我們將創建一個<postapocalyptic-person></postapocalyptic-person>成分。每個人都是人類或殭屍，由.human或.zombie班級確定其父元素。該組件將使用陰影DOM顯示適當的圖像。

定義（定義）（
  “昆蟲世界後的人”，
  類擴展htmlelement {
    constructor（）{
      極好的（）;
      this.shadowroot = this.attachshadow（{mode：“ open”}）;
    }
    // ...生命週期回調將在此處添加...
  }
）；

我們最初的HTML：

<div class="humans">
  <postapocalyptic-person></postapocalyptic-person>
</div>
<div class="zombies">
  <postapocalyptic-person></postapocalyptic-person>
</div>

使用connectedCallback

當connectedCallback被調用<postapocalyptic-person></postapocalyptic-person>被添加到頁面。我們將使用它添加圖像：

 connectedCallback（）{
  const image = document.createelement（“ img”）;
  if（this.parentnode.classlist.contains（“人類”））{
    image.src =“ https://assets.codepen.io/1804713/lady.png”;
  } else if（this.parentnode.classlist.contains（“ Zombies”））{
    image.src =“ https://assets.codepen.io/1804713/ladyz.png”;
  }
  this.shadowroot.appendchild（image）;
}

這樣可以確保根據父母的類顯示正確的圖像。注意： connectedCallback可以發射多次；使用this.isConnected結合以檢查連接狀態。

計算與connectedCallback人

讓我們添加按鈕添加/刪除人員並跟踪計數：

<div>
  <button id="addbtn">添加一個人</button>
  <button id="rmvbtn">刪除人</button>
  <br>人類： <span id="human-count">0</span>
  殭屍： <span id="zombie-count">0</span>
</div>

按鈕事件聽眾：

 // ...（添加/刪除人邏輯）...

更新connectedCallback以更新計數：

 connectedCallback（）{
  // ...（圖像邏輯）...
  //基於圖像源的更新計數
}

使用disconnectedCallback計數更新計數

當一個人被刪除時， disconnectedCallback折筆會減少。我們將使用圖像源用作類型的代理：

 disconnectedCallback（）{
  const image = this.shadowroot.queryselector（'img'）;
  //基於圖像源的減少計數
}

帶有adoptedCallback和attributeChangedCallback小丑檢測

我們將介紹隱藏小丑的可能性，將其移至<iframe></iframe>使用adoptedCallback並用attributeChangedCallback揭示它們。為簡潔起見，省略了此高級示例的詳細信息，但是核心概念涉及使用adoptedCallback來檢測何時將組件移至新文檔，並attributeChangedCallback屬於屬性更改，從而相應地更新圖像。

這說明了生命週期回調如何為創建動態和上下文感知的Web組件提供強大的工具，從而使它們更加通用和響應。

以上是上下文感知的網絡組件比您想像的要容易的詳細內容。更多資訊請關注PHP中文網其他相關文章！