M

MLOG

Eesti

Avastage veebikomponentide, eriti kohandatud elementide, võimsust, et luua taaskasutatavaid ja kapseldatud kasutajaliidese komponente erinevates veebirakendustes.

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 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);

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.

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);

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);

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:

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);

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 = `
  
  

  Karusselli pilt
  

  
  
  

  

  `;
 }
}

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

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:

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;

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 { }

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.

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:

Rahvusvahelistamine ja lokaliseerimine

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

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.