M

MLOG

Lietuvių

Atraskite žiniatinklio komponentų ir pasirinktinių elementų galią kuriant daugkartinio naudojimo ir inkapsuliuotus UI komponentus įvairioms žiniatinklio programoms.

Žiniatinklio komponentai: Išsami pažintis su pasirinktiniais elementais

Žiniatinklio komponentai (Web Components) yra svarbus žingsnis į priekį žiniatinklio kūrime, siūlantis standartizuotą būdą kurti daugkartinio naudojimo ir inkapsuliuotus vartotojo sąsajos (UI) komponentus. Tarp pagrindinių technologijų, kurios sudaro žiniatinklio komponentus, pasirinktiniai elementai (Custom Elements) išsiskiria kaip kertinis akmuo, leidžiantis apibrėžti naujas HTML žymes su individualiu elgesiu ir atvaizdavimu. Šis išsamus vadovas gilinsis į pasirinktinių elementų subtilybes, nagrinės jų privalumus, diegimą ir geriausias praktikas kuriant šiuolaikines žiniatinklio programas.

Kas yra žiniatinklio komponentai?

Žiniatinklio komponentai yra žiniatinklio standartų rinkinys, leidžiantis kūrėjams kurti daugkartinio naudojimo, inkapsuliuotus ir sąveikius HTML elementus. Jie siūlo modulinį požiūrį į žiniatinklio kūrimą, leidžiantį kurti pasirinktinius UI komponentus, kuriais galima lengvai dalytis ir naudoti įvairiuose projektuose ir karkasuose. Pagrindinės žiniatinklio komponentų technologijos yra šios:

Pasirinktinių elementų supratimas

Pasirinktiniai elementai yra žiniatinklio komponentų pagrindas, leidžiantis kūrėjams išplėsti HTML žodyną savo elementais. Šie pasirinktiniai elementai elgiasi kaip standartiniai HTML elementai, tačiau juos galima pritaikyti specifiniams programos poreikiams, suteikiant daugiau lankstumo ir geresnę kodo organizaciją.

Pasirinktinių elementų apibrėžimas

Norėdami apibrėžti pasirinktinį elementą, turite naudoti customElements.define() metodą. Šis metodas priima du argumentus:

  1. Elemento pavadinimas: Eilutė, nurodanti pasirinktinio elemento pavadinimą. Pavadinime privalo būti brūkšnelis (-), kad būtų išvengta konfliktų su standartiniais HTML elementais. Pavyzdžiui, my-element yra galiojantis pavadinimas, o myelement – ne.
  2. Elemento klasė: JavaScript klasė, kuri paveldi HTMLElement ir apibrėžia pasirinktinio elemento elgesį.

Štai paprastas pavyzdys:

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

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

Šiame pavyzdyje apibrėžiame pasirinktinį elementą pavadinimu my-element. MyElement klasė paveldi HTMLElement ir konstruktoriuje nustato elemento vidinį HTML į „Sveikas, Pasauli!“.

Pasirinktinio elemento gyvavimo ciklo atgaliniai iškvietimai (Lifecycle Callbacks)

Pasirinktiniai elementai turi kelis gyvavimo ciklo atgalinius iškvietimus, kurie leidžia vykdyti kodą skirtinguose elemento gyvavimo etapuose. Šie atgaliniai iškvietimai suteikia galimybę inicializuoti elementą, reaguoti į atributų pasikeitimus ir išvalyti resursus, kai elementas pašalinamas iš DOM.

Štai pavyzdys, demonstruojantis gyvavimo ciklo atgalinių iškvietimų naudojimą:

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

  connectedCallback() {
    this.shadow.innerHTML = `
Prijungta prie DOM!
`;
    console.log('Elementas prijungtas');
  }

  disconnectedCallback() {
    console.log('Elementas atjungtas');
  }

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

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

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

