Share
În tutorialul anterior "Cum să" Lazy Load "Embedded YouTube Videos" am analizat modul de încărcare a unui videoclip Youtube numai atunci când un utilizator face clic pe el. Acest lucru, la rândul său, ajută încărcarea paginii web puțin mai repede, mai ales dacă conține mai multe videoclipuri Youtube.
Dacă ați urmat temeinic tutorialul, ați văzut că trebuie să adăugăm câteva div elemente, împreună cu clase, stilurile și scripturile pentru a funcționa.
Dacă trebuie să adăugați toate acestea de fiecare dată, nu este cea mai convenabilă abordare; dacă aș fi putut înlocui toate acestea folosind un element de tip out-of-the-box, cum ar fi
# Umbra-rădăcină? Citiți mai departe pentru a afla mai multeÎnainte de a vă pune mâinile murdare, cu toate acestea, vă încurajez foarte mult să priviți într-unul dintre tutorialele fantastice ale lui Kezz Bracey, Cum să creați propriile elemente HTML cu componente Web. Acest lucru vă va oferi o perspectivă asupra Componentelor Web și lucruri precum "Shadow DOM" (cunoscut și sub numele de "Shadow Root"), Importurile HTML și element.
În primul rând, trebuie să creați un nou fișier HTML. O vom numi "youtube-embed.html". Acest fișier va conține tot codul pentru înregistrarea și construirea noului nostru element,
Acesta va include următorul cod JavaScript, așa că haideți să aruncăm o privire asupra oaselor goale:
Accentsconagua
(funcția (fereastră, document, nedefinit) // (1) var thatDoc = document; var thisDoc = (thatDoc._currentScript || thatDoc.currentScript) .ownerDocument; // var template = thisDoc.querySelector ') .content; // (3) var YoutubeProto = Object.create (HTMLElement.prototype); // (4) YoutubeProto.createdCallback = function () // (5) var shadowRoot = this.createShadowRoot clone = thatDoc.importNode (șablon, adevărat); shadowRoot.appendChild (clone); // Adăugați codul personalizat aici ...; // (6) window.youtubeEmbed = thatDoc.registerElement ('youtube-embed', prototype: YoutubeProto );) (fereastră, document);Destul de puține lucruri, dar numerotate logic, așa că haideți să aruncăm o privire la ceea ce face:
thatDoc, se referă la documentul principal în care implementăm elementul personalizat. A doua variabilă, thisDoc, este documentul în care înregistrăm noul nostru element HTML, în acest caz este youtube-embed.html.HTMLElement obiect. Acest lucru va permite noului nostru element să moștenească metode și proprietăți ale oricărui element HTML cum ar fi id, numele clasei, clientHeith, scrollTop, și childeNodes.createdCallback este funcția care va fi instanțiată imediat când este creat noul element.Apoi, în cadrul principal document, în cazul în care videoclipurile noastre vor fi încorporate, vom importa youtube-embed.html.
Componentele Web reprezintă o serie de tehnologii web (Șablon, Import HTML, Element personalizat și DOM Shadow). Unele browsere, cum ar fi Opera și Chrome, acceptă deja aceste funcții, însă Firefox, Edge și Safari au propriile lor viziuni cu privire la susținerea acestora, prin faptul că le suportă doar parțial sau deloc.
Deci, dacă doriți ca elementul dvs. să fie aplicabil într-o gamă largă de browsere (bineînțeles că faceți acest lucru), trebuie să încărcați și Web Components polyfill.
După ce am făcut toate aceste lucruri și am pus fișierele în locul lor, suntem gata să adăugăm celelalte fragmente de cod pentru a face ca elementul personalizat să vină în viață.
Pentru început, în "youtube-embed.html", adăugăm element. Apoi am cuibărit div și stilurile pe care le-am creat în tutorialul nostru anterior.
În acest moment, dacă ne descurcăm div elementele și stilurile pe care le-am adăugat acum apar sub elementul personalizat Shadow DOM.
Înapoi la JavaScript, trebuie să adăugăm următorul cod pentru a selecta elementul de împachetare a videoclipurilor din Domeniul Shadow. Observați că vom folosi querySelector () de la noi shadowRoot variabil; acesta este elementul în care vom adăuga ulterior iframe-ul YouTube.
YoutubeProto.createdCallback = funcție () ... var video = shadowRoot.querySelector (".youtube"); // Selectați wrapperul video;În tutorialul nostru anterior, am folosit date-Încorporați atribuiți pentru a trece ID-ul videoclipului Youtube. Ca o reamintire, ID-ul este folosit pentru a prelua miniaturile imaginilor video și pentru a indica corect încorporarea Adresa URL a videoclipului.
În cazul Componentelor Web, un atribut numit personalizat este acceptabil. În acest caz, putem introduce, de exemplu, un încorporare atribut.
Apoi, în interiorul createdCallback trebuie să adăugăm următoarele pentru a obține funcția încorporare valoarea atributului.
YoutubeProto.createdCallback = funcție () ... var video = shadowRoot.querySelector (".youtube"); // Selectați wrapperul video. var embed = acest.getAttribute ("încorporat"); // Obțineți valoarea atributului embed. ; Vom transmite aceste două variabile funcției personalizate.
Poate că capul meu este plin, dar nu mă pot gândi la un nume propriu al funcției, de aici doTheThing.
YoutubeProto.createdCallback = funcția () ... var embed = this.getAttribute ("încorporat"); Var video = shadowRoot.querySelector (".youtube"); this.doTheThing (embed, video); ; Funcția YoutubeProto.doTheThing = (embedID, videoElem) var source = "https://img.youtube.com/vi/"+ embedID +" / sddefault.jpg "; var imagine = nou Imagine (); image.src = sursă; image.addEventListener ("încărcare", funcție () videoElem.appendChild (imagine);); videoElem.addEventListener ("clic", funcția () var iframe = document.createElement ("iframe"); iframe.setAttribute ("frameborder", "0"); iframe.setAttribute .setAttribute ("src", "https://www.youtube.com/embed/"+ embedID +"? rel = 0 & showinfo = 0 și autoplay = 1 "); this.innerHTML =" "; this.appendChild (iframe); ); ;Această funcție realizează aceeași linie de coduri pe care am adăugat-o în tutorialul nostru anterior, deși cu câteva ajustări. Funcția va afișa miniatura imaginii video Youtube și va adăuga videoclipul Youtube în elementul de înfășurare, .youtube, după ce faceți clic pe utilizator.
Și suntem cu toții pregătiți! Verificați codul sursă și site-ul demo.
În acest tutorial, am împachetat codul din tutorialul nostru anterior într-o Componentă Web. Acum suntem capabili să încorporăm mai elegant un videoclip Youtube cu noul nostru element personalizat:
Tot codul (JavaScript, CSS, HTML) este încapsulat în HTML separat, împiedicând potențialele erori din acel fișier să rupă întregul site. Și ori de câte ori avem nevoie să o reutilizăm în alte proiecte, vom merge și vom importa HTML-ul, youtube-embed.html.
Check out demo-ul de pe GithubAcesta este doar un exemplu al modului în care putem utiliza Web Components. Puteți găsi mai multe implementări uimitoare de componente Web pe customelements.io. În cele din urmă, sper că v-ați bucurat de acest tutorial și ați găsit o referință ușor de urmărit.
