Veebikomponendid: sügavuti kohandatud elementidest

Veebikomponendid (Web Components) on oluline edasiminek veebiarenduses, pakkudes standardiseeritud viisi taaskasutatavate ja kapseldatud kasutajaliidese komponentide loomiseks. Veebikomponente moodustavate põhitehnoloogiate seas paistavad kohandatud elemendid (Custom Elements) silma kui nurgakivi uute HTML-märgendite defineerimisel koos kohandatud käitumise ja renderdamisega. See põhjalik juhend süveneb kohandatud elementide keerukustesse, uurides nende eeliseid, rakendamist ja parimaid praktikaid kaasaegsete veebirakenduste ehitamisel.

Mis on veebikomponendid?

Veebikomponendid on veebistandardite kogum, mis võimaldab arendajatel luua taaskasutatavaid, kapseldatud ja koostalitlusvõimelisi HTML-elemente. Need pakuvad modulaarset lähenemist veebiarendusele, võimaldades luua kohandatud kasutajaliidese komponente, mida saab hõlpsasti jagada ja taaskasutada erinevates projektides ja raamistikes. Veebikomponentide taga olevad põhitehnoloogiad on:

• Kohandatud elemendid (Custom Elements): Defineerivad uusi HTML-märgiseid ja nendega seotud käitumist.
• Shadow DOM: Pakub kapseldamist, luues komponendile eraldi DOM-puu, mis kaitseb selle stiile ja skripte globaalsest skoopist.
• HTML-mallid (Templates): Defineerivad taaskasutatavaid HTML-struktuure, mida saab JavaScripti abil instantseerida ja manipuleerida.

Kohandatud elementide mõistmine

Kohandatud elemendid on veebikomponentide süda, võimaldades arendajatel laiendada HTML-i sõnavara oma elementidega. Need kohandatud elemendid käituvad nagu standardsed HTML-elemendid, kuid neid saab kohandada vastavalt rakenduse spetsiifilistele vajadustele, pakkudes suuremat paindlikkust ja koodi organiseeritust.

Kohandatud elementide defineerimine

Kohandatud elemendi defineerimiseks peate kasutama meetodit customElements.define(). See meetod võtab kaks argumenti:

1. Elemendi nimi: Sõne, mis tähistab kohandatud elemendi nime. Nimi peab sisaldama sidekriipsu (-), et vältida konflikte standardsete HTML-elementidega. Näiteks my-element on kehtiv nimi, kuid myelement ei ole.
2. Elemendi klass: JavaScripti klass, mis laiendab klassi HTMLElement ja defineerib kohandatud elemendi käitumise.

Siin on lihtne näide:

            class MyElement extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = 'Tere, maailm!';
  }
}

customElements.define('my-element', MyElement);
            

              
                Copy
              
            
          

Selles näites defineerime kohandatud elemendi nimega my-element. Klass MyElement laiendab klassi HTMLElement ja seab konstruktoris elemendi sisemiseks HTML-iks "Tere, maailm!".

Kohandatud elementide elutsükli tagasikutsed (Lifecycle Callbacks)

Kohandatud elementidel on mitu elutsükli tagasikutset, mis võimaldavad teil käivitada koodi elemendi elutsükli erinevates etappides. Need tagasikutsed pakuvad võimalusi elemendi lähtestamiseks, atribuutide muudatustele reageerimiseks ja ressursside puhastamiseks, kui element DOM-ist eemaldatakse.

• connectedCallback(): Kutsutakse välja, kui element sisestatakse DOM-i. See on hea koht lähtestamistoimingute tegemiseks, näiteks andmete hankimiseks või sündmuste kuulajate lisamiseks.
• disconnectedCallback(): Kutsutakse välja, kui element eemaldatakse DOM-ist. See on hea koht ressursside puhastamiseks, näiteks sündmuste kuulajate eemaldamiseks või mälu vabastamiseks.
• attributeChangedCallback(name, oldValue, newValue): Kutsutakse välja, kui elemendi atribuuti muudetakse. See tagasikutse võimaldab teil reageerida atribuutide muudatustele ja vastavalt sellele uuendada elemendi renderdamist. Peate määrama, milliseid atribuute jälgida, kasutades observedAttributes getterit.
• adoptedCallback(): Kutsutakse välja, kui element teisaldatakse uude dokumenti.

Siin on näide, mis demonstreerib elutsükli tagasikutsete kasutamist:

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

  connectedCallback() {
    this.shadow.innerHTML = `
Ühendatud DOM-iga!
`;
    console.log('Element ühendatud');
  }

  disconnectedCallback() {
    console.log('Element lahti ühendatud');
  }

  static get observedAttributes() { return ['data-message']; }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'data-message') {
      this.shadow.innerHTML = `
${newValue}
`;
    }
  }
}