Šiame pavyzdyje connectedCallback() išveda pranešimą į konsolę ir nustato elemento vidinį HTML, kai jis prijungiamas prie DOM. disconnectedCallback() išveda pranešimą, kai elementas atjungiamas. attributeChangedCallback() iškviečiamas, kai pasikeičia data-message atributas, atitinkamai atnaujinant elemento turinį. Geteris observedAttributes nurodo, kad norime stebėti data-message atributo pakeitimus.

Shadow DOM naudojimas inkapsuliacijai

Shadow DOM suteikia inkapsuliaciją žiniatinklio komponentams, leidžiant jums sukurti atskirą DOM medį komponentui, kuris yra izoliuotas nuo likusio puslapio. Tai reiškia, kad Shadow DOM viduje apibrėžti stiliai ir scenarijai nepaveiks likusio puslapio, ir atvirkščiai. Ši inkapsuliacija padeda išvengti konfliktų ir užtikrina, kad jūsų komponentai veiktų nuspėjamai.

Norėdami naudoti Shadow DOM, galite iškviesti attachShadow() metodą elementui. Šis metodas priima parinkčių objektą, kuris nurodo Shadow DOM režimą. mode gali būti 'open' arba 'closed'. Jei režimas yra 'open', Shadow DOM galima pasiekti iš JavaScript naudojant elemento shadowRoot savybę. Jei režimas yra 'closed', Shadow DOM negalima pasiekti iš JavaScript.

Štai pavyzdys, demonstruojantis Shadow DOM naudojimą:

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.shadow.innerHTML = `
      
      
Tai yra Shadow DOM viduje.

    `;
  }
}

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

Šiame pavyzdyje prie elemento prijungiame Shadow DOM su mode: 'open'. Tada nustatome Shadow DOM vidinį HTML, įtraukdami stilių, kuris pastraipų spalvą nustato mėlyną, ir pastraipos elementą su tekstu. Shadow DOM viduje apibrėžtas stilius bus taikomas tik elementams, esantiems Shadow DOM viduje, ir nepaveiks pastraipų už Shadow DOM ribų.

Pasirinktinių elementų naudojimo privalumai

Pasirinktiniai elementai siūlo keletą privalumų žiniatinklio kūrimui:

Praktiniai pasirinktinių elementų pavyzdžiai

Panagrinėkime keletą praktinių pavyzdžių, kaip pasirinktinius elementus galima naudoti kuriant įprastus UI komponentus.

Paprastas skaitiklio komponentas

Šis pavyzdys parodo, kaip sukurti paprastą skaitiklio komponentą naudojant pasirinktinius elementus.

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

Šis kodas apibrėžia Counter klasę, kuri paveldi HTMLElement. Konstruktorius inicializuoja komponentą, prijungia Shadow DOM ir nustato pradinę skaitiklio vertę į 0. Metodas connectedCallback() prideda įvykių klausytojus prie didinimo ir mažinimo mygtukų. Metodai increment() ir decrement() atnaujina skaitiklio vertę ir iškviečia render() metodą, kad atnaujintų komponento atvaizdavimą. Metodas render() nustato Shadow DOM vidinį HTML, įtraukiant skaitiklio ekraną ir mygtukus.

Paveikslėlių karuselės komponentas

