M

MLOG

Lietuvių

Išsamus žiniatinklio komponentų vadovas, apimantis jų privalumus, naudojimą, naršyklių palaikymą ir geriausias praktikas kuriant daugkartinio naudojimo UI elementus.

Žiniatinklio komponentai: Daugkartinio naudojimo elementų kūrimas šiuolaikiniam žiniatinkliui

Šiuolaikiniame, sparčiai besivystančiame žiniatinklio kūrimo pasaulyje, modulinio, daugkartinio naudojimo ir prižiūrimo kodo kūrimas yra nepaprastai svarbus. Žiniatinklio komponentai (Web Components) siūlo galingą sprendimą būtent tam: kurti pasirinktinius, inkapsuliuotus ir sąveikius vartotojo sąsajos (UI) elementus, kuriuos galima naudoti skirtinguose žiniatinklio projektuose ir karkasuose. Šis išsamus vadovas gilinsis į pagrindines žiniatinklio komponentų sąvokas, nagrinės jų privalumus ir pateiks praktinių pavyzdžių, padėsiančių jums pradėti.

Kas yra žiniatinklio komponentai?

Žiniatinklio komponentai yra žiniatinklio standartų rinkinys, leidžiantis kurti daugkartinio naudojimo pasirinktinius HTML elementus su inkapsuliuotu stiliumi ir elgsena. Jie iš esmės leidžia išplėsti paties HTML galimybes, kuriant pasirinktines žymes, kurias galima traktuoti kaip bet kurį kitą standartinį HTML elementą.

Įsivaizduokite juos kaip Lego kaladėles žiniatinkliui. Kiekviena kaladėlė (žiniatinklio komponentas) atspindi tam tikrą funkcionalumo dalį, o jūs galite derinti šias kaladėles, kad sukurtumėte sudėtingas vartotojo sąsajas. Žiniatinklio komponentų grožis slypi jų daugkartiniame naudojime ir izoliacijoje; juos galima naudoti bet kokiame žiniatinklio projekte, nepriklausomai nuo naudojamo karkaso (ar net ir be jokio karkaso), o jų vidinis stilius ir elgsena netrukdys likusiai jūsų programos daliai.

Pagrindinės žiniatinklio komponentų technologijos

Žiniatinklio komponentai yra pagrįsti keturiomis pagrindinėmis technologijomis:

Žiniatinklio komponentų naudojimo privalumai

Žiniatinklio komponentų pritaikymas jūsų kūrimo procese suteikia daugybę privalumų:

Paprastas pavyzdys: Pasirinktinio skaitiklio elemento kūrimas

Pavaizduokime paprasto žiniatinklio komponento kūrimą: pasirinktinio skaitiklio elemento.

1. Apibrėžkite pasirinktinio elemento klasę

Pirmiausia apibrėžiame JavaScript klasę, kuri praplečia `HTMLElement` klasę.

class MyCounter extends HTMLElement {
 constructor() {
 super();
 // Prijunkite šešėlinį DOM prie elemento.
 this.attachShadow({ mode: 'open' });

 // Inicijuokite skaitiklio reikšmę.
 this._count = 0;

 // Sukurkite mygtuko elementą.
 this.button = document.createElement('button');
 this.button.textContent = 'Didinti';
 this.shadowRoot.appendChild(this.button);

 //Sukurkite span elementą skaičiui rodyti.
 this.span = document.createElement('span');
 this.span.textContent = `Skaičius: ${this._count}`;
 this.shadowRoot.appendChild(this.span);

 // Susiekite didinimo metodą su mygtuko paspaudimo įvykiu.
 this.button.addEventListener('click', this.increment.bind(this));
 }

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

 connectedCallback() {
 console.log('Pasirinktinis elementas prijungtas prie DOM.');
 }

 disconnectedCallback() {
 console.log('Pasirinktinis elementas atjungtas nuo DOM.');
 }

 adoptedCallback() {
 console.log('Pasirinktinis elementas perkeltas į naują dokumentą.');
 }