customElements.define('my-element', MyElement);
            

              
                Copy
              
            
          

Selles näites logib connectedCallback() konsooli teate ja seab elemendi sisemise HTML-i, kui see DOM-iga ühendatakse. disconnectedCallback() logib teate, kui element lahti ühendatakse. attributeChangedCallback() kutsutakse välja, kui atribuut data-message muutub, uuendades vastavalt elemendi sisu. Getter observedAttributes määrab, et soovime jälgida atribuudi data-message muudatusi.

Shadow DOM-i kasutamine kapseldamiseks

Shadow DOM pakub veebikomponentidele kapseldamist, võimaldades teil luua komponendile eraldi DOM-puu, mis on ülejäänud lehest isoleeritud. See tähendab, et Shadow DOM-is määratletud stiilid ja skriptid ei mõjuta ülejäänud lehte ja vastupidi. See kapseldamine aitab vältida konflikte ja tagab, et teie komponendid käituvad prognoositavalt.

Shadow DOM-i kasutamiseks võite elemendil kutsuda meetodi attachShadow(). See meetod võtab valikute objekti, mis määrab Shadow DOM-i režiimi. Režiim (mode) võib olla kas 'open' või 'closed'. Kui režiim on 'open', on Shadow DOM-ile JavaScriptist juurdepääs elemendi shadowRoot omaduse kaudu. Kui režiim on 'closed', ei ole Shadow DOM-ile JavaScriptist juurdepääsu.

Siin on näide, mis demonstreerib Shadow DOM-i kasutamist:

            class MyElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.shadow.innerHTML = `
      
      
See on Shadow DOM-i sees.
    `;
  }
}

customElements.define('my-element', MyElement);
            

              
                Copy
              
            
          

Selles näites lisame elemendile Shadow DOM-i režiimiga mode: 'open'. Seejärel seame Shadow DOM-i sisemise HTML-i, et lisada stiil, mis seab lõikude värvi siniseks, ja lõigu elemendi koos tekstiga. Shadow DOM-is määratletud stiil kehtib ainult Shadow DOM-i sees olevatele elementidele ja ei mõjuta lõike väljaspool Shadow DOM-i.

Kohandatud elementide kasutamise eelised

Kohandatud elemendid pakuvad veebiarenduses mitmeid eeliseid:

• Taaskasutatavus: Kohandatud elemente saab taaskasutada erinevates projektides ja raamistikes, vähendades koodi dubleerimist ja parandades hooldatavust.
• Kapseldamine: Shadow DOM pakub kapseldamist, vältides stiili- ja skriptikonflikte ning tagades, et komponendid käituvad prognoositavalt.
• Koostalitlusvõime: Kohandatud elemendid põhinevad veebistandarditel, muutes need koostalitlusvõimeliseks teiste veebitehnoloogiate ja raamistikega.
• Hooldatavus: Veebikomponentide modulaarne olemus muudab koodi hooldamise ja uuendamise lihtsamaks. Muudatused komponendis on isoleeritud, vähendades riski teiste rakenduse osade lõhkumiseks.
• Jõudlus: Kohandatud elemendid võivad parandada jõudlust, vähendades parsitava ja käivitatava koodi hulka. Samuti võimaldavad nad tõhusamat renderdamist ja uuendusi.

Kohandatud elementide praktilised näited

Uurime mõningaid praktilisi näiteid, kuidas kohandatud elemente saab kasutada levinud kasutajaliidese komponentide loomiseks.

Lihtne loenduri komponent

See näide demonstreerib, kuidas luua lihtsat loenduri komponenti, kasutades kohandatud elemente.

            class Counter extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this._count = 0;
    this.render();
  }

  connectedCallback() {
    this.shadow.querySelector('.increment').addEventListener('click', () => {
      this.increment();
    });
    this.shadow.querySelector('.decrement').addEventListener('click', () => {
      this.decrement();
    });
  }

  increment() {
    this._count++;
    this.render();
  }

  decrement() {
    this._count--;
    this.render();
  }

  render() {
    this.shadow.innerHTML = `
      
      

        -
        ${this._count}
        +
      
    `;
  }
}

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

              
                Copy
              
            
          

See kood defineerib klassi Counter, mis laiendab klassi HTMLElement. Konstruktor lähtestab komponendi, lisab Shadow DOM-i ja seab algse loenduri väärtuseks 0. Meetod connectedCallback() lisab sündmuste kuulajad suurendamise ja vähendamise nuppudele. Meetodid increment() ja decrement() uuendavad loenduri väärtust ja kutsuvad välja meetodi render(), et uuendada komponendi renderdamist. Meetod render() seab Shadow DOM-i sisemise HTML-i, et lisada loenduri kuva ja nupud.

Pildikarusselli komponent

