本文探討了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中文網其他相關文章!