生命周期.001
前言
何謂”生命周期“？顧名思義摔刁，生命周期就是指一個物體從產(chǎn)生前到消亡后的整個過程瓤荔，當(dāng)然净蚤，不同物體的生命周期具體階段劃分可能不太一樣。
我們在使用前端組件框架的時候输硝，都知道每個組件都有各自的生命周期今瀑，明確了組件生命周期后，開發(fā)者就可以在組件的不同生命周期執(zhí)行不同的代碼邏輯，從而達到管理組件的作用橘荠。
為了使 Custom Elements 在使用上更加靈活屿附，它也有”生命周期“回調(diào)函數(shù)，可以讓開發(fā)者定義好在組件不同生命時期可以被執(zhí)行的方法哥童。
Custom Elements 生命周期劃分
在 Custom Elements 的構(gòu)造函數(shù)中挺份，可以指定多個不同的回調(diào)函數(shù)，它們將會在元素的不同生命時期被調(diào)用：
-
connectedCallback：當(dāng) Custom Elements首次被插入文檔DOM時贮懈，被調(diào)用匀泊。 -
disconnectedCallback：當(dāng) Custom Elements 從文檔DOM中刪除時，被調(diào)用朵你。 -
adoptedCallback：當(dāng) Custom Elements 被移動到新的文檔時各聘，被調(diào)用。 -
attributeChangedCallback: 當(dāng) Custom Elements 增加抡医、刪除躲因、修改自身屬性時，被調(diào)用忌傻。
注意：自定義元素的生命周期回調(diào)函數(shù)是被使用在它的構(gòu)造函數(shù)中的大脉。
生命周期回調(diào)函數(shù)的使用
首先看一下效果：
2022-02-12 23.43.06
這里需要注意的是：adoptedCallback 回調(diào)只有在將自定義元素移動到新文檔（一般是 iframe）中時才會被觸發(fā)。
代碼如下：
<!--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);
}
結(jié)束語
以上就是 Custom Elements 生命周期回調(diào)函數(shù)的簡單使用示例芯勘，希望能對你有所幫助箱靴！
Custom Elements 的回調(diào)函數(shù)中腺逛，adoptedCallback 的使用場景較少荷愕，這個需要注意。
~
~ 本文完棍矛，感謝閱讀安疗！
~
學(xué)習(xí)有趣的知識，結(jié)識有趣的朋友够委，塑造有趣的靈魂荐类！
