M

MLOG

Latviešu

Visaptverošs ceļvedis par tīmekļa komponentiem, aptverot to priekšrocības, lietojumu, pārlūkprogrammu atbalstu un praksi atkārtoti lietojamu UI elementu veidošanai.

Tīmekļa komponenti: atkārtoti lietojamu elementu veidošana mūsdienu tīmeklim

Mūsdienu strauji mainīgajā tīmekļa izstrādes ainavā modulāra, atkārtoti lietojama un uzturama koda veidošana ir ārkārtīgi svarīga. Tīmekļa komponenti (Web Components) piedāvā spēcīgu risinājumu tieši tam: pielāgotus, inkapsulētus un savietojamus lietotāja saskarnes (UI) elementus, ko var izmantot dažādos tīmekļa projektos un ietvaros. Šis visaptverošais ceļvedis iedziļināsies tīmekļa komponentu pamatkoncepcijās, izpētīs to priekšrocības un sniegs praktiskus piemērus, lai palīdzētu jums sākt darbu.

Kas ir tīmekļa komponenti?

Tīmekļa komponenti ir tīmekļa standartu kopa, kas ļauj veidot atkārtoti lietojamus pielāgotus HTML elementus ar inkapsulētu stilizāciju un uzvedību. Tie būtībā ļauj jums paplašināt paša HTML iespējas, veidojot pielāgotas tagus, kurus var apstrādāt tāpat kā jebkuru citu standarta HTML elementu.

Uztveriet tos kā Lego klucīšus tīmeklim. Katrs klucītis (tīmekļa komponents) atspoguļo noteiktu funkcionalitātes daļu, un šos klucīšus var kombinēt, lai veidotu sarežģītas lietotāja saskarnes. Tīmekļa komponentu skaistums ir to atkārtota lietojamība un izolācija; tos var izmantot jebkurā tīmekļa projektā neatkarīgi no izmantotā ietvara (vai pat bez ietvara vispār), un to iekšējā stilizācija un uzvedība netraucēs pārējai jūsu lietojumprogrammai.

Tīmekļa komponentu pamattehnoloģijas

Tīmekļa komponenti ir veidoti uz četrām pamattehnoloģijām:

Tīmekļa komponentu izmantošanas priekšrocības

Tīmekļa komponentu ieviešana jūsu izstrādes darbplūsmā piedāvā daudzas priekšrocības:

Vienkāršs piemērs: pielāgota skaitītāja elementa izveide

Ilustrēsim pamata tīmekļa komponenta izveidi: pielāgotu skaitītāja elementu.

1. Definējiet pielāgotā elementa klasi

Vispirms mēs definējam JavaScript klasi, kas paplašina `HTMLElement` klasi.

class MyCounter extends HTMLElement {
 constructor() {
 super();
 // Pievienot shadow DOM elementam.
 this.attachShadow({ mode: 'open' });

 // Inicializēt skaitītāja vērtību.
 this._count = 0;

 // Izveidot pogas elementu.
 this.button = document.createElement('button');
 this.button.textContent = 'Palielināt';
 this.shadowRoot.appendChild(this.button);

 //Izveidot span elementu, lai parādītu skaitītāju.
 this.span = document.createElement('span');
 this.span.textContent = `Skaits: ${this._count}`;
 this.shadowRoot.appendChild(this.span);

 // Saistīt inkrementēšanas metodi ar pogas klikšķa notikumu.
 this.button.addEventListener('click', this.increment.bind(this));
 }

 increment() {
 this._count++;
 this.span.textContent = `Skaits: ${this._count}`;
 }

 connectedCallback() {
 console.log('Pielāgotais elements pievienots DOM.');
 }

 disconnectedCallback() {
 console.log('Pielāgotais elements atvienots no DOM.');
 }

 adoptedCallback() {
 console.log('Pielāgotais elements pārvietots uz jaunu dokumentu.');
 }

 attributeChangedCallback(name, oldValue, newValue) {
 console.log(`Atribūts ${name} mainīts no ${oldValue} uz ${newValue}.`);
 }

 static get observedAttributes() {
 return ['count'];
 }
}

2. Definējiet Shadow DOM

Rinda `attachShadow({ mode: 'open' })` pievieno elementam shadow DOM. Opcija `mode: 'open'` ļauj JavaScript no ārpuses piekļūt shadow DOM, savukārt `mode: 'closed'` novērstu ārējo piekļuvi.

3. Reģistrējiet pielāgoto elementu

Tālāk mēs reģistrējam pielāgoto elementu pārlūkprogrammā, izmantojot metodi `customElements.define()`.

customElements.define('my-counter', MyCounter);

