Web Components系列(七) ——自定義元件的生命週期

程式設計三昧發表於2022-02-13
Web元件

生命週期.001

前言

何謂”生命週期“？顧名思義，生命週期就是指一個物體從產生前到消亡後的整個過程，當然，不同物體的生命週期具體階段劃分可能不太一樣。

我們在使用前端元件框架的時候，都知道每個元件都有各自的生命週期，明確了元件生命週期後，開發者就可以在元件的不同生命週期執行不同的程式碼邏輯，從而達到管理元件的作用。

為了使 Custom Elements 在使用上更加靈活，它也有”生命週期“回撥函式，可以讓開發者定義好在元件不同生命時期可以被執行的方法。

Custom Elements 生命週期劃分

在 Custom Elements 的建構函式中，可以指定多個不同的回撥函式，它們將會在元素的不同生命時期被呼叫：

  • connectedCallback：當 Custom Elements首次被插入文件DOM時，被呼叫。
  • disconnectedCallback：當 Custom Elements 從文件DOM中刪除時，被呼叫。
  • adoptedCallback：當 Custom Elements 被移動到新的文件時，被呼叫。
  • attributeChangedCallback: 當 Custom Elements 增加、刪除、修改自身屬性時，被呼叫。

注意：自定義元素的生命週期回撥函式是被使用在它的建構函式中的。

生命週期回撥函式的使用

首先看一下效果：

2022-02-12 23.43.06

這裡需要注意的是：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.js
function 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.js
const 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 的使用場景較少，這個需要注意。

~

~ 本文完，感謝閱讀！

~

學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！

大家好，我是〖程式設計三昧〗的作者 隱逸王，我的公眾號是『程式設計三昧』，歡迎關注，希望大家多多指教！

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章