 attributeChangedCallback(name, oldValue, newValue) {
 console.log(`Atributas ${name} pakeistas iš ${oldValue} į ${newValue}.`);
 }

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

2. Apibrėžkite šešėlinį DOM

Eilutė `attachShadow({ mode: 'open' })` prijungia šešėlinį DOM prie elemento. `mode: 'open'` parinktis leidžia išoriniam JavaScript pasiekti šešėlinį DOM, o `mode: 'closed'` užkirstų kelią išorinei prieigai.

3. Užregistruokite pasirinktinį elementą

Tada užregistruojame pasirinktinį elementą naršyklėje naudodami `customElements.define()` metodą.

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

4. Pasirinktinio elemento naudojimas HTML

Dabar galite naudoti `` elementą savo HTML kaip ir bet kurį kitą HTML elementą.

<my-counter></my-counter>

Šis kodas atvaizduos mygtuką su užrašu „Didinti“ ir span elementą, rodantį dabartinį skaičių (pradedant nuo 0). Spustelėjus mygtuką, skaitiklis bus padidintas ir atnaujintas rodinys.

Giliau: Šešėlinis DOM ir inkapsuliacija

Šešėlinis DOM yra esminis žiniatinklio komponentų aspektas. Jis suteikia inkapsuliaciją, sukuriant atskirą DOM medį komponentui, izoliuojant jo stilių ir elgseną nuo likusios puslapio dalies. Tai užkerta kelią stilių konfliktams ir užtikrina, kad komponentas elgsis nuspėjamai, nepriklausomai nuo jį supančios aplinkos.

Šešėliniame DOM galite apibrėžti CSS stilius, kurie taikomi tik komponento vidiniams elementams. Tai leidžia jums kurti savarankiškus komponentus, kurie nepriklauso nuo išorinių CSS stilių failų.

Pavyzdys: Šešėlinio DOM stiliavimas

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

 // Sukurkite stiliaus elementą šešėliniam 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);

 // Inicijuokite skaitiklio reikšmę.
 this._count = 0;

 // Sukurkite mygtuko elementą.
 this.button = document.createElement('button');
 this.button.textContent = 'Didinti';
 this.shadowRoot.appendChild(this.button);

 //Sukurkite span elementą skaičiui rodyti.
 this.span = document.createElement('span');
 this.span.textContent = `Skaičius: ${this._count}`;
 this.shadowRoot.appendChild(this.span);

 // Susiekite didinimo metodą su mygtuko paspaudimo įvykiu.
 this.button.addEventListener('click', this.increment.bind(this));
 }

Šiame pavyzdyje CSS stiliai, apibrėžti `style` elemente, bus taikomi tik mygtuko ir span elementams, esantiems `my-counter` komponento šešėliniame DOM. Šie stiliai neturės įtakos jokiems kitiems mygtukams ar span elementams puslapyje.

HTML šablonai: Daugkartinio naudojimo struktūrų apibrėžimas

HTML šablonai suteikia būdą apibrėžti daugkartinio naudojimo HTML struktūras, kurias galima klonuoti ir įterpti į DOM. Jie ypač naudingi kuriant sudėtingus komponentų maketus.

Pavyzdys: HTML šablonų naudojimas

<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>Didinti</button>
 <span>Skaičius: <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>

Šiame pavyzdyje apibrėžiame HTML šabloną su ID `counter-template`. Šablone yra HTML struktūra ir CSS stiliai mūsų skaitiklio komponentui. `MyCounter` klasėje klonuojame šablono turinį ir prijungiame jį prie šešėlinio DOM. Tai leidžia mums pakartotinai naudoti šablono struktūrą kiekvienam `my-counter` komponento egzemplioriui.

Atributai ir savybės

Žiniatinklio komponentai gali turėti tiek atributus, tiek savybes. Atributai apibrėžiami HTML žymėjime, o savybės – JavaScript klasėje. Atributų pakeitimai gali atsispindėti savybėse ir atvirkščiai.

Pavyzdys: Atributų apibrėžimas ir naudojimas

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="Pasauli"></my-greeting>
<my-greeting name="Alisa"></my-greeting>

