M

MLOG

Latviešu

Izpētiet tīmekļa komponenšu jaudu, koncentrējoties uz pielāgotajiem elementiem, lai veidotu atkārtoti lietojamas un iekapsulētas UI komponentes dažādās tīmekļa lietojumprogrammās.

Tīmekļa komponentes: padziļināts ieskats pielāgotajos elementos

Tīmekļa komponentes ir būtisks progress tīmekļa izstrādē, piedāvājot standartizētu veidu, kā izveidot atkārtoti lietojamas un iekapsulētas lietotāja saskarnes (UI) komponentes. Starp galvenajām tehnoloģijām, kas veido tīmekļa komponentes, pielāgotie elementi (Custom Elements) izceļas kā stūrakmens jaunu HTML tagu definēšanai ar pielāgotu uzvedību un renderēšanu. Šis visaptverošais ceļvedis iedziļinās pielāgoto elementu sarežģītībā, pētot to priekšrocības, ieviešanu un labākās prakses mūsdienīgu tīmekļa lietojumprogrammu veidošanai.

Kas ir tīmekļa komponentes?

Tīmekļa komponentes ir tīmekļa standartu kopums, kas ļauj izstrādātājiem izveidot atkārtoti lietojamus, iekapsulētus un savietojamus HTML elementus. Tās piedāvā modulāru pieeju tīmekļa izstrādei, ļaujot izveidot pielāgotas UI komponentes, kuras var viegli koplietot un atkārtoti izmantot dažādos projektos un ietvaros. Galvenās tehnoloģijas, kas ir tīmekļa komponenšu pamatā, ietver:

Izpratne par pielāgotajiem elementiem

Pielāgotie elementi ir tīmekļa komponenšu pamatā, ļaujot izstrādātājiem paplašināt HTML vārdnīcu ar saviem elementiem. Šie pielāgotie elementi darbojas kā standarta HTML elementi, bet tos var pielāgot konkrētām lietojumprogrammas vajadzībām, nodrošinot lielāku elastību un koda organizāciju.

Pielāgoto elementu definēšana

Lai definētu pielāgotu elementu, jums jāizmanto metode customElements.define(). Šī metode pieņem divus argumentus:

  1. Elementa nosaukums: Virkne, kas apzīmē pielāgotā elementa nosaukumu. Nosaukumā jābūt defisei (-), lai izvairītos no konfliktiem ar standarta HTML elementiem. Piemēram, my-element ir derīgs nosaukums, bet myelement nav.
  2. Elementa klase: JavaScript klase, kas paplašina HTMLElement un definē pielāgotā elementa uzvedību.

Šeit ir pamata piemērs:

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

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

Šajā piemērā mēs definējam pielāgotu elementu ar nosaukumu my-element. Klase MyElement paplašina HTMLElement un konstruktorā iestata elementa iekšējo HTML uz "Hello, World!".

Pielāgoto elementu dzīves cikla atsauces (Lifecycle Callbacks)

Pielāgotajiem elementiem ir vairāki dzīves cikla atsauces, kas ļauj izpildīt kodu dažādos elementa dzīves cikla posmos. Šīs atsauces nodrošina iespējas inicializēt elementu, reaģēt uz atribūtu izmaiņām un atbrīvot resursus, kad elements tiek noņemts no DOM.

Šeit ir piemērs, kas demonstrē dzīves cikla atsauču izmantošanu:

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

  connectedCallback() {
    this.shadow.innerHTML = `
Connected to the DOM!
`;
    console.log('Element connected');
  }

  disconnectedCallback() {
    console.log('Element disconnected');
  }

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

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

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

Šajā piemērā connectedCallback() reģistrē ziņojumu konsolē un iestata elementa iekšējo HTML, kad tas tiek pievienots DOM. disconnectedCallback() reģistrē ziņojumu, kad elements tiek atvienots. attributeChangedCallback() tiek izsaukta, kad mainās atribūts data-message, atbilstoši atjauninot elementa saturu. Getters observedAttributes norāda, ka mēs vēlamies novērot atribūta data-message izmaiņas.

Shadow DOM izmantošana iekapsulēšanai

Shadow DOM nodrošina tīmekļa komponenšu iekapsulēšanu, ļaujot jums izveidot atsevišķu DOM koku komponentei, kas ir izolēts no pārējās lapas. Tas nozīmē, ka stili un skripti, kas definēti Shadow DOM, neietekmēs pārējo lapu, un otrādi. Šī iekapsulēšana palīdz novērst konfliktus un nodrošina, ka jūsu komponentes darbojas paredzami.

Lai izmantotu Shadow DOM, jūs varat izsaukt metodi attachShadow() elementam. Šī metode pieņem opciju objektu, kas norāda Shadow DOM režīmu. mode var būt vai nu 'open', vai 'closed'. Ja režīms ir 'open', Shadow DOM var piekļūt no JavaScript, izmantojot elementa īpašību shadowRoot. Ja režīms ir 'closed', Shadow DOM nevar piekļūt no JavaScript.

Šeit ir piemērs, kas demonstrē Shadow DOM izmantošanu:

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.shadow.innerHTML = `
      
      
This is inside the Shadow DOM.

    `;
  }
}

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

Šajā piemērā mēs pievienojam Shadow DOM elementam ar mode: 'open'. Pēc tam mēs iestatām Shadow DOM iekšējo HTML, iekļaujot stilu, kas iestata rindkopu krāsu uz zilu, un rindkopas elementu ar tekstu. Stils, kas definēts Shadow DOM, attieksies tikai uz elementiem, kas atrodas Shadow DOM, un neietekmēs rindkopas ārpus Shadow DOM.

Pielāgoto elementu izmantošanas priekšrocības

