前言

何谓”生命周期“？顾名思义，生命周期就是指一个物体从产生前到沦亡后的整个过程，当然，不同物体的生命周期具体阶段划分可能不太一样。

咱们在应用前端组件框架的时候，都晓得每个组件都有各自的生命周期，明确了组件生命周期后，开发者就能够在组件的不同生命周期执行不同的代码逻辑，从而达到治理组件的作用。

为了使 Custom Elements 在应用上更加灵便，它也有”生命周期“回调函数，能够让开发者定义好在组件不同生命期间能够被执行的办法。

Custom Elements 生命周期划分

在 Custom Elements 的构造函数中，能够指定多个不同的回调函数，它们将会在元素的不同生命期间被调用：

  • connectedCallback：当 Custom Elements首次被插入文档DOM时，被调用。
  • disconnectedCallback：当 Custom Elements 从文档DOM中删除时，被调用。
  • adoptedCallback：当 Custom Elements 被挪动到新的文档时，被调用。
  • attributeChangedCallback: 当 Custom Elements 减少、删除、批改本身属性时，被调用。
留神：自定义元素的生命周期回调函数是被应用在它的构造函数中的。

生命周期回调函数的应用

首先看一下成果：

这里须要留神的是：adoptedCallback 回调只有在将自定义元素挪动到新文档（个别是 iframe）中时才会被触发。

代码如下：

<!--index.html--><head>    <style>        body {            padding: 50px;        }        custom-square {            margin: 15px;        }        iframe {            width: 100%;            height: 250px;            overflow: hidden;        }    </style></head><body>    <h1>Custom Elements 生命周期</h1>    <div>        <button class="add">追加 Square 到 DOM</button>        <button class="update">扭转 Square 的属性</button>        <button class="remove">移除 Square 元素</button>        <button class="move">挪动 Square 到 Iframe</button>    </div>    <iframe src="./other.html"></iframe>    <script src="./square.js"></script>    <script src="./index.js"></script></body><!--other.html--><body>    <h1>这是 other.html</h1></body>
// square.jsfunction updateStyle(elem) {    const shadow = elem.shadowRoot;    shadow.querySelector("style").textContent = `      div {        width: ${elem.getAttribute("l")}px;        height: ${elem.getAttribute("l")}px;        background-color: ${elem.getAttribute("c")};      }    `;}class Square extends HTMLElement {    static get observedAttributes() {        return ["c", "l"];    }    constructor() {        super();        const shadow = this.attachShadow({ mode: "open" });        const div = document.createElement("div");        const style = document.createElement("style");        shadow.appendChild(style);        shadow.appendChild(div);    }    connectedCallback() {        console.log("custom-square 被挂载到页面");        updateStyle(this);    }    disconnectedCallback() {        console.log("custom-square 从页面被移除");    }    adoptedCallback() {        console.log("custom-square 被挪动到新页面");    }    attributeChangedCallback(name, oldValue, newValue) {        console.log("custom-square 属性值被扭转");        updateStyle(this);    }}customElements.define("custom-square", Square);
// index.jsconst add = document.querySelector(".add");const update = document.querySelector(".update");const remove = document.querySelector(".remove");const move = document.querySelector(".move");let square;update.disabled = true;remove.disabled = true;function random(min, max) {    return Math.floor(Math.random() * (max - min + 1) + min);}add.onclick = function () {    // Create a custom square element    square = document.createElement("custom-square");    square.setAttribute("l", "100");    square.setAttribute("c", "red");    document.body.appendChild(square);    update.disabled = false;    remove.disabled = false;    add.disabled = true;};update.onclick = function () {    // Randomly update square's attributes    square.setAttribute("l", random(50, 200));    square.setAttribute("c", `rgb(${random(0, 255)}, ${random(0, 255)}, ${random(0, 255)})`);};remove.onclick = function () {    // Remove the square    document.body.removeChild(square);    update.disabled = true;    remove.disabled = true;    add.disabled = false;};update.onclick = function () {    // Randomly update square's attributes    square.setAttribute("l", random(50, 200));    square.setAttribute("c", `rgb(${random(0, 255)}, ${random(0, 255)}, ${random(0, 255)})`);};move.onclick = function () {    window.frames[0].document.body.appendChild(square);}

结束语

以上就是 Custom Elements 生命周期回调函数的简略应用示例，心愿能对你有所帮忙！

Custom Elements 的回调函数中，adoptedCallback 的应用场景较少，这个须要留神。

~

~ 本文完，感激浏览！

~

学习乏味的常识，结识乏味的敌人，塑造乏味的灵魂！

大家好，我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢送关注，心愿大家多多指教！