Imaginați-vă că construiți un site pentru un client, un mic magazin mom-and-pop, care are doar două pagini.
Asta nu e mult. Deci, atunci când terminați de lucrat pe pagina de destinație și începeți pe pagina de contact, trebuie doar să creați un nou fișier HTML și să copiați tot codul de pe prima pagină.
Antetul și subsolul arată deja bine și tot ce trebuie să faceți este să schimbați restul conținutului.
Dar dacă clientul dvs. dorește 10 pagini? Sau 20? Și solicită modificări minore ale antetului și subsolului pe tot parcursul dezvoltării.
Dintr-o dată, orice modificare, oricât de mică, trebuie repetată în toate acele fișiere.
Aceasta este una dintre problemele majore rezolvate de lucruri precum React sau Handlebars.js: orice cod, în special lucruri structurale precum un antet sau un subsol, poate fi scris o dată și ușor reutilizat pe tot parcursul unui proiect.
Până de curând nu era posibil să se utilizeze componente în HTML vanilat și JavaScript. Dar odată cu introducerea componentelor web, este posibil să creați componente reutilizabile fără a utiliza lucruri precum React.
Ce sunt componentele web?
Componentele web sunt de fapt o colecție de câteva tehnologii diferite care vă permit să creați elemente HTML personalizate.
Aceste tehnologii sunt:
Șabloane HTML: Fragmente de marcare HTML folosind <template> elemente care nu vor fi redate până când nu sunt adăugate la pagină cu JavaScript.
Elemente personalizate: API-uri JavaScript acceptate pe scară largă, care vă permit să creați elemente DOM noi. Odată ce creați și înregistrați un element personalizat utilizând aceste API-uri, îl puteți utiliza în mod similar cu o componentă React.
Shadow DOM: Un DOM mai mic, încapsulat, care este izolat de DOM-ul principal și redat separat. Orice stiluri și scripturi pe care le creați pentru componentele personalizate din Shadow DOM nu vor afecta alte elemente din DOM-ul principal.
Chiar dacă acesta este un exemplu destul de simplu, puteți vedea deja cum utilizarea șabloanelor facilitează reutilizarea codului pe o pagină.
Problema principală este că, cel puțin cu exemplul actual, codul mesajului de întâmpinare este amestecat cu restul conținutului paginii. Dacă doriți să modificați mesajul de întâmpinare mai târziu, va trebui să schimbați codul în mai multe fișiere.
În schimb, puteți trage șablonul HTML în fișierul JavaScript, astfel încât orice pagină în care este inclus JavaScript va reda mesajul de întâmpinare:
Acum că totul este în fișierul JavaScript, nu este nevoie să creați un fișier <template> element – ați putea crea la fel de ușor un <div> sau <span>.
In orice caz, <template> elementele pot fi asociate cu un <slot> element, care vă permite să faceți lucruri precum schimbarea textului pentru elemente din <template>. Este puțin în afara sferei acestui tutorial, astfel încât să puteți citi mai multe despre <slot> elemente peste MDN.
Cum se creează elemente personalizate
Un lucru pe care l-ați fi observat cu șabloanele HTML este că poate fi dificil să introduceți codul în locul potrivit. Exemplul de mesaj de întâmpinare anterior a fost adăugat doar la pagină.
Dacă deja există conținut pe pagină, să zicem, o imagine a bannerului, mesajul de întâmpinare va apărea sub aceasta.
Ca element personalizat, mesajul dvs. de bun venit ar putea arăta astfel:
<welcome-message></welcome-message>
Și îl puteți pune oriunde doriți pe pagină.
Având în vedere acest lucru, să aruncăm o privire asupra elementelor personalizate și să creăm propriile noastre elemente antet și subsol de tip React.
Înființat
Pentru un site de portofoliu, este posibil să aveți un cod boilerplate care arată astfel:
Fiecare pagină va avea același antet și subsol, deci este logic să creați un element personalizat pentru fiecare dintre acestea.
Să începem cu antetul.
Definiți un element personalizat
Mai întâi, creați un director numit components și în interiorul acelui director, creați un nou fișier numit header.js cu următorul cod:
Este doar un simplu ES5 Class declarându-vă obiceiul Header componentă, cu constructor metoda si speciala super cuvânt cheie. Puteți citi mai multe despre acestea pe MDN.
Prin extinderea genericului HTMLElement clasă, puteți crea orice fel de element doriți. De asemenea, este posibil să extindeți elemente specifice cum ar fi HTMLParagraphElement.
Înregistrați-vă elementul personalizat
Înainte de a putea începe să utilizați elementul personalizat, va trebui să îl înregistrați cu customElements.define() metodă:
Această metodă ia cel puțin două argumente.
Primul este un DOMString veți folosi atunci când adăugați componenta la pagină, în acest caz, <header-component></header-component>.
Următoarea este clasa componentei pe care ați creat-o mai devreme, aici, Header clasă.
Al treilea argument opțional descrie din care element HTML existent moștenește proprietățile elementului personalizat, de exemplu, {extends: 'p'}. Dar nu vom folosi această caracteristică în acest tutorial.
Folosiți apeluri de apel pentru ciclul de viață pentru a adăuga antetul la pagină
Există patru apeluri speciale pentru ciclul de viață pentru elementele personalizate pe care le putem folosi pentru a adăuga reducerea antetului la pagină: connectedCallback, attributeChangeCallback, disconnectedCallback, și adoptedCallback.
Dintre aceste apeluri de apel, connectedCallback este una dintre cele mai frecvent utilizate. connectedCallback rulează de fiecare dată când elementul dvs. personalizat este inserat în DOM.
Puteți citi mai multe despre celelalte apeluri de apel aici.
Pentru exemplul nostru simplu, connectedCallback este suficient pentru a adăuga un antet la pagină:
Apoi în index.html, adaugă components/header.js script și <header-component></header-component> chiar deasupra <main> element:
Iar componenta antet reutilizabilă ar trebui redată paginii:
Acum, adăugarea unui antet la pagină este la fel de ușor ca adăugarea unui <script> eticheta care indică spre components/header.jsși adăugând <header-component></header-component> oriunde vrei.
Rețineți că, deoarece antetul și stilul său sunt inserate direct în DOM-ul principal, este posibil să îl coafați în styles.css fişier.
Dar dacă vă uitați la stilurile de antet incluse în connectedCallback, sunt destul de generale și pot afecta alte stiluri de pe pagină.
De exemplu, dacă adăugăm următoarea componentă de subsol:
Iată cum ar arăta pagina:
Stilul din componenta subsolului suprascrie stilul pentru antet, schimbând culoarea legăturilor. Acesta este comportamentul așteptat pentru CSS, dar ar fi frumos dacă stilul fiecărei componente ar fi inclus în componenta respectivă și nu ar afecta alte lucruri de pe pagină.
Ei bine, tocmai acolo strălucește Shadow DOM. Sau nuanțe? Oricum, Shadow DOM poate face asta.
Cum se folosește Shadow DOM cu elemente personalizate
Shadow DOM acționează ca o instanță separată, mai mică, a DOM-ului principal. În loc să acționeze ca o copie a DOM-ului principal, Shadow DOM seamănă mai degrabă cu un subarborel doar pentru elementul dvs. personalizat. Orice element adăugat într-un Shadow DOM, în special stilurile, are ca obiect acel element particularizat.
Într-un fel, este ca și cum ai folosi const și let Decat var.
Să începem prin refactorizarea componentei antet:
Primul lucru pe care trebuie să-l faci este să folosești fișierul .attachShadow() metodă pentru a atașa o rădăcină umbra elementului dvs. personalizat de antet. În connectedCallback, adăugați următorul cod:
Observați că îi transmitem un obiect .attachShadow() cu o opțiune, mode: 'closed'. Acest lucru înseamnă doar că DOM-ul umbră al componentei antet este inaccesibil din JavaScript extern.
Dacă doriți să manipulați ulterior componenta antet DOM ulterioară cu JavaScript în afara components/header.js fișier, schimbați opțiunea la mode: 'open'.
În cele din urmă, adăugați shadowRoot la pagina cu .appendChild() metodă:
Și acum, deoarece stilurile componentei antet sunt încapsulate în Shadow DOM, pagina ar trebui să arate astfel:
Iată cum arată codul final în toate fișierele după refactorizarea componentei de subsol:
În încheiere
Am acoperit multe aici și este posibil să fi decis deja să folosiți React sau Handlebars.js.
Acestea sunt ambele opțiuni grozave!
Totuși, pentru un proiect mai mic în care veți avea nevoie doar de câteva componente reutilizabile, o bibliotecă întreagă sau un limbaj de șablonare ar putea fi exagerat.
Sperăm că acum aveți încrederea în a vă crea propriile componente HTML reutilizabile. Acum ieșiți acolo și creați ceva grozav (și reutilizabil).
Routech is a website that provides technology news, reviews and tips. It covers a wide range of topics including smartphones, laptops, tablets, gaming, gadgets, software, internet and more. The website is updated daily with new articles and videos, and also has a forum where users can discuss technology-related topics.
When you login first time using a Social Login button, we collect your account public profile information shared by Social Login provider, based on your privacy settings. We also get your email address to automatically create an account for you in our website. Once your account is created, you'll be logged-in to this account.
DisagreeAgree
Connect with
I allow to create an account
When you login first time using a Social Login button, we collect your account public profile information shared by Social Login provider, based on your privacy settings. We also get your email address to automatically create an account for you in our website. Once your account is created, you'll be logged-in to this account.