Šiame pavyzdyje apibrėžiame `name` atributą `my-greeting` komponentui. `observedAttributes` geteris nurodo naršyklei, kuriuos atributus stebėti dėl pakeitimų. Kai `name` atributas pasikeičia, iškviečiamas `attributeChangedCallback` metodas, ir mes atnaujiname `span` elemento turinį nauju vardu.

Gyvavimo ciklo atgalinės iškvietos funkcijos (Callbacks)

Žiniatinklio komponentai turi keletą gyvavimo ciklo atgalinės iškvietos funkcijų, kurios leidžia vykdyti kodą skirtinguose komponento gyvavimo ciklo etapuose:

Šios atgalinės iškvietos funkcijos suteikia galimybes atlikti inicializavimą, išvalymą ir kitas užduotis, susijusias su komponento gyvavimo ciklu.

Naršyklių suderinamumas ir polifilai

Žiniatinklio komponentus palaiko visos šiuolaikinės naršyklės. Tačiau senesnėms naršyklėms gali prireikti polifilų (polyfills), kad būtų užtikrintas reikiamas funkcionalumas. `webcomponents.js` polifilų biblioteka suteikia išsamų žiniatinklio komponentų palaikymą senesnėse naršyklėse. Norėdami įtraukti polifilą, naudokite šią scenarijaus žymę:

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

Paprastai rekomenduojama naudoti funkcijos aptikimo metodą, įkeliant polifilą tik tuo atveju, jei naršyklė natūraliai nepalaiko žiniatinklio komponentų.

Pažangios technikos ir geriausios praktikos

Komponentų kompozicija

Žiniatinklio komponentus galima derinti tarpusavyje, kad būtų sukurti sudėtingesni UI elementai. Tai leidžia kurti labai modulines ir daugkartinio naudojimo programas.

Įvykių apdorojimas

Žiniatinklio komponentai gali siųsti ir klausytis pasirinktinių įvykių. Tai leidžia komponentams bendrauti tarpusavyje ir su likusia programos dalimi.

Duomenų susiejimas (Data Binding)

Nors žiniatinklio komponentai neturi integruotų duomenų susiejimo mechanizmų, galite įdiegti duomenų susiejimą naudodami pasirinktinį kodą arba integruodami su duomenų susiejimo biblioteka.

Prieinamumas

Svarbu užtikrinti, kad jūsų žiniatinklio komponentai būtų prieinami visiems vartotojams, įskaitant tuos, kurie turi negalią. Kuriant ir diegiant komponentus, laikykitės prieinamumo geriausių praktikų.

Žiniatinklio komponentai realiame pasaulyje: Tarptautiniai pavyzdžiai

Žiniatinklio komponentus naudoja įmonės ir organizacijos visame pasaulyje, kurdamos modernias ir daugkartinio naudojimo vartotojo sąsajas. Štai keletas pavyzdžių:

Tai tik keli pavyzdžiai, kaip žiniatinklio komponentai naudojami realiame pasaulyje. Technologija vis labiau populiarėja, nes kūrėjai pripažįsta jos naudą kuriant modulines, daugkartinio naudojimo ir prižiūrimas žiniatinklio programas.

Išvada

Žiniatinklio komponentai siūlo galingą požiūrį į daugkartinio naudojimo UI elementų kūrimą šiuolaikiniam žiniatinkliui. Naudodami pasirinktinius elementus, šešėlinį DOM ir HTML šablonus, galite kurti savarankiškus komponentus, kuriuos galima naudoti skirtinguose projektuose ir karkasuose. Žiniatinklio komponentų pritaikymas gali lemti modulines, lengviau prižiūrimas ir labiau keičiamo mastelio žiniatinklio programas. Žiniatinklio standartams tobulėjant, žiniatinklio komponentai ir toliau vaidins lemiamą vaidmenį formuojant žiniatinklio kūrimo ateitį.

Papildoma literatūra

Pradėkite eksperimentuoti su žiniatinklio komponentais jau šiandien ir atverkite daugkartinio naudojimo UI elementų galią savo žiniatinklio kūrimo projektuose!