本文探討了Web組件的經(jīng)常被忽視的生命週期回調(diào)，展示了它們?nèi)绾螁⒂蒙舷挛母兄脑?。我們將?gòu)建一個(gè)對(duì)環(huán)境反應(yīng)的Web組件，展示這些功能的功能。

系列概述

本文是簡(jiǎn)化Web組件開發(fā)的系列的一部分：

• 網(wǎng)絡(luò)組件：比您想像的要容易
• 交互式網(wǎng)絡(luò)組件：比您想像的要容易
• 在WordPress中使用Web組件：比您想像的要容易
• 帶有Web組件的內(nèi)置元素：比您想像的要容易
• 上下文感知的Web組件：比您想像的要容易（本文）
• Web組件偽級(jí)和偽元素：比您想像的要容易

Web組件生命週期回調(diào)

四個(gè)關(guān)鍵回調(diào)管理Web組件的生命週期：

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

讓我們以一個(gè)實(shí)用的例子來說明這些。

世界末日後的人組成部分

我們將創(chuàng)建一個(gè)<postapocalyptic-person></postapocalyptic-person>成分。每個(gè)人都是人類或殭屍，由.human或.zombie班級(jí)確定其父元素。該組件將使用陰影DOM顯示適當(dāng)?shù)膱D像。

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

我們最初的HTML：

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

使用connectedCallback

當(dāng)connectedCallback被調(diào)用<postapocalyptic-person></postapocalyptic-person>被添加到頁(yè)面。我們將使用它添加圖像：

 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）;
}

這樣可以確保根據(jù)父母的類顯示正確的圖像。注意： connectedCallback可以發(fā)射多次；使用this.isConnected結(jié)合以檢查連接狀態(tài)。

計(jì)算與connectedCallback人

讓我們添加按鈕添加/刪除人員並跟蹤計(jì)數(shù)：

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

按鈕事件聽眾：

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

更新connectedCallback以更新計(jì)數(shù)：

 connectedCallback（）{
  // ...（圖像邏輯）...
  //基於圖像源的更新計(jì)數(shù)
}

使用disconnectedCallback計(jì)數(shù)更新計(jì)數(shù)

當(dāng)一個(gè)人被刪除時(shí)， disconnectedCallback折筆會(huì)減少。我們將使用圖像源用作類型的代理：

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

帶有adoptedCallback和attributeChangedCallback小丑檢測(cè)

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

這說明了生命週期回調(diào)如何為創(chuàng)建動(dòng)態(tài)和上下文感知的Web組件提供強(qiáng)大的工具，從而使它們更加通用和響應(yīng)。

以上是上下文感知的網(wǎng)絡(luò)組件比您想像的要容易的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！