Veebikomponendid: Taaskasutatavate elementide loomine kaasaegse veebi jaoks

Tänapäeva kiiresti areneval veebiarenduse maastikul on modulaarse, taaskasutatava ja hooldatava koodi loomine esmatähtis. Veebikomponendid pakuvad võimsat lahendust just selleks: kohandatud, kapseldatud ja koostalitlusvõimeliste UI elementide ehitamiseks, mida saab kasutada erinevates veebiprojektides ja raamistikes. See põhjalik juhend süveneb veebikomponentide põhimõistetesse, uurib nende eeliseid ja pakub praktilisi näiteid alustamiseks.

Mis on veebikomponendid?

Veebikomponendid on veebistandardite kogum, mis võimaldab teil luua taaskasutatavaid kohandatud HTML-elemente koos kapseldatud stiili ja käitumisega. Need võimaldavad teil sisuliselt laiendada HTML-i enda võimekust, ehitades kohandatud silte, mida saab käsitleda nagu iga teist standardset HTML-elementi.

Mõelge neist kui veebi Lego klotsidest. Iga klots (veebikomponent) esindab teatud funktsionaalsust ja neid klotse kombineerides saate ehitada keerukaid kasutajaliideseid. Veebikomponentide ilu seisneb nende taaskasutatavuses ja isolatsioonis; neid saab kasutada mis tahes veebiprojektis, olenemata kasutatavast raamistikust (või isegi ilma raamistikuta), ning nende sisemine stiil ja käitumine ei sega ülejäänud rakenduse tööd.

Veebikomponentide põhitehnoloogiad

Veebikomponendid on ehitatud neljale põhitehnoloogiale:

• Kohandatud elemendid (Custom Elements): Võimaldavad teil defineerida oma HTML-elemente ja nende käitumist.
• Shadow DOM: Pakub elemendi stiilide ja märgistuse kapseldamist, vältides stiilikonflikte ülejäänud lehega.
• HTML-mallid (HTML Templates): Pakuvad võimalust defineerida taaskasutatavaid HTML-struktuure, mida saab kloonida ja DOM-i sisestada.
• HTML Imports (Aegunud): Kuigi tehniliselt osa algsest veebikomponentide spetsifikatsioonist, on HTML Imports suures osas asendatud JavaScripti moodulitega. Keskendume kaasaegsele JavaScripti moodulite kasutamisele.

Veebikomponentide kasutamise eelised

Veebikomponentide kasutuselevõtt arendustöös pakub mitmeid eeliseid:

• Taaskasutatavus: Veebikomponendid on väga hästi taaskasutatavad erinevates projektides ja raamistikes. Kui olete komponendi loonud, saate selle hõlpsasti integreerida mis tahes muusse veebirakendusse.
• Kapseldamine: Shadow DOM pakub suurepärast kapseldamist, vältides stiili- ja skriptikonflikte ülejäänud lehega. See muudab teie komponendid robustsemaks ja lihtsamini hooldatavaks.
• Koostalitlusvõime: Veebikomponendid on raamistikust sõltumatud. Neid saab kasutada mis tahes JavaScripti raamistikuga (React, Angular, Vue.js jne) või isegi ilma raamistikuta.
• Hooldatavus: Veebikomponentide modulaarne ja kapseldatud olemus muudab nende hooldamise ja uuendamise lihtsamaks. Komponendi muudatused ei mõjuta teie rakenduse teisi osi.
• Standardimine: Veebikomponendid põhinevad veebistandarditel, tagades pikaajalise ühilduvuse ja brauseritoe.

Lihtne näide: Kohandatud loenduri elemendi loomine

Illustreerime põhilise veebikomponendi loomist: kohandatud loenduri element.

1. Defineerige kohandatud elemendi klass