See näide demonstreerib, kuidas luua pildikarusselli komponenti, kasutades kohandatud elemente. Lühiduse huvides on piltide allikad kohatäitjad ja neid võiks dünaamiliselt laadida API-st, sisuhaldussüsteemist või kohalikust mälust. Ka stiil on minimeeritud.

            class ImageCarousel extends HTMLElement {
 constructor() {
  super();
  this.shadow = this.attachShadow({ mode: 'open' });
  this._images = [
  'https://via.placeholder.com/350x150',
  'https://via.placeholder.com/350x150/0077bb',
  'https://via.placeholder.com/350x150/00bb77',
  ];
  this._currentIndex = 0;
  this.render();
 }

 connectedCallback() {
  this.shadow.querySelector('.prev').addEventListener('click', () => {
  this.prevImage();
  });
  this.shadow.querySelector('.next').addEventListener('click', () => {
  this.nextImage();
  });
 }

 nextImage() {
  this._currentIndex = (this._currentIndex + 1) % this._images.length;
  this.render();
 }

 prevImage() {
  this._currentIndex = (this._currentIndex - 1 + this._images.length) % this._images.length;
  this.render();
 }

 render() {
  this.shadow.innerHTML = `
  
  

  
  

  Eelmine
  Järgmine
  
  
  `;
 }
}

customElements.define('image-carousel', ImageCarousel);
            

              
                Copy
              
            
          

See kood defineerib klassi ImageCarousel, mis laiendab klassi HTMLElement. Konstruktor lähtestab komponendi, lisab Shadow DOM-i ja seab algse piltide massiivi ja praeguse indeksi. Meetod connectedCallback() lisab sündmuste kuulajad eelmise ja järgmise nupu jaoks. Meetodid nextImage() ja prevImage() uuendavad praegust indeksit ja kutsuvad välja meetodi render(), et uuendada komponendi renderdamist. Meetod render() seab Shadow DOM-i sisemise HTML-i, et lisada praegune pilt ja nupud.

Parimad praktikad kohandatud elementidega töötamisel

Siin on mõned parimad praktikad, mida järgida kohandatud elementidega töötamisel:

• Kasutage kirjeldavaid elemendinimesid: Valige elemendinimed, mis selgelt viitavad komponendi eesmärgile.
• Kasutage Shadow DOM-i kapseldamiseks: Shadow DOM aitab vältida stiili- ja skriptikonflikte ning tagab, et komponendid käituvad prognoositavalt.
• Kasutage elutsükli tagasikutseid asjakohaselt: Kasutage elutsükli tagasikutseid elemendi lähtestamiseks, atribuutide muudatustele reageerimiseks ja ressursside puhastamiseks, kui element DOM-ist eemaldatakse.
• Kasutage atribuute konfigureerimiseks: Kasutage atribuute komponendi käitumise ja välimuse konfigureerimiseks.
• Kasutage sündmusi suhtlemiseks: Kasutage kohandatud sündmusi komponentide vaheliseks suhtlemiseks.
• Pakkuge tagavaralahendus: Kaaluge tagavaralahenduse pakkumist brauseritele, mis ei toeta veebikomponente. Seda saab teha järkjärgulise täiustamise (progressive enhancement) abil.
• Mõelge rahvusvahelistamisele (i18n) ja lokaliseerimisele (l10n): Veebikomponentide arendamisel mõelge, kuidas neid kasutatakse erinevates keeltes ja piirkondades. Kujundage oma komponendid nii, et neid oleks lihtne tõlkida ja lokaliseerida. Näiteks hoidke kõik tekstisõned väljaspool ja pakkuge mehhanisme tõlgete dünaamiliseks laadimiseks. Veenduge, et kuupäeva- ja ajavormingud, valuutasümbolid ja muud piirkondlikud seaded oleksid korrektselt käsitletud.
• Kaaluge juurdepääsetavust (a11y): Veebikomponendid tuleks algusest peale kujundada juurdepääsetavust silmas pidades. Kasutage ARIA atribuute seal, kus see on vajalik, et pakkuda semantilist teavet abistavatele tehnoloogiatele. Veenduge, et klaviatuurinavigatsioon on täielikult toetatud ja et värvikontrast on nägemispuudega kasutajatele piisav. Testige oma komponente ekraanilugejatega, et nende juurdepääsetavust kontrollida.

Kohandatud elemendid ja raamistikud

Kohandatud elemendid on loodud olema koostalitlusvõimelised teiste veebitehnoloogiate ja raamistikega. Neid saab kasutada koos populaarsete raamistikega nagu React, Angular ja Vue.js.

Kohandatud elementide kasutamine Reactis

