M

MLOG

Lietuvių

Išsamus žiniatinklio komponentų vadovas, apimantis jų privalumus, įgyvendinimą ir tai, kaip jie leidžia kurti pakartotinai naudojamus vartotojo sąsajos elementus įvairiose sistemose ir platformose.

Žiniatinklio komponentai: pakartotinai naudojamų elementų kūrimas šiuolaikiniam žiniatinkliui

Nuolat besikeičiančiame žiniatinklio kūrimo pasaulyje itin svarbus pakartotinai naudojamų ir prižiūrimų komponentų poreikis. Žiniatinklio komponentai siūlo galingą sprendimą, leidžiantį kūrėjams kurti pasirinktinius HTML elementus, kurie sklandžiai veikia įvairiose sistemose ir platformose. Šis išsamus vadovas nagrinėja žiniatinklio komponentų sąvokas, privalumus ir įgyvendinimą, suteikdamas jums žinių, reikalingų patikimoms ir keičiamo mastelio žiniatinklio programoms kurti.

Kas yra žiniatinklio komponentai?

Žiniatinklio komponentai yra žiniatinklio standartų rinkinys, leidžiantis kurti pakartotinai naudojamas, apgaubtas HTML žymes, skirtas naudoti žiniatinklio puslapiuose ir žiniatinklio programose. Jie iš esmės yra pasirinktiniai HTML elementai su savo funkcionalumu ir stiliumi, nepriklausomai nuo jūsų naudojamos sistemos ar bibliotekos (pvz., React, Angular, Vue.js). Tai skatina pakartotinį naudojimą ir sumažina kodo dubliavimą.

Pagrindinės technologijos, sudarančios žiniatinklio komponentus, yra:

Žiniatinklio komponentų naudojimo privalumai

Žiniatinklio komponentų naudojimas suteikia keletą reikšmingų jūsų projektų privalumų:

Pirmojo žiniatinklio komponento kūrimas

Pažvelkime į paprastą žiniatinklio komponento kūrimo pavyzdį: pasirinktinį elementą, kuris rodo sveikinimą.

1. Apibrėžkite pasirinktinio elemento klasę

Pirmiausia apibrėšite JavaScript klasę, kuri plečia `HTMLElement`. Šioje klasėje bus komponento logika ir atvaizdavimas:

class GreetingComponent extends HTMLElement {
  constructor() {
    super();

    // Sukurkite šešėlinį DOM
    this.shadow = this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.render();
  }

  render() {
    this.shadow.innerHTML = `
      <style>
        .greeting {
          color: blue;
          font-family: sans-serif;
        }
      </style>
      <div class="greeting">
        Sveiki, <slot>Pasauli</slot>!
      </div>
    `;
  }
}

Paaiškinimas:

2. Užregistruokite pasirinktinį elementą

Tada turite užregistruoti pasirinktinį elementą naršyklėje naudodami `customElements.define()`:

customElements.define('greeting-component', GreetingComponent);

Paaiškinimas:

3. Naudokite žiniatinklio komponentą HTML

Dabar galite naudoti savo naują žiniatinklio komponentą savo HTML kaip bet kurį kitą HTML elementą:

<greeting-component>Naudotojas</greeting-component>

Tai atvaizduos: „Sveiki, Naudotojau!“

Taip pat galite naudoti jį be lizdo:

<greeting-component></greeting-component>

Tai atvaizduos: „Sveiki, Pasauli!“ (nes „Pasaulis“ yra numatytasis lizdo turinys).

Šešėlinio DOM supratimas

Šešėlinis DOM yra esminis žiniatinklio komponentų aspektas. Jis užtikrina apgaubimą sukuriant atskirą DOM medį komponentui. Tai reiškia, kad stiliai ir scenarijai, apibrėžti šešėliniame DOM, neturi įtakos pagrindiniam dokumentui ir atvirkščiai. Ši izoliacija apsaugo nuo pavadinimų susidūrimų ir užtikrina, kad komponentai veiktų nuspėjamai.

Šešėlinio DOM privalumai:

Šešėlinio DOM režimai:

Aukščiau pateiktame pavyzdyje buvo naudojamas `mode: 'open'`, nes paprastai tai yra praktiškesnis pasirinkimas, leidžiantis lengviau derinti ir testuoti.

HTML šablonai ir lizdai

HTML šablonai:

`<template>` elementas suteikia būdą apibrėžti HTML fragmentus, kurie neatvaizduojami, kai puslapis įkeliamas. Šiuos šablonus galima klonuoti ir įterpti į DOM naudojant JavaScript. Šablonai ypač naudingi apibrėžiant pakartotinai naudojamas vartotojo sąsajos struktūras žiniatinklio komponentuose.

Lizdai:

Lizdai yra vietos rezervavimo ženklai žiniatinklio komponente, leidžiantys naudotojams įterpti turinį į konkrečias komponento sritis. Jie suteikia lankstų būdą tinkinti komponento išvaizdą ir elgesį. `<slot>` elementas apibrėžia lizdą, o naudotojo pateiktas turinys įterpiamas į tą lizdą, kai komponentas atvaizduojamas.

Pavyzdys naudojant šabloną ir lizdus:

<template id="my-template">
  <style>
    .container {
      border: 1px solid black;
      padding: 10px;
    }
  </style>
  <div class="container">
    <h2><slot name="title">Numatytasis pavadinimas</slot></h2>
    <p><slot>Numatytasis turinys</slot</p>
  </div>