4. Pielāgotā elementa izmantošana HTML

Tagad jūs varat izmantot `` elementu savā HTML tāpat kā jebkuru citu HTML elementu.

<my-counter></my-counter>

Šis kods renderēs pogu ar nosaukumu "Palielināt" un elementu, kas parāda pašreizējo skaitītāju (sākot no 0). Noklikšķinot uz pogas, skaitītājs palielināsies un tiks atjaunināts displejs.

Iedziļinoties: Shadow DOM un inkapsulācija

Shadow DOM ir tīmekļa komponentu būtisks aspekts. Tas nodrošina inkapsulāciju, izveidojot atsevišķu DOM koku komponentam, izolējot tā stilizāciju un uzvedību no pārējās lapas. Tas novērš stilu konfliktus un nodrošina, ka komponents uzvedas paredzami neatkarīgi no apkārtējās vides.

Shadow DOM ietvaros varat definēt CSS stilus, kas attiecas tikai uz komponenta iekšējiem elementiem. Tas ļauj izveidot patstāvīgus komponentus, kas nav atkarīgi no ārējām CSS stila lapām.

Piemērs: Shadow DOM stilizācija

constructor() {
 super();
 this.attachShadow({ mode: 'open' });

 // Izveidot stila elementu shadow DOM
 const style = document.createElement('style');
 style.textContent = `
 button {
 background-color: #4CAF50;
 color: white;
 padding: 10px 20px;
 border: none;
 cursor: pointer;
 }
 span {
 margin-left: 10px;
 font-weight: bold;
 }
 `;
 this.shadowRoot.appendChild(style);

 // Inicializēt skaitītāja vērtību.
 this._count = 0;

 // Izveidot pogas elementu.
 this.button = document.createElement('button');
 this.button.textContent = 'Palielināt';
 this.shadowRoot.appendChild(this.button);

 //Izveidot span elementu, lai parādītu skaitītāju.
 this.span = document.createElement('span');
 this.span.textContent = `Skaits: ${this._count}`;
 this.shadowRoot.appendChild(this.span);

 // Saistīt inkrementēšanas metodi ar pogas klikšķa notikumu.
 this.button.addEventListener('click', this.increment.bind(this));
 }

Šajā piemērā CSS stili, kas definēti `style` elementā, tiks piemēroti tikai pogas un elementa elementiem komponenta `my-counter` shadow DOM. Šie stili neietekmēs citas pogas vai elementus lapā.

HTML veidnes: atkārtoti lietojamu struktūru definēšana

HTML veidnes nodrošina veidu, kā definēt atkārtoti lietojamas HTML struktūras, ko var klonēt un ievietot DOM. Tās ir īpaši noderīgas, lai izveidotu sarežģītus komponentu izkārtojumus.

Piemērs: HTML veidņu izmantošana

<template id="counter-template">
 <style>
 button {
 background-color: #4CAF50;
 color: white;
 padding: 10px 20px;
 border: none;
 cursor: pointer;
 }
 span {
 margin-left: 10px;
 font-weight: bold;
 }
 </style>
 <button>Palielināt</button>
 <span>Skaits: <span id="count-value">0</span></span>
</template>

<script>
class MyCounter extends HTMLElement {
 constructor() {
 super();
 this.attachShadow({ mode: 'open' });

 const template = document.getElementById('counter-template');
 const templateContent = template.content;
 this.shadowRoot.appendChild(templateContent.cloneNode(true));

 this.button = this.shadowRoot.querySelector('button');
 this.span = this.shadowRoot.querySelector('#count-value');
 this._count = 0;
 this.span.textContent = this._count;
 this.button.addEventListener('click', this.increment.bind(this));
 }

 increment() {
 this._count++;
 this.span.textContent = this._count;
 }
}

customElements.define('my-counter', MyCounter);
</script>

Šajā piemērā mēs definējam HTML veidni ar ID `counter-template`. Veidne satur HTML struktūru un CSS stilus mūsu skaitītāja komponentam. Klasē `MyCounter` mēs klonējam veidnes saturu un pievienojam to shadow DOM. Tas ļauj mums atkārtoti izmantot veidnes struktūru katrai komponenta `my-counter` instancei.

Atribūti un īpašības

Tīmekļa komponentiem var būt gan atribūti, gan īpašības. Atribūti tiek definēti HTML marķējumā, savukārt īpašības tiek definētas JavaScript klasē. Atribūtu izmaiņas var atspoguļoties īpašībās un otrādi.

Piemērs: Atribūtu definēšana un izmantošana

