首頁 > web前端 > css教學 > 上下文感知的網絡組件比您想像的要容易

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

William Shakespeare
發布: 2025-03-15 10:25:09
原創
781 人瀏覽過

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

本文探討了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');
  //基於圖像源的減少計數
}
登入後複製

帶有adoptedCallbackattributeChangedCallback小丑檢測

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

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

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

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板