Тъй като уеб приложенията стават по-сложни, имаме нужда от някакъв начин да разделим кода на управляеми части. За да направим това, можем да използваме уеб компоненти, за да създадем UI блокове за многократна употреба, които можем да използваме на множество места.
В тази статия ще разгледаме куките за жизнения цикъл на уеб компонентите и как ги използваме.
Куки за жизнения цикъл
Уеб компонентите имат свой собствен жизнен цикъл. Следните събития се случват в жизнения цикъл на уеб компонент:
- Елементът се вмъква в DOM
- Актуализации, когато се задейства събитие от потребителския интерфейс
- Елементът е изтрит от DOM
Уеб компонентът има кукички за жизнения цикъл са функции за обратно извикване, които улавят тези събития от жизнения цикъл и ни позволяват да ги обработваме по съответния начин.
Те ни позволяват да обработваме тези събития, без да създаваме собствена система за това. Повечето рамки на JavaScript предоставят същата функционалност, но Web Components е стандарт, така че не е необходимо да зареждаме допълнителен код, за да можем да ги използваме.
Следните кукички за жизнения цикъл са в уеб компонент:
constructor()connectedCallback()disconnectedCallback()attributeChangedCallback(name, oldValue, newValue)adoptedCallback()
конструктор()
constructor() се извиква при създаването на уеб компонента. Извиква се, когато създаваме shadow DOM и се използва за настройка на слушатели и инициализиране на състоянието на компонент.
Не се препоръчва обаче да изпълняваме неща като изобразяване и извличане на ресурси тук. connectedCallback е по-добър за този вид задачи.
Дефинирането на конструктор не е задължително за класове ES6, но ще бъде създаден празен, когато е недефиниран.
Когато създаваме конструктора, трябва да извикаме super(), за да извикаме класа, който класът на уеб компонента разширява.
Можем да имаме return изрази там и не можем да използваме document.write() или document.open() там.
Освен това не можем да получим атрибути или деца в метода на конструктора.
свързано обратно повикване ()
Методът connectedCallback() се извиква, когато към DOM се добави елемент. Можем да сме сигурни, че елементът е достъпен за DOM, когато се извика този метод.
Това означава, че можем безопасно да задаваме атрибути, да извличаме ресурси, да изпълняваме код за настройка или да изобразяваме шаблони.
disconnectedCallback()
Това се извиква, когато елементът бъде премахнат от DOM. Следователно това е идеално място за добавяне на логика за почистване и освобождаване на ресурси. Можем също да използваме това обратно извикване за:
- уведомява друга част от приложение, че елементът е премахнат от DOM
- безплатни ресурси, които няма да бъдат събирани автоматично като отписване от DOM събития, спиране на интервални таймери или дерегистриране на всички регистрирани обратни повиквания
Тази кука никога не се извиква, когато потребителят затвори раздела и може да бъде задействана повече от веднъж през целия си живот.
attributeChangedCallback(attrName, oldVal, newVal)
Можем да предаваме атрибути със стойности към уеб компонент като всеки друг атрибут:
<custom-element
foo="foo"
bar="bar"
baz="baz">
</custom-element>В това обратно извикване можем да получим стойността на атрибутите, както са присвоени в кода.
Можем да добавим static get observedAttributes() кука, за да определим какви стойности на атрибута наблюдаваме. Например, можем да напишем:
class CustomElement extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({
mode: 'open'
});
}
static get observedAttributes() {
return ['foo', 'bar', 'baz'];
}
attributeChangedCallback(name, oldValue, newValue) {
console.log(`${name}'s value has been changed from ${oldValue} to ${newValue}`);
}
}
customElements.define('custom-element', CustomElement);
След това трябва да изпълним следното от console.log:
foo's value has been changed from null to foo bar's value has been changed from null to bar baz's value has been changed from null to baz
като се има предвид, че имаме следния HTML:
<custom-element foo="foo" bar="bar" baz="baz"> </custom-element>
Получаваме това, защото присвоихме стойностите на атрибутите foo, bar и baz в HTML със стойностите със същото име.
усвоено обратно повикване ()
adoptedCallback се извиква, когато извикваме document.adoptNode с подаден елемент. Това се случва само когато имаме работа с iframes.
Методът adoptNode се използва за прехвърляне на възел от един документ в друг. Вградена рамка има друг документ, така че е възможно да се извика това с обекта документ на iframe.
Пример
Можем да го използваме, за да създадем елемент с текст, който мига, както следва:
class BlinkElement extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
const shadow = this.attachShadow({
mode: 'open'
});
this.span = document.createElement('span');
this.span.textContent = this.getAttribute('text');
const style = document.createElement('style');
style.textContent = 'span { color: black }';
this.intervalTimer = setInterval(() => {
let styleText = this.style.textContent;
if (style.textContent.includes('red')) {
style.textContent = 'span { color: black }';
} else {
style.textContent = 'span { color: red }';
}
}, 1000)
shadow.appendChild(style);
shadow.appendChild(this.span);
}
disconnectedCallback() {
clearInterval(this.intervalTimer);
}
static get observedAttributes() {
return ['text'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'text') {
if (this.span) {
this.span.textContent = newValue;
}
}
}
}
customElements.define('blink-element', BlinkElement);
В connectedCallback имаме целия код за инициализиране на елемента. Това включва добавяне на span за текста, който предадохме в атрибута text като негова стойност, и стиловете за мигане на текста. Стилът започва със създаването на елемента style и след това добавихме кода setInterval за мигане на текста чрез промяна на цвета на span от червено на черно и обратно.
След това прикрепихме възлите към сенчестия DOM, който създадохме в началото.
Имаме статичен метод observedAttributes, за да зададем атрибутите, за които да следим. Това се използва от attributeChangedCallback, за да наблюдава стойността на текстовия атрибут и да го зададе съответно, като получи newValue.
За да видим attributeChangedCallback в действие, можем да създадем елемента динамично и да зададем неговия атрибут, както следва:
const blink2 = document.createElement('blink-element');
document.body.appendChild(blink2);
blink2.setAttribute('text', 'bar');
blink2.setAttribute('text', 'baz');
След това трябва да bar и baz, ако регистрираме newValue в куката attributeChangedCallback.
И накрая, имаме disconnectedCallback, който се изпълнява, когато компонентът бъде премахнат. Например, когато премахнем елемент с removeChild както в следния код:
const blink2 = document.createElement('blink-element');
document.body.appendChild(blink2);
blink2.setAttribute('text', 'bar');
document.body.removeChild(blink2);
Куките на жизнения цикъл ни позволяват да обработваме различни DOM събития вътре и извън DOM в сянка. Уеб компонентите имат кукички за инициализиране, премахване и промени на атрибути. Можем да изберем кои атрибути да наблюдаваме за промени.
Има и кукички за приемане на елементи в друг документ.