Kohandatud elementide kasutamiseks Reactis saate neid lihtsalt renderdada nagu mis tahes muud HTML-elementi. Siiski võib olla vajalik kasutada viidet (ref), et pääseda ligi aluseks olevale DOM-elemendile ja sellega otse suhelda.

            import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const myElementRef = useRef(null);

  useEffect(() => {
    if (myElementRef.current) {
      // Pääse ligi kohandatud elemendi API-le
      myElementRef.current.addEventListener('custom-event', (event) => {
        console.log('Kohandatud sündmus vastu võetud:', event.detail);
      });
    }
  }, []);

  return ;
}

export default MyComponent;
            

              
                Copy
              
            
          

Selles näites kasutame viidet (ref), et pääseda ligi my-element kohandatud elemendile ja lisada sellele sündmuse kuulaja. See võimaldab meil kuulata kohandatud elemendi poolt saadetud sündmusi ja vastavalt reageerida.

Kohandatud elementide kasutamine Angularis

Kohandatud elementide kasutamiseks Angularis peate konfigureerima Angulari kohandatud elementi ära tundma. Seda saab teha, lisades kohandatud elemendi mooduli konfiguratsioonis schemas massiivi.

            import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

            

              
                Copy
              
            
          

Kui kohandatud element on registreeritud, saate seda oma Angulari mallides kasutada nagu mis tahes muud HTML-elementi.

Kohandatud elementide kasutamine Vue.js-is

Ka Vue.js toetab kohandatud elemente loomulikult. Saate neid kasutada otse oma mallides ilma erilise konfiguratsioonita.

            


            

              
                Copy
              
            
          

Vue tunneb kohandatud elemendi automaatselt ära ja renderdab selle korrektselt.

Juurdepääsetavuse kaalutlused

Kohandatud elementide loomisel on ülioluline arvestada juurdepääsetavusega, et tagada teie komponentide kasutatavus kõigile, sealhulgas puuetega inimestele. Siin on mõned olulised juurdepääsetavuse kaalutlused:

• Semantiline HTML: Kasutage semantilisi HTML-elemente alati, kui see on võimalik, et anda oma komponentidele tähendusrikas struktuur.
• ARIA atribuudid: Kasutage ARIA atribuute, et pakkuda täiendavat semantilist teavet abistavatele tehnoloogiatele, näiteks ekraanilugejatele.
• Klaviatuurinavigatsioon: Veenduge, et teie komponentides saab navigeerida klaviatuuri abil. See on eriti oluline interaktiivsete elementide, näiteks nuppude ja linkide puhul.
• Värvikontrast: Veenduge, et teksti ja taustavärvide vahel oleks piisav värvikontrast, et tekst oleks nägemispuudega inimestele loetav.
• Fookuse haldamine: Hallake fookust korrektselt, et kasutajad saaksid hõlpsasti teie komponentides navigeerida.
• Testimine abistavate tehnoloogiatega: Testige oma komponente abistavate tehnoloogiatega, näiteks ekraanilugejatega, et veenduda nende juurdepääsetavuses.

Rahvusvahelistamine ja lokaliseerimine

Arendades kohandatud elemente globaalsele publikule, on oluline arvestada rahvusvahelistamise (i18n) ja lokaliseerimisega (l10n). Siin on mõned olulised kaalutlused:

• Teksti suund: Toetage nii vasakult paremale (LTR) kui ka paremalt vasakule (RTL) teksti suundi.
• Kuupäeva- ja ajavormingud: Kasutage erinevate lokaatide jaoks sobivaid kuupäeva- ja ajavorminguid.
• Valuutasümbolid: Kasutage erinevate lokaatide jaoks sobivaid valuutasümboleid.
• Tõlkimine: Pakkuge tõlkeid kõigile oma komponentides olevatele tekstisõnedele.
• Numbrite vormindamine: Kasutage erinevate lokaatide jaoks sobivat numbrite vormindamist.

Kokkuvõte

Kohandatud elemendid on võimas tööriist taaskasutatavate ja kapseldatud kasutajaliidese komponentide loomiseks. Need pakuvad veebiarenduses mitmeid eeliseid, sealhulgas taaskasutatavus, kapseldamine, koostalitlusvõime, hooldatavus ja jõudlus. Järgides selles juhendis toodud parimaid praktikaid, saate kohandatud elementide abil luua kaasaegseid veebirakendusi, mis on vastupidavad, hooldatavad ja juurdepääsetavad globaalsele publikule. Kuna veebistandardid arenevad edasi, muutuvad veebikomponendid, sealhulgas kohandatud elemendid, üha olulisemaks modulaarsete ja skaleeritavate veebirakenduste loomisel.

Võtke omaks kohandatud elementide võimsus, et ehitada veebi tulevikku, üks komponent korraga. Pidage meeles arvestada juurdepääsetavuse, rahvusvahelistamise ja lokaliseerimisega, et tagada teie komponentide kasutatavus kõigile ja kõikjal.