Esmalt defineerime JavaScripti klassi, mis laiendab `HTMLElement` klassi.

            class MyCounter extends HTMLElement {
 constructor() {
 super();
 // Kinnitage elemendi külge shadow DOM.
 this.attachShadow({ mode: 'open' });

 // Initsialiseerige loenduri väärtus.
 this._count = 0;

 // Looge nupu element.
 this.button = document.createElement('button');
 this.button.textContent = 'Suurenda';
 this.shadowRoot.appendChild(this.button);

 //Looge span element loenduri kuvamiseks.
 this.span = document.createElement('span');
 this.span.textContent = `Väärtus: ${this._count}`;
 this.shadowRoot.appendChild(this.span);

 // Siduge suurendamise meetod nupu klõpsamise sündmusega.
 this.button.addEventListener('click', this.increment.bind(this));
 }

 increment() {
 this._count++;
 this.span.textContent = `Väärtus: ${this._count}`;
 }

 connectedCallback() {
 console.log('Kohandatud element ühendati DOM-iga.');
 }

 disconnectedCallback() {
 console.log('Kohandatud element eemaldati DOM-ist.');
 }

 adoptedCallback() {
 console.log('Kohandatud element teisaldati uude dokumenti.');
 }

 attributeChangedCallback(name, oldValue, newValue) {
 console.log(`Atribuut ${name} muudeti väärtusest ${oldValue} väärtuseks ${newValue}.`);
 }

 static get observedAttributes() {
 return ['count'];
 }
}

            

              
                Copy
              
            
          

2. Defineerige Shadow DOM

Rida `attachShadow({ mode: 'open' })` kinnitab elemendi külge shadow DOM-i. Valik `mode: 'open'` võimaldab välisel JavaScriptil shadow DOM-ile juurde pääseda, samas kui `mode: 'closed'` takistaks välist juurdepääsu.

3. Registreerige kohandatud element

Järgmisena registreerime kohandatud elemendi brauseris, kasutades meetodit `customElements.define()`.

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

            

              
                Copy
              
            
          

4. Kohandatud elemendi kasutamine HTML-is

Nüüd saate oma HTML-is kasutada `` elementi nagu iga teist HTML-elementi.

            <my-counter></my-counter>

            

              
                Copy
              
            
          

See kood renderdab nupu sildiga "Suurenda" ja span-elemendi, mis kuvab hetkeväärtust (alustades 0-st). Nupule klõpsamine suurendab loendurit ja uuendab kuva.

Sügavamale sukeldumine: Shadow DOM ja kapseldamine

Shadow DOM on veebikomponentide ülioluline aspekt. See tagab kapseldamise, luues komponendi jaoks eraldi DOM-puu, mis isoleerib selle stiilid ja käitumise ülejäänud lehest. See hoiab ära stiilikonfliktid ja tagab, et komponent käitub prognoositavalt, olenemata ümbritsevast keskkonnast.

Shadow DOM-i sees saate määratleda CSS-stiile, mis kehtivad ainult komponendi sisemistele elementidele. See võimaldab teil luua iseseisvaid komponente, mis ei sõltu välistest CSS-stiililehtedest.

Näide: Shadow DOM-i stiilimine

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

 // Looge stiili element shadow DOM-i jaoks
 const style = document.createElement('style');
 style.textContent = `
 button {
 background-color: #4CAF50;
 color: white;
 padding: 10px 20px;
 border: none;
 cursor: pointer;
 }
 span {
 margin-left: 10px;
 font-weight: bold;
 }
 `;
 this.shadowRoot.appendChild(style);

 // Initsialiseerige loenduri väärtus.
 this._count = 0;

 // Looge nupu element.
 this.button = document.createElement('button');
 this.button.textContent = 'Suurenda';
 this.shadowRoot.appendChild(this.button);

 //Looge span element loenduri kuvamiseks.
 this.span = document.createElement('span');
 this.span.textContent = `Väärtus: ${this._count}`;
 this.shadowRoot.appendChild(this.span);

 // Siduge suurendamise meetod nupu klõpsamise sündmusega.
 this.button.addEventListener('click', this.increment.bind(this));
 }

            

              
                Copy
              
            
          