Šis pavyzdys parodo, kaip sukurti paveikslėlių karuselės komponentą naudojant pasirinktinius elementus. Trumpumo dėlei, paveikslėlių šaltiniai yra vietos rezervavimo ženklai ir galėtų būti dinamiškai įkeliami iš API, TVS ar vietinės saugyklos. Stiliai taip pat buvo sumažinti iki minimumo.

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

  Karuselės paveikslėlis
  

  
  
  

  

  `;
 }
}

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

Šis kodas apibrėžia ImageCarousel klasę, kuri paveldi HTMLElement. Konstruktorius inicializuoja komponentą, prijungia Shadow DOM ir nustato pradinį paveikslėlių masyvą bei dabartinį indeksą. Metodas connectedCallback() prideda įvykių klausytojus prie ankstesnio ir kito mygtukų. Metodai nextImage() ir prevImage() atnaujina dabartinį indeksą ir iškviečia render() metodą, kad atnaujintų komponento atvaizdavimą. Metodas render() nustato Shadow DOM vidinį HTML, įtraukiant dabartinį paveikslėlį ir mygtukus.

Geriausios praktikos dirbant su pasirinktiniais elementais

Štai keletas geriausių praktikų, kurių reikėtų laikytis dirbant su pasirinktiniais elementais:

Pasirinktiniai elementai ir karkasai

Pasirinktiniai elementai yra sukurti taip, kad būtų sąveikūs su kitomis žiniatinklio technologijomis ir karkasais. Jie gali būti naudojami kartu su populiariais karkasais, tokiais kaip React, Angular ir Vue.js.

Pasirinktinių elementų naudojimas React

Norėdami naudoti pasirinktinius elementus React aplinkoje, galite juos tiesiog atvaizduoti kaip bet kurį kitą HTML elementą. Tačiau jums gali prireikti naudoti ref, kad pasiektumėte pagrindinį DOM elementą ir tiesiogiai su juo sąveikautumėte.

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

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

  useEffect(() => {
    if (myElementRef.current) {
      // Pasiekiame pasirinktinio elemento API
      myElementRef.current.addEventListener('custom-event', (event) => {
        console.log('Gautas pasirinktinis įvykis:', event.detail);
      });
    }
  }, []);

  return ;
}

export default MyComponent;

Šiame pavyzdyje naudojame ref, kad pasiektume my-element pasirinktinį elementą ir pridėtume jam įvykio klausytoją. Tai leidžia mums klausytis pasirinktinių įvykių, kuriuos siunčia pasirinktinis elementas, ir atitinkamai reaguoti.

Pasirinktinių elementų naudojimas Angular

Norėdami naudoti pasirinktinius elementus Angular aplinkoje, turite sukonfigūruoti Angular, kad jis atpažintų pasirinktinį elementą. Tai galima padaryti pridedant pasirinktinį elementą prie schemas masyvo modulio konfigūracijoje.

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

Kai pasirinktinis elementas yra užregistruotas, galite jį naudoti savo Angular šablonuose kaip bet kurį kitą HTML elementą.

Pasirinktinių elementų naudojimas Vue.js

Vue.js taip pat natūraliai palaiko pasirinktinius elementus. Galite juos naudoti tiesiogiai savo šablonuose be jokios specialios konfigūracijos.

Vue automatiškai atpažins pasirinktinį elementą ir teisingai jį atvaizduos.

Prieinamumo aspektai

Kuriant pasirinktinius elementus, labai svarbu atsižvelgti į prieinamumą, kad jūsų komponentai būtų naudojami visiems, įskaitant žmones su negalia. Štai keletas pagrindinių prieinamumo aspektų:

Internacionalizavimas ir lokalizavimas

Kuriant pasirinktinius elementus pasaulinei auditorijai, svarbu atsižvelgti į internacionalizavimą (i18n) ir lokalizavimą (l10n). Štai keletas pagrindinių aspektų:

Išvada

Pasirinktiniai elementai yra galingas įrankis kuriant daugkartinio naudojimo ir inkapsuliuotus UI komponentus. Jie siūlo keletą privalumų žiniatinklio kūrimui, įskaitant daugkartinį naudojimą, inkapsuliaciją, sąveikumą, palaikomumą ir našumą. Laikydamiesi šiame vadove pateiktų geriausių praktikų, galite pasinaudoti pasirinktiniais elementais kurdami šiuolaikines žiniatinklio programas, kurios yra tvirtos, palaikomos ir prieinamos pasaulinei auditorijai. Toliau tobulėjant žiniatinklio standartams, žiniatinklio komponentai, įskaitant pasirinktinius elementus, taps vis svarbesni kuriant modulines ir mastelio keitimui pritaikytas žiniatinklio programas.

Pasinaudokite pasirinktinių elementų galia kurdami žiniatinklio ateitį, po vieną komponentą. Nepamirškite atsižvelgti į prieinamumą, internacionalizavimą ir lokalizavimą, kad užtikrintumėte, jog jūsų komponentai būtų naudojami visiems ir visur.