</template>

<script>
  class MyComponent extends HTMLElement {
    constructor() {
      super();
      this.shadow = this.attachShadow({ mode: 'open' });
      const template = document.getElementById('my-template');
      const content = template.content.cloneNode(true);
      this.shadow.appendChild(content);
    }
  }
  customElements.define('my-component', MyComponent);
</script>

<my-component>
  <span slot="title">Pasirinktinis pavadinimas</span>
  <p>Pasirinktinis turinys</p>
</my-component>

Šiame pavyzdyje `my-component` naudoja šabloną savo struktūrai apibrėžti. Jis turi du lizdus: vieną pavadintą „title“ ir numatytąjį lizdą. Komponento naudotojas gali pateikti turinį šiems lizdams arba komponentas naudos numatytąjį turinį.

Išplėstiniai žiniatinklio komponentų metodai

Be pagrindų, keli išplėstiniai metodai gali patobulinti jūsų žiniatinklio komponentus:

Pavyzdys: atributų naudojimas ir `attributeChangedCallback`

class MyCard extends HTMLElement {
  static get observedAttributes() { return ['title', 'content']; }

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

  connectedCallback() {
    this.render();
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (oldValue !== newValue) {
      this.render(); // Iš naujo atvaizduokite, kai keičiasi atributai
    }
  }

  render() {
    this.shadow.innerHTML = `
      <style>
        .card {
          border: 1px solid #ccc;
          padding: 10px;
          margin: 10px;
        }
      </style>
      <div class="card">
        <h2>${this.getAttribute('title') || 'Numatytasis pavadinimas'}</h2>
        <p>${this.getAttribute('content') || 'Numatytasis turinys'}</p>
      </div>
    `;
  }
}

customElements.define('my-card', MyCard);

Šiame pavyzdyje `MyCard` komponentas stebi `title` ir `content` atributus. Kai šie atributai pasikeičia, iškviečiamas `attributeChangedCallback`, kuris tada iškviečia `render` metodą, kad atnaujintų komponento rodymą.

Žiniatinklio komponentai ir sistemos

Žiniatinklio komponentai yra sukurti taip, kad būtų nepriklausomi nuo sistemos, o tai reiškia, kad juos galima naudoti su bet kuria JavaScript sistema ar biblioteka. Dėl to jie yra vertingas įrankis kuriant pakartotinai naudojamus vartotojo sąsajos elementus, kuriais galima dalytis įvairiuose projektuose ir komandose. Svarbiausia suprasti, kaip efektyviai integruoti žiniatinklio komponentus į skirtingas sistemos aplinkas.

Žiniatinklio komponentų naudojimas su React:

React gali sklandžiai įtraukti žiniatinklio komponentus. Tiesiog naudokite žiniatinklio komponentą kaip bet kurį kitą HTML elementą. Tačiau atkreipkite dėmesį į tai, kaip React tvarko atributus ir įvykius. Dažnai jums reikės naudoti `ref`, kad galėtumėte tiesiogiai pasiekti žiniatinklio komponento DOM mazgą, kad galėtumėte atlikti sudėtingesnius veiksmus.

Žiniatinklio komponentų naudojimas su Angular:

Angular taip pat palaiko žiniatinklio komponentus. Gali reikėti sukonfigūruoti savo Angular projektą, kad būtų galima naudoti pasirinktinius elementus. Paprastai tai apima `CUSTOM_ELEMENTS_SCHEMA` pridėjimą prie savo modulio. Panašiai kaip ir React, jūs bendrausite su žiniatinklio komponentu per jo DOM API.

Žiniatinklio komponentų naudojimas su Vue.js:

Vue.js suteikia gerą žiniatinklio komponentų palaikymą. Galite tiesiogiai naudoti žiniatinklio komponentus savo Vue šablonuose. Vue.js tvarko atributų ir įvykių susiejimą panašiai kaip ir gimtus HTML elementus, todėl integracija yra gana paprasta.

Geriausia žiniatinklio komponentų kūrimo praktika

Norėdami užtikrinti, kad jūsų žiniatinklio komponentai būtų patikimi, prižiūrimi ir pakartotinai naudojami, laikykitės šių geriausių praktikų:

Žiniatinklio komponentų bibliotekos ir ištekliai

Kelios bibliotekos ir ištekliai gali padėti jums pradėti kurti žiniatinklio komponentus:

Išvada

Žiniatinklio komponentai suteikia galingą ir universalų būdą kurti pakartotinai naudojamus vartotojo sąsajos elementus šiuolaikiniam žiniatinkliui. Naudodami pasirinktinius elementus, šešėlinį DOM ir HTML šablonus, galite sukurti komponentus, kurie yra apgaubti, sąveikūs ir prižiūrimi. Nesvarbu, ar kuriate didelio masto žiniatinklio programą, ar paprastą svetainę, žiniatinklio komponentai gali padėti pagerinti kodo pakartotinį naudojimą, sumažinti sudėtingumą ir užtikrinti ilgalaikį prižiūrimumą. Žiniatinklio standartams toliau tobulėjant, žiniatinklio komponentai yra pasirengę vaidinti vis svarbesnį vaidmenį ateityje kuriant žiniatinklį.