Pielāgotie elementi piedāvā vairākas priekšrocības tīmekļa izstrādei:

Pielāgoto elementu praktiski piemēri

Apskatīsim dažus praktiskus piemērus, kā pielāgotos elementus var izmantot, lai veidotu bieži sastopamas UI komponentes.

Vienkārša skaitītāja komponente

Šis piemērs demonstrē, kā izveidot vienkāršu skaitītāja komponenti, izmantojot pielāgotos 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 kods definē Counter klasi, kas paplašina HTMLElement. Konstruktors inicializē komponenti, pievieno Shadow DOM un iestata sākotnējo skaitli uz 0. Metode connectedCallback() pievieno notikumu klausītājus palielināšanas un samazināšanas pogām. Metodes increment() un decrement() atjaunina skaitli un izsauc metodi render(), lai atjauninātu komponentes renderēšanu. Metode render() iestata Shadow DOM iekšējo HTML, iekļaujot skaitītāja displeju un pogas.

Attēlu karuseļa komponente

Šis piemērs demonstrē, kā izveidot attēlu karuseļa komponenti, izmantojot pielāgotos elementus. Īsuma labad attēlu avoti ir vietturi un tos varētu dinamiski ielādēt no API, CMS vai lokālās krātuves. Arī stili ir samazināti līdz minimumam.

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

  Carousel Image
  

  
  
  

  

  `;
 }
}

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

Šis kods definē ImageCarousel klasi, kas paplašina HTMLElement. Konstruktors inicializē komponenti, pievieno Shadow DOM un iestata sākotnējo attēlu masīvu un pašreizējo indeksu. Metode connectedCallback() pievieno notikumu klausītājus iepriekšējās un nākamās pogām. Metodes nextImage() un prevImage() atjaunina pašreizējo indeksu un izsauc metodi render(), lai atjauninātu komponentes renderēšanu. Metode render() iestata Shadow DOM iekšējo HTML, iekļaujot pašreizējo attēlu un pogas.

Labākās prakses darbam ar pielāgotajiem elementiem

Šeit ir dažas labākās prakses, kuras jāievēro, strādājot ar pielāgotajiem elementiem:

Pielāgotie elementi un ietvari

Pielāgotie elementi ir izstrādāti tā, lai būtu savietojami ar citām tīmekļa tehnoloģijām un ietvariem. Tos var izmantot kopā ar populāriem ietvariem, piemēram, React, Angular un Vue.js.

Pielāgoto elementu izmantošana React

Lai izmantotu pielāgotos elementus React, jūs varat tos vienkārši renderēt kā jebkuru citu HTML elementu. Tomēr jums, iespējams, būs jāizmanto ref, lai piekļūtu pamatā esošajam DOM elementam un tieši ar to mijiedarbotos.

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

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

  useEffect(() => {
    if (myElementRef.current) {
      // Access the custom element's API
      myElementRef.current.addEventListener('custom-event', (event) => {
        console.log('Custom event received:', event.detail);
      });
    }
  }, []);

  return ;
}

export default MyComponent;

Šajā piemērā mēs izmantojam ref, lai piekļūtu pielāgotajam elementam my-element un pievienotu tam notikumu klausītāju. Tas ļauj mums klausīties pielāgotus notikumus, ko izsūta pielāgotais elements, un atbilstoši reaģēt.

Pielāgoto elementu izmantošana Angular

Lai izmantotu pielāgotos elementus Angular, jums ir jākonfigurē Angular, lai atpazītu pielāgoto elementu. To var izdarīt, pievienojot pielāgoto elementu masīvam schemas moduļa konfigurācijā.

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

Kad pielāgotais elements ir reģistrēts, jūs to varat izmantot savās Angular veidnēs kā jebkuru citu HTML elementu.

Pielāgoto elementu izmantošana Vue.js

Vue.js arī dabiski atbalsta pielāgotos elementus. Jūs varat tos izmantot tieši savās veidnēs bez īpašas konfigurācijas.

Vue automātiski atpazīs pielāgoto elementu un to pareizi renderēs.

Pieejamības apsvērumi

Veidojot pielāgotos elementus, ir ļoti svarīgi ņemt vērā pieejamību, lai nodrošinātu, ka jūsu komponentes var izmantot ikviens, ieskaitot cilvēkus ar invaliditāti. Šeit ir daži galvenie pieejamības apsvērumi:

Internacionalizācija un lokalizācija

Izstrādājot pielāgotos elementus globālai auditorijai, ir svarīgi apsvērt internacionalizāciju (i18n) un lokalizāciju (l10n). Šeit ir daži galvenie apsvērumi:

Noslēgums

Pielāgotie elementi ir spēcīgs rīks atkārtoti lietojamu un iekapsulētu UI komponenšu veidošanai. Tie piedāvā vairākas priekšrocības tīmekļa izstrādei, tostarp atkārtotu lietojamību, iekapsulēšanu, savietojamību, uzturēšanu un veiktspēju. Ievērojot šajā ceļvedī izklāstītās labākās prakses, jūs varat izmantot pielāgotos elementus, lai veidotu mūsdienīgas tīmekļa lietojumprogrammas, kas ir robustas, uzturamas un pieejamas globālai auditorijai. Tīmekļa standartiem turpinot attīstīties, tīmekļa komponentes, tostarp pielāgotie elementi, kļūs arvien svarīgākas modulāru un mērogojamu tīmekļa lietojumprogrammu izveidē.

Izmantojiet pielāgoto elementu spēku, lai veidotu tīmekļa nākotni, pa vienai komponentei. Atcerieties ņemt vērā pieejamību, internacionalizāciju un lokalizāciju, lai nodrošinātu, ka jūsu komponentes ir lietojamas ikvienam un visur.