Conţinut
- Ce sunt componentele web?
- Cei 4 piloni ai componentelor web
- 01. Elemente personalizate
- 02. Șabloane HTML
- 03. Shadow DOM
- 04. Module ES și HTML
Cu componentele web, dezvoltatorii au acum capacitatea de a-și crea propriile elemente HTML. În acest ghid final, veți afla tot ce trebuie să știți. Pe această pagină, vom acoperi exact ce sunt componentele web, avantajele utilizării acestora și elementele care le compun.
Apoi veți învăța cum să vă construiți propriile componente în două tutoriale scurte - la pagina 2 veți afla cum să construiți o componentă cu șabloanele HTML și API-urile shadowDOM, iar la pagina 3 veți face un pas mai departe și veți afla cum pentru a construi un element personalizat, încorporat.
În cele din urmă, la pagina 4 veți găsi câteva cadre și instrumente pentru a vă ajuta să începeți și exemple de elemente existente pe care să le încercați astăzi. (Pentru mai multe instrumente, consultați rezumatul instrumentelor noastre de design web și alegerea celor mai buni constructori de site-uri web.)
În timp ce sunteți aici, vă recomandăm să consultați ghidul nostru pentru API-urile HTML de top și cum să le utilizați, precum și exemplele noastre de top ale defilării în paralaxă.
Ce sunt componentele web?
Dezvoltatorii adoră componentele. Acestea sunt o modalitate excelentă de a defini blocuri de cod care pot fi introduse și reutilizate oriunde sunt necesare. De-a lungul anilor, au existat câteva încercări de a transmite această idee pe web, cu diferite grade de succes.
Limbajul de legare XML Mozilla și specificațiile componentelor HTML ale Microsoft datează de pe Internet Explorer 5 în urmă cu aproape 20 de ani. Din păcate, ambele încercări s-au dovedit dificile, nu au reușit să câștige tracțiune în alte browsere și, în cele din urmă, au fost eliminate. Deși s-ar putea să nu fie în prezent, conceptele lor au stat la baza abordărilor moderne utilizate.
Cadrele JavaScript precum React, Vue sau Angular urmează o abordare similară. Unul dintre principalele motive pentru succesul lor este abilitatea de a conține logica comună într-un model ușor de partajat într-o formă sau alta.
Deși aceste cadre pot îmbunătăți experiența dezvoltatorului (la fel ca și serviciul perfect de găzduire web), fac acest lucru la un cost. Caracteristicile limbajului, cum ar fi JSX, trebuie să fie compilate, iar multe cadre se bazează pe un timp de rulare pentru a gestiona toate abstractizările lor. Nu ar fi mai ușor dacă ar exista o modalitate de a obține beneficiul fără o greutate atât de mare? Componentele web ne permit să facem exact asta.
Creați un site cu conținut media greu? Obțineți copiile de rezervă de care aveți nevoie cu aceste opțiuni de stocare în cloud.
Cei 4 piloni ai componentelor web
Conceptul de componentă web constă din trei API-uri - elemente personalizate, șabloane HTML și shadow DOM - cu module JavaScript care le lipesc. Combinând avantajele pe care aceste tehnologii le oferă, este posibil să începeți să creați elemente HTML personalizate care să arate și să se comporte la fel ca omologii lor nativi.
Utilizarea unei componente web este la fel ca și utilizarea oricărui alt element HTML existent. Ele pot fi configurate folosind atribute, solicitate pentru utilizarea JavaScript și chiar stilizate prin CSS. Atâta timp cât browserul știe că există, acestea nu sunt tratate diferit.
Acest lucru permite, de asemenea, componentelor web să se joace bine cu alte cadre și biblioteci. Folosind aceleași mecanisme de comunicare ca orice alt element, ele pot fi utilizate alături de orice cadru care există astăzi sau în viitor.
Cel mai important, toate acestea sunt construite pe baza standardelor web. Web-ul este construit pe un concept de compatibilitate inversă și, construind o componentă web astăzi, va continua să funcționeze pentru anii următori.
Dar, înainte de a merge mai departe, ar trebui să aruncăm o privire la ceea ce alcătuiește aceste specificații și la modul în care puteți crea și utiliza una astăzi.
01. Elemente personalizate
Caracteristici cheie:
- Definiți comportamentul unui element
- Reacționează la modificările atributelor
- Măriți elementele existente
Când auziți oamenii vorbind despre „componente web”, se referă destul de des la funcționarea de dedesubt - API-ul elementelor personalizate.
Cu acest API, este posibil să creați clase care să alimenteze funcționarea interioară a unui element. Acestea detaliază exact ce trebuie făcut atunci când un element este adăugat, actualizat sau eliminat.
clasa ExampleElement extinde HTMLElement {static get observeAttributes () {return [...]; } attributeChangedCallback (name, oldValue, newValue) {} connectedCallback () {}} customElements.define ("example-element", ExampleElement);
Fiecare element personalizat are o structură similară. Ele extind un existent HTMLElement class, care oferă baza pentru modul în care un element ar trebui să se comporte.
În interior, există câteva metode numite reacții care sunt numite ca răspuns la ceva despre schimbarea acelui element. De exemplu, connectedCallback va fi apelat când noul element apare pe ecran. Acestea funcționează similar cu metodele ciclului de viață găsite în majoritatea cadrelor JavaScript.
Actualizarea atributelor unui element poate schimba modul în care se comportă. Când se întâmplă o actualizare, attributeChangedCallback reacția va declanșa, ceea ce detaliază schimbarea. Acest lucru se va întâmpla numai pentru un atribut care este definit în matricea observeAttributes.
Trebuie definit un element înainte ca browserul să poată face ceva cu el. defini metoda de aici ia două argumente - numele etichetei și clasa pe care ar trebui să o folosească. Toate numele etichetelor trebuie să conțină un - caracter pentru a evita orice ciocnire cu orice elemente native native viitoare.
element-exemplu> Conținut / element-exemplu>
Elementul poate fi apoi scris oriunde în pagină ca o etichetă HTML obișnuită. După ce un browser are un element definit, apoi găsește oricare dintre aceste etichete potrivite și leagă comportamentul acestora de clasă într-un proces cunoscut sub numele de „actualizare”.
Există două tipuri de elemente personalizate - „autonom” sau „încorporat personalizat”. Elementele personalizate autonome, care au fost acoperite până acum, nu sunt legate de niciun element existent. La fel ca un div> sau span> nu oferă niciun sens conținutului lor.
Un element încorporat personalizat - așa cum sugerează și numele - poate îmbunătăți un element existent cu funcționalități noi. Acestea mențin comportamentele semantice normale ale acelui element, fiind în același timp deschise schimbării. Daca un intrare> elementul a fost personalizat, de exemplu, ar fi totuși preluat și trimis ca parte a unui formular.
clasa CustomInput extinde HTMLInputElement {} customElements.define ("custom-input", CustomInput, {extends: "input"});
Clasa componentei încorporate personalizate extinde clasa elementului pe care îl personalizează. Definiția trebuie, de asemenea, să definească eticheta acelui element prin intermediul celui de-al treilea argument al acestuia.
input este = "input-custom" />
De asemenea, se folosesc ușor diferit. În loc de o nouă etichetă, ele extind eticheta existentă utilizând este atribut. Browserul poate citi acest lucru și le poate actualiza în același mod ca și o componentă autonomă.
În timp ce majoritatea browserelor acceptă elemente personalizate autonome, numai Chrome și Firefox acceptă elemente încorporate personalizate. Dacă sunt utilizate într-un browser care nu le acceptă, acestea vor reveni la versiunile obișnuite ale elementelor pe care le personalizează, ceea ce le poate face să fie utilizate în siguranță.
02. Șabloane HTML
- Creați structuri gata făcute
- Inert până la chemare
- Conține HTML, CSS și JS
Din punct de vedere istoric, șablonarea bazată pe browser implica cusături de șiruri împreună în JavaScript sau utilizarea unei biblioteci precum Handlebars pentru a analiza un marcaj special de bloc. Mai recent, specificația șabloanelor HTML a definit fișierul șablon> etichetă, care poate conține orice este posibil să fie reutilizat.
template id = "tweet"> div> span> / span> Scris de @span> / span> / div> / template>
În sine, nu are aparență și rămâne inert, ceea ce înseamnă că nimic din interior nu este analizat sau executat până când nu i se spune, inclusiv cereri pentru suporturi externe precum imagini sau videoclipuri. Nici JavaScript nu poate interoga conținutul, deoarece browserele îl vor vedea doar ca un element gol.
șablon const = document. getElementById („tweet”); const node = document. importNode (template.content, adevărat); document.body.appendChild (nod);
O interogare obișnuită va prelua fișierul șablon> element în sine. importNode metoda creează o copie a conținutului său, al doilea argument spunându-i să ia o copie profundă a tuturor. În cele din urmă, poate fi adăugat la document ca orice alt element.
Șabloanele pot conține orice poate face o pagină HTML, inclusiv CSS și JavaScript. De îndată ce elementul este aplicat paginii, acele stiluri se aplică și scripturile se execută. Rețineți că acestea vor rula la nivel global și, prin urmare, pot înlocui stilurile și valorile dacă nu se acordă atenție.
Cea mai bună parte despre șabloane este că acestea nu se limitează doar la componentele web. Exemplele de aici se aplică oricărei pagini web, dar devin deosebit de puternice atunci când sunt împerecheate cu componente web, în special DOM umbră.
03. Shadow DOM
- Evitați scurgerea stilurilor
- Denumirea devine mai simplă
- Păstrați logica de implementare în interior
Modelul de obiect document - sau „DOM” - este modul în care browserul interpretează structura unei pagini. Citind codul HTML, acesta creează o idee despre ce elemente din pagină conțin ce conținut și îl folosește pentru a decide ce să afișeze. Când folosiți ceva de genul document.getElementById () browserul caută de fapt prin DOM.
Poate că este bine pentru aspectul unei pagini, dar ce se întâmplă cu detaliile de implementare în interiorul unui element? Paginile nu ar trebui să vă faceți griji cu privire la ceea ce alcătuiește interfața dintr-un video> element de exemplu. Aici intervine umbra DOM.
div id = "shadow-root"> / div> script> const host = document. getElementById ("shadow-host"); const shadow = host.attachShadow ({mode: "open"}); / script>
Un DOM umbrelă este creat atunci când este aplicat unui element. Orice conținut poate fi adăugat la umbra DOM la fel ca DOM obișnuit - sau „luminos” -, dar nu are niciun efect asupra a ceea ce se întâmplă în afara acestuia.La fel, nimic din DOM luminos nu poate accesa direct DOM umbră. Acest lucru înseamnă că putem adăuga clase, stiluri și scripturi oriunde în umbra DOM, fără a ne îngrijora de ciocniri.
Cea mai bună utilizare a shadow DOM cu componente web vine atunci când este asociat cu un element personalizat. Având un DOM umbrel responsabil de conținut, de fiecare dată când această componentă este refolosită, stilurile și structura acesteia nu vor afecta restul paginii.
04. Module ES și HTML
- Adăugați acolo unde este necesar
- Nu este necesară o etapă de construcție
- Păstrați totul într-un singur loc
În timp ce precedentele trei specificații au avut căi relativ simple spre succes, ambalarea și reutilizarea acestora au fost de mult timp un punct de aderență.
Inițial, specificațiile pentru importurile HTML defineau o modalitate prin care browserele pot include documente HTML, la fel ca și CSS sau JavaScript. Acest lucru ar permite elementelor personalizate, împreună cu șabloanele și DOM-urile lor, să trăiască în altă parte și importate după cum este necesar.
Firefox a ales să nu implementeze importuri HTML în browserul său și, în schimb, a favorizat o specificație mai nouă în ceea ce privește importul modulului JavaScript.
clasa de export ExampleElement extinde HTMLElement {...}
importați {ExampleElement} din „ExampleElement.js”;
Modulele nu își aplică conținutul la nivel global în mod implicit. Marcând anumite variabile, funcții sau clase ca exportate, acestea pot fi apoi importate de orice are nevoie de ele și utilizate ca și cum ar fi locale.
Acesta este un mare ajutor pentru componentele web, deoarece un element personalizat care conține un șablon și un DOM umbră poate fi exportat dintr-un fișier și adăugat în altul. Atâta timp cât este definit undeva de-a lungul liniei, este gata de utilizare.
importați {ExampleElement} din „ExampleElement.html”;
A fost propusă o extensie a acestei specificații pentru a readuce o parte din ușurința importurilor HTML, alături de importurile de module. Acestea vor permite componentelor web să fie scrise folosind HTML declarativ și semantic. Condusă de Microsoft, această caracteristică va ajunge în curând pe Chrome și browserul Edge alimentat de Chromium.
Pagina următoare: Cum să construiți propriile componente
