上下文感知的网络组件比您想象的要容易

本文探讨了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中文网其他相关文章！