Selles näites kehtivad `style` elemendis määratletud CSS-stiilid ainult `my-counter` komponendi shadow DOM-is asuvatele nupu ja span-elementidele. Need stiilid ei mõjuta ühtegi teist nuppu ega span-elementi lehel.

HTML-mallid: Taaskasutatavate struktuuride defineerimine

HTML-mallid pakuvad võimalust defineerida taaskasutatavaid HTML-struktuure, mida saab kloonida ja DOM-i sisestada. Need on eriti kasulikud keerukate komponentide paigutuste loomisel.

Näide: HTML-mallide kasutamine

            <template id="counter-template">
 <style>
 button {
 background-color: #4CAF50;
 color: white;
 padding: 10px 20px;
 border: none;
 cursor: pointer;
 }
 span {
 margin-left: 10px;
 font-weight: bold;
 }
 </style>
 <button>Suurenda</button>
 <span>Väärtus: <span id="count-value">0</span></span>
</template>

<script>
class MyCounter extends HTMLElement {
 constructor() {
 super();
 this.attachShadow({ mode: 'open' });

 const template = document.getElementById('counter-template');
 const templateContent = template.content;
 this.shadowRoot.appendChild(templateContent.cloneNode(true));

 this.button = this.shadowRoot.querySelector('button');
 this.span = this.shadowRoot.querySelector('#count-value');
 this._count = 0;
 this.span.textContent = this._count;
 this.button.addEventListener('click', this.increment.bind(this));
 }

 increment() {
 this._count++;
 this.span.textContent = this._count;
 }
}

customElements.define('my-counter', MyCounter);
</script>

            

              
                Copy
              
            
          

Selles näites defineerime HTML-malli ID-ga `counter-template`. Mall sisaldab meie loenduri komponendi HTML-struktuuri ja CSS-stiile. `MyCounter` klassi sees kloonime malli sisu ja lisame selle shadow DOM-i. See võimaldab meil taaskasutada malli struktuuri iga `my-counter` komponendi eksemplari jaoks.

Atribuudid ja omadused

Veebikomponentidel võivad olla nii atribuudid kui ka omadused. Atribuudid defineeritakse HTML-märgistuses, samas kui omadused defineeritakse JavaScripti klassis. Atribuutide muudatused võivad kajastuda omadustes ja vastupidi.

Näide: Atribuutide defineerimine ja kasutamine

            class MyGreeting extends HTMLElement {
 constructor() {
 super();
 this.attachShadow({ mode: 'open' });
 this.shadowRoot.innerHTML = `<p>Tere, <span id="name"></span>!</p>`;
 this.nameSpan = this.shadowRoot.querySelector('#name');
 }

 static get observedAttributes() {
 return ['name'];
 }

 attributeChangedCallback(name, oldValue, newValue) {
 if (name === 'name') {
 this.nameSpan.textContent = newValue;
 }
 }
}

customElements.define('my-greeting', MyGreeting);

            

              
                Copy
              
            
          

            <my-greeting name="Maailm"></my-greeting>
<my-greeting name="Alice"></my-greeting>

            

              
                Copy
              
            
          

Selles näites defineerime `my-greeting` komponendi jaoks `name` atribuudi. `observedAttributes` getter ütleb brauserile, milliseid atribuute muudatuste osas jälgida. Kui `name` atribuut muutub, kutsutakse välja `attributeChangedCallback` meetod ja me uuendame `span` elemendi sisu uue nimega.

Elutsükli tagasikutsed (Lifecycle Callbacks)

Veebikomponentidel on mitu elutsükli tagasikutset, mis võimaldavad teil käivitada koodi komponendi elutsükli erinevates etappides:

• connectedCallback(): Kutsutakse välja, kui element on DOM-iga ühendatud.
• disconnectedCallback(): Kutsutakse välja, kui element on DOM-ist lahti ühendatud.
• adoptedCallback(): Kutsutakse välja, kui element on teisaldatud uude dokumenti.
• attributeChangedCallback(): Kutsutakse välja, kui elemendi atribuuti muudetakse.

