当前位置:网站首页>Web components series (VII) -- life cycle of custom components
Web components series (VII) -- life cycle of custom components
2022-07-05 03:40:00 【Programming samadhi】
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 :
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>
<h1>Custom Elements Life cycle </h1>
<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>
<h1> This is a 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 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);
// 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);
}
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 !
边栏推荐
- How rem is used
- 【PHP特性-变量覆盖】函数的使用不当、配置不当、代码逻辑漏洞
- 有个疑问 flink sql cdc 的话可以设置并行度么, 并行度大于1会有顺序问题吧?
- 英语必备词汇3400
- 問下,這個ADB mysql支持sqlserver嗎?
- Flex flexible layout
- Anchor free series network yolox source code line by line explanation Part 2 (a total of 10, ensure to explain line by line, after reading, you can change the network at will, not just as a participan
- Difference between MotionEvent. getRawX and MotionEvent. getX
- About MySQL database connection exceptions
- Binary heap implementation (priority queue implementation)
猜你喜欢
Qrcode: generate QR code from text
v-if VS v-show 2.0
Basic knowledge of tuples
[positioning in JS]
IPv6 experiment
[an Xun cup 2019] not file upload
De debugging (set the main thread as hidden debugging to destroy the debugging Channel & debugger detection)
51 independent key basic experiment
【软件逆向-分析工具】反汇编和反编译工具
函数基础学习02
随机推荐
v-if VS v-show 2.0
How to learn to get the embedding matrix e # yyds dry goods inventory #
Assembly - getting started
How can we truncate the float64 type to a specific precision- How can we truncate float64 type to a particular precision?
LeetCode146. LRU cache
Is there any way to change the height of the uinavigationbar in the storyboard without using the UINavigationController?
The architect started to write a HelloWorld
Kubernetes - Multi cluster management
Kubernetes - identity and authority authentication
Leetcode92. reverse linked list II
Pdf things
Kubernetes -- cluster expansion principle
error Couldn‘t find a package.json file in “你的路径“
UE4 DMX和grandMA2 onPC 3.1.2.5的操作流程
glibc strlen 实现方式分析
Some enterprise interview questions of unity interview
Kubernetes - identity and authority authentication
Ask, does this ADB MySQL support sqlserver?
深度学习——LSTM基础
ICSI213/IECE213 Data Structures