Share
I den forrige opplæringen "Hvordan" Lata på "innebygde YouTube-videoer" så vi på hvordan du bare laster inn en Youtube-video når en bruker klikker på den. Dette bidrar til at vår nettside lastes litt raskere, spesielt hvis den inneholder flere Youtube-videoer.
Hvis du fulgte opplæringen grundig, har du sett at vi måtte legge til et par div elementer, sammen med klasser, stilene og skriptene for å få det til å fungere.
Å legge til alt dette hver gang er ikke den mest praktiske tilnærmingen; hva om vi kunne erstatte alt dette ved å bruke et utelukkende element, i stedet for
# Skygge-rot? Les videre for å finne ut merFør du får smuss på hendene, oppfordrer jeg deg sterkt til å se på en av Kezz Braceys fantastiske opplæringsprogrammer, Hvordan lage dine egne HTML-elementer med webkomponenter. Dette gir deg et innblikk i Webkomponenter, og ting som "Shadow DOM" (også kjent som "Shadow Root"), HTML-import og element.
Til å begynne med må vi opprette en ny HTML-fil. Vi kaller det "youtube-embed.html". Denne filen inneholder all koden som skal registreres og bygger vårt nye element,
Det vil inneholde følgende JavaScript, så la oss ta en titt på de bare beinene:
Accentsconagua
(funksjon (vindu, dokument, undefined) // (1) var thatDoc = dokument; var thisDoc = (thatDoc._currentScript || thatDoc.currentScript) .ownerDocument; // (2) varmal = thisDoc.querySelector ') .content; // (3) var YoutubeProto = Object.create (HTMLElement.prototype); // (4) YoutubeProto.createdCallback = funksjon () // (5) var shadowRoot = this.createShadowRoot (); var klon = thatDoc.importNode (template, true); shadowRoot.appendChild (klone); // Legg til tilpasset kode her ...; // (6) window.youtubeEmbed = thatDoc.registerElement ('youtube-embed', prototype: YoutubeProto );) (vindu, dokument);Ganske mange ting, men nummerert logisk, så la oss ta en titt på hva det gjør:
thatDoc, refererer til hoveddokumentet der vi distribuerer det egendefinerte elementet. Den andre variabelen, thisDoc, er dokumentet der vi registrerer vårt nye HTML-element, i dette tilfellet, er youtube-embed.html.HTMLElement gjenstand. Dette vil tillate vårt nye element å arve metoder og egenskaper til ethvert HTML-element som id, klassenavn, clientHeith, scrollTop, og childeNodes.createdCallback er funksjonen som umiddelbart vil bli instantiated når det nye elementet er opprettet.Deretter, innenfor hoved- dokument, hvor våre videoer vil bli integrert, importerer vi youtube-embed.html.
Webkomponenter er en serie webteknologier (Mal, HTML Import, Egendefinert Element og Skygge DOM) satt sammen. Noen nettlesere som Opera og Chrome støtter allerede disse funksjonene, men Firefox, Edge og Safari har sine egne meninger om å støtte dem, fordi de bare støtter dem delvis eller ikke i det hele tatt.
Så, hvis du vil at elementet ditt skal brukes i et bredt spekter av nettlesere (selvfølgelig gjør du det), må du også laste inn webkomponenter polyfill.
Når vi har gjort alle disse tingene og legger filene på plass, er vi nå klare til å legge til de andre kodestykket for å gjøre vårt tilpassede element levende.
Til å begynne med, i "youtube-embed.html", legger vi til element. Da nest vi div og stilene som vi opprettet i vår tidligere opplæring i den.
På dette tidspunktet, hvis vi distribuerer vår div elementer og stilene vi nettopp har lagt til, vises nå under det egendefinerte elementet Shadow DOM.
Når vi går tilbake til JavaScript, må vi legge til følgende kode for å velge videoinnpakningselementet fra Shadow DOM. Legg merke til at vi bruker querySelector () fra vår shadowRoot variabel; Dette er elementet der vi vil legge til Youtube-iframe senere.
YoutubeProto.createdCallback = funksjon () ... var video = shadowRoot.querySelector (".youtube"); // Velg videomappen;I vår tidligere opplæring brukte vi data-innbygging attributt til å sende Youtube video ID. Som en påminnelse brukes ID-en til å hente videobild-miniatyrbildet og for å peke på det riktige embedding URL til videoen.
I tilfelle av Webkomponenter er et egendefinert navnegodtatt akseptabelt. I dette tilfellet kan vi for eksempel introdusere en embed Egenskap.
Så innenfor createdCallback funksjon vi må legge til for å få embed attributt verdi.
YoutubeProto.createdCallback = funksjon () ... var video = shadowRoot.querySelector (".youtube"); // Velg videomappen. var embed = this.getAttribute ("embed"); // Få den innebygde attributtverdien. ; Vi vil passere disse to variablene til vår tilpassede funksjon.
Kanskje hodet mitt er fullt, men jeg kan ikke tenke på et riktig navn på funksjonen, derfor doTheThing.
YoutubeProto.createdCallback = funksjon () ... var embed = this.getAttribute ("embed"); var video = shadowRoot.querySelector (".youtube"); this.doTheThing (embed, video); ; YoutubeProto.doTheThing = funksjon (embedID, videoElem) var kilde = "https://img.youtube.com/vi/"+ embedID +" / sddefault.jpg "; var image = nytt bilde (); image.src = source; image.addEventListener ("load", funksjon () videoElem.appendChild (image);); videoElem.addEventListener ("klikk", funksjon () var iframe = document.createElement ("iframe"); iframe.setAttribute ("frameborder", "0"); iframe.setAttribute ("allowfullscreen" .setAttribute ("src", "https://www.youtube.com/embed/"+ embedID +"? rel = 0 og showinfo = 0 og autoplay = 1 "); this.innerHTML =" "; this.appendChild (iframe); ); ;Denne funksjonen utfører samme linje med koder som vi la til i vår tidligere opplæring, om enn med noen få tilpasninger. Funksjonen viser miniatyrbildet for Youtube-videobild og legger til Youtube-videoen i wrapper-elementet, .youtube, på brukerens klikk.
Og vi er alle satt! Sjekk ut kildekoden og demoområdet.
I denne opplæringen har vi pakket kode fra vår tidligere opplæring til en webkomponent. Vi kan nå legge inn en Youtube-video mer elegant med vårt nye egendefinerte element:
All koden (JavaScript, CSS, HTML) er innkapslet i separat HTML, og forhindrer potensielle feil i den filen å ødelegge hele nettstedet. Og når vi trenger å gjenbruke den i andre prosjekter, går vi videre og importerer HTML, youtube-embed.html.
Sjekk ut demo på GithubDette er bare et eksempel på hvordan vi kan bruke webkomponenter. Du finner flere fantastiske implementeringer av webkomponenter på customelements.io. Til slutt håper jeg at du likte denne opplæringen og fant det en lett-å-følge referanse.
