当前位置：网站首页>Yyds dry goods inventory web components series (VII) -- life cycle of custom components

Yyds dry goods inventory web components series (VII) -- life cycle of custom components

2022-07-06 03:57:00 【Programming samadhi】

#yyds Dry inventory # Web Components series ( 7、 ... and ) —— Customize the lifecycle of the component _WebComponent

Preface

What is meant by ” Life cycle “？ seeing the name of a thing one thinks of its function , The life cycle refers to the whole process of an object from its birth to its death , Of course , The specific stage division of the life cycle of different objects may be different .

When we use the front-end component framework , We all know that each component has its own life cycle , After defining the component life cycle , Developers can execute different code logic in different life cycles of components , So as to achieve the role of management components .

In order to make Custom Elements More flexible in use , It also has the ” Life cycle “ Callback function , It allows developers to define methods that can be executed at different stages of the component's life .

Custom Elements Life cycle division

stay Custom Elements In the constructor of , You can specify multiple different callback functions , They will be called at different times of the element's life ：

connectedCallback： When Custom Elements First inserted into document DOM when , Called .
disconnectedCallback： When Custom Elements From the document DOM When deleted in , Called .
adoptedCallback： When Custom Elements When moved to a new document , Called .
attributeChangedCallback: When Custom Elements increase 、 Delete 、 When modifying its properties , Called .

Be careful ： The lifecycle callback function of a custom element is used in its constructor .

Use of lifecycle callback function

First look at the effect ：

#yyds Dry inventory # Web Components series ( 7、 ... and ) —— Customize the lifecycle of the component _ Componentization _02

What needs to be noted here is ：adoptedCallback The callback is only available when the custom element is moved to a new document （ It's usually iframe） It will be triggered only when it is in .

The code is as follows ：

<!--index.html-->
<head>
    <style> body { padding: 50px; } custom-square { margin: 15px; } iframe { width: 100%; height: 250px; overflow: hidden; } </style>
</head>

<body>
    Custom Elements  Life cycle 
    <div>
        <button class="add"> Additional  Square  To  DOM</button>
        <button class="update"> change  Square  Properties of </button>
        <button class="remove"> remove  Square  Elements </button>
        <button class="move"> Move  Square  To  Iframe</button>
    </div>
    <iframe src="./other.html"></iframe>
    <script src="./square.js"></script>
    <script src="./index.js"></script>
</body>

<!--other.html-->
<body>
     This is a  other.html
</body>

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.

// 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  Be mounted to the page ");
        updateStyle(this);
    }

    disconnectedCallback() {
        console.log("custom-square  Removed from page ");
    }

    adoptedCallback() {
        console.log("custom-square  Moved to a new page ");
    }

    attributeChangedCallback(name, oldValue, newValue) {
        console.log("custom-square  The attribute value is changed ");
        updateStyle(this);
    }
}

customElements.define("custom-square", Square);

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.

// 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);
}

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.

Conclusion

That's all Custom Elements A simple example of using the lifecycle callback function , I hope it helped you ！

Custom Elements In the callback function of ,adoptedCallback There are few usage scenarios , This needs attention .

~: The end of this paper , Thank you for reading ！

Learn interesting knowledge , Make interesting friends , Create interesting souls ！
Hello everyone , I am a 〖 The samadhi of programming 〗 The author of Hermit King , My official account is 『 The samadhi of programming 』, Welcome to your attention , I hope you can give me more advice ！

原网站

版权声明
本文为[Programming samadhi]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202132253167369.html