共计 3292 个字符，预计需要花费 9 分钟才能阅读完成。
前言
何谓”生命周期“？顾名思义，生命周期就是指一个物体从产生前到沦亡后的整个过程，当然，不同物体的生命周期具体阶段划分可能不太一样。
咱们在应用前端组件框架的时候，都晓得每个组件都有各自的生命周期，明确了组件生命周期后，开发者就能够在组件的不同生命周期执行不同的代码逻辑，从而达到治理组件的作用。
为了使 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.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 的应用场景较少，这个须要留神。
~
~ 本文完，感激浏览！
~
学习乏味的常识，结识乏味的敌人，塑造乏味的灵魂！
大家好，我是〖编程三昧〗的作者 隐逸王 ，我的公众号是『编程三昧』，欢送关注，心愿大家多多指教！
正文完
发表至： javascript
2022-02-13