class MyGreeting extends HTMLElement {
 constructor() {
 super();
 this.attachShadow({ mode: 'open' });
 this.shadowRoot.innerHTML = `<p>Sveiki, <span id="name"></span>!</p>`;
 this.nameSpan = this.shadowRoot.querySelector('#name');
 }

 static get observedAttributes() {
 return ['name'];
 }

 attributeChangedCallback(name, oldValue, newValue) {
 if (name === 'name') {
 this.nameSpan.textContent = newValue;
 }
 }
}

customElements.define('my-greeting', MyGreeting);

<my-greeting name="World"></my-greeting>
<my-greeting name="Alice"></my-greeting>

Šajā piemērā mēs definējam atribūtu `name` komponentam `my-greeting`. `observedAttributes` geteris pasaka pārlūkprogrammai, kurus atribūtus uzraudzīt izmaiņām. Kad atribūts `name` mainās, tiek izsaukta metode `attributeChangedCallback`, un mēs atjauninām `span` elementa saturu ar jauno vārdu.

Dzīves cikla atzvanīšanas funkcijas

Tīmekļa komponentiem ir vairākas dzīves cikla atzvanīšanas funkcijas, kas ļauj izpildīt kodu dažādos komponenta dzīves cikla posmos:

Šīs atzvanīšanas funkcijas nodrošina iespējas veikt inicializāciju, sakopšanu un citus uzdevumus, kas saistīti ar komponenta dzīves ciklu.

Pārlūkprogrammu saderība un polifili

Tīmekļa komponentus atbalsta visas modernas pārlūkprogrammas. Tomēr vecākām pārlūkprogramām var būt nepieciešami polifili, lai nodrošinātu nepieciešamo funkcionalitāti. `webcomponents.js` polifilu bibliotēka nodrošina visaptverošu atbalstu tīmekļa komponentiem vecākās pārlūkprogrammās. Lai iekļautu polifilu, izmantojiet šādu skripta tagu:

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.6.0/webcomponents-loader.js"></script>

Parasti ieteicams izmantot funkciju noteikšanas pieeju, ielādējot polifilu tikai tad, ja pārlūkprogramma dabiski neatbalsta tīmekļa komponentus.

Uzlabotas tehnikas un labākā prakse

Komponentu kompozīcija

Tīmekļa komponentus var apvienot, lai izveidotu sarežģītākus lietotāja saskarnes elementus. Tas ļauj veidot ļoti modulāras un atkārtoti lietojamas lietojumprogrammas.

Notikumu apstrāde

Tīmekļa komponenti var nosūtīt un klausīties pielāgotus notikumus. Tas ļauj komponentiem sazināties savā starpā un ar pārējo lietojumprogrammu.

Datu saistīšana

Lai gan tīmekļa komponenti nenodrošina iebūvētus datu saistīšanas mehānismus, jūs varat ieviest datu saistīšanu, izmantojot pielāgotu kodu vai integrējot to ar datu saistīšanas bibliotēku.

Pieejamība

Ir svarīgi nodrošināt, ka jūsu tīmekļa komponenti ir pieejami visiem lietotājiem, tostarp tiem, kuriem ir invaliditāte. Izstrādājot un ieviešot komponentus, ievērojiet labākās pieejamības prakses.

Tīmekļa komponenti reālajā pasaulē: starptautiski piemēri

Tīmekļa komponentus izmanto uzņēmumi un organizācijas visā pasaulē, lai veidotu modernas un atkārtoti lietojamas lietotāja saskarnes. Šeit ir daži piemēri:

Šie ir tikai daži piemēri tam, kā tīmekļa komponenti tiek izmantoti reālajā pasaulē. Tehnoloģija gūst arvien lielāku popularitāti, jo izstrādātāji atzīst tās priekšrocības modulāru, atkārtoti lietojamu un uzturamu tīmekļa lietojumprogrammu veidošanā.

Secinājums

Tīmekļa komponenti piedāvā spēcīgu pieeju atkārtoti lietojamu lietotāja saskarnes elementu veidošanai mūsdienu tīmeklim. Izmantojot pielāgotus elementus, shadow DOM un HTML veidnes, varat izveidot patstāvīgus komponentus, ko var izmantot dažādos projektos un ietvaros. Tīmekļa komponentu izmantošana var novest pie modulārākām, uzturamākām un mērogojamākām tīmekļa lietojumprogrammām. Attīstoties tīmekļa standartiem, tīmekļa komponentiem arī turpmāk būs būtiska loma tīmekļa izstrādes nākotnes veidošanā.

Tālāka mācīšanās

Sāciet eksperimentēt ar tīmekļa komponentiem jau šodien un atklājiet atkārtoti lietojamu lietotāja saskarnes elementu spēku savos tīmekļa izstrādes projektos!