Need tagasikutsed pakuvad võimalusi lähtestamise, puhastamise ja muude komponendi elutsükliga seotud ülesannete täitmiseks.

Brauseri ühilduvus ja polüfillid

Veebikomponente toetavad kõik kaasaegsed brauserid. Vanemad brauserid võivad aga vajaliku funktsionaalsuse tagamiseks vajada polüfille. Polüfillide teek `webcomponents.js` pakub laiaulatuslikku tuge veebikomponentidele vanemates brauserites. Polüfilli lisamiseks kasutage järgmist skripti silti:

            <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.6.0/webcomponents-loader.js"></script>
            

              
                Copy
              
            
          

Üldiselt on soovitatav kasutada funktsioonide tuvastamise lähenemist, laadides polüfilli ainult siis, kui brauser ei toeta veebikomponente loomulikult.

Täpsemad tehnikad ja parimad praktikad

Komponentide komponeerimine

Veebikomponente saab omavahel komponeerida, et luua keerukamaid UI elemente. See võimaldab teil ehitada väga modulaarseid ja taaskasutatavaid rakendusi.

Sündmuste käsitlemine

Veebikomponendid saavad saata ja kuulata kohandatud sündmusi. See võimaldab komponentidel suhelda üksteise ja ülejäänud rakendusega.

Andmesidumine

Kuigi veebikomponendid ei paku sisseehitatud andmesidumismehhanisme, saate andmesidumise rakendada kohandatud koodi abil või integreerides andmesidumise teegiga.

Juurdepääsetavus

On oluline tagada, et teie veebikomponendid oleksid juurdepääsetavad kõigile kasutajatele, sealhulgas puuetega inimestele. Järgige oma komponentide kujundamisel ja rakendamisel juurdepääsetavuse parimaid praktikaid.

Veebikomponendid reaalses maailmas: Rahvusvahelised näited

Ettevõtted ja organisatsioonid üle maailma kasutavad veebikomponente kaasaegsete ja taaskasutatavate kasutajaliideste ehitamiseks. Siin on mõned näited:

• Google: Kasutab veebikomponente laialdaselt oma Material Design komponentide teegis.
• Salesforce: Kasutab veebikomponente oma Lightning Web Components raamistikus.
• SAP: Kasutab veebikomponente oma Fiori UI raamistikus.
• Microsoft: Kasutab FAST-i, avatud lähtekoodiga veebikomponentidel põhinevat raamistikku, disainisüsteemide ehitamiseks.

Need on vaid mõned näited sellest, kuidas veebikomponente reaalses maailmas kasutatakse. Tehnoloogia kogub üha enam tuntust, kuna arendajad tunnistavad selle eeliseid modulaarsete, taaskasutatavate ja hooldatavate veebirakenduste ehitamisel.

Kokkuvõte

Veebikomponendid pakuvad võimsat lähenemist taaskasutatavate UI elementide ehitamiseks kaasaegse veebi jaoks. Kasutades kohandatud elemente, shadow DOM-i ja HTML-malle, saate luua iseseisvaid komponente, mida saab kasutada erinevates projektides ja raamistikes. Veebikomponentide omaksvõtmine võib viia modulaarsemate, hooldatavamate ja skaleeritavamate veebirakendusteni. Veebistandardite arenedes mängivad veebikomponendid jätkuvalt otsustavat rolli veebiarenduse tuleviku kujundamisel.

Lisalugemist

• MDN veebikomponentide dokumentatsioon
• WebComponents.org
• Lit: Lihtne teek kiirete ja kergete veebikomponentide ehitamiseks.
• Stencil: Kompilaator, mis genereerib veebikomponente.

Alustage juba täna veebikomponentidega katsetamist ja avage oma veebiarendusprojektides taaskasutatavate UI elementide võimsus!