Lær mer om nettkomponenter med disse demoer

Hvis du ikke har hørt om "Web Components", er det på tide å innhente litt på en av de nyeste blødekantteknologiene som er utviklet og spesifisert i dag, for det meste av medlemmer av Google Chrome Team og av Word Wide Web Consortium ( W3C).

W3C-teamet inkluderer Dimitri Glazkov og Ian Hickson som har bidratt til å fullføre det første utkastet til W3C Web Components-spesifikasjonen, som beskriver måten å inkludere og gjenbruke HTML-dokumenter i andre HTML-dokumenter.

I W3Cs offentlige postliste-melding datert 7. mars 2013 uttalte Dimitri at spesifikasjonen så veldig liten ut, og at han forsøker å holde det slik. Han påpekte også at Ian innlemmet HTML-spesifikasjonen, og at det er veldig lite igjen å legge til bortsett fra en bedre introduksjon og eksempler på spesifikasjonen som er i bruk.

Hva er nettkomponenter?

Så hva er nettkomponenter, og hva er den mulige bruken i webimplementeringene dine?

Webkomponenter er egentlig et sett med statiske maler som gjør det mulig å opprette rik nettbrukerinteraksjon (UI) ved å bruke CSS og HTML-merking. For eksempel er det å lage en knapp, kontakterwidget, eller sveveelementeffekt, eksempler på ting som for øyeblikket vil ha alle egenskapene i koden med anrop til JavaScript eller annet skript; Imidlertid, med webkomponenter, vil utviklere kunne opprette widgets og UI-elementer som kommer fra gjenbrukbare moduler. Et eksempel på en HTML-kodebiten for en webkomponent vil se ut som elementet, koblingen og taggen presentert nedenfor for en kontaktswidget:

 Kontakt 
 < script > 
 Kontakt widget-funksjoner her 
manus> 
 < link rel = "component" href = "component / x-contact-widget.html" /> 

I følge Google Chrome-teamet vil nettkomponenter gi nettutviklere frihet til å lage innebygde widgeter og gjenbrukbare biblioteker og rammer. En av de viktigste aktørene i å definere nettkomponentene er, som er blåkopien som inneholder inerte biter av kloningsdyktige DOM-elementer som kan aktiveres for senere bruk, for eksempel Model Driven Views (MDV). Tilpassede elementer utgjør verktøysettet til webkomponenter, som lager nye HTML-elementer, utvider HTMLs eksisterende ordforråd og utvider eksisterende DOM-objekter med nye nødvendige API-er. The Shadow DOM er limet som holder det hele sammen, med byggesteinene for innkapsling og grenser inne i DOM. Inkludert som støtte for webkomponenter er stilinnkapsling, med kunnskap om applikasjonenes tilstand, for eksempel DOM-endringer med MutationObserver, modellendringer med Object.observe () og CSS-variabler som calc () .

Web Komponent demonstrasjoner

Google Chrome-teamet har laget presentasjonen komponenter, som er best vist i Google Chrome Canary - den eksperimentelle utgivelsen av Googles nettleser. Det kan være en mindre stabil versjon av den populære nettleseren, og det er grunnen til at den kalles "Canary" - avledet fra måten kanarier ble brukt i de tidlige dagene av kullgruvedrift for å oppdage dødelige gasser eller mangel på oksygen, noe som betydde det var på tide å forlate gruven snart. Tilsvarende er Google Canary navngitt som sådan slik at den kan fange opp all testingen av teknologier med blødning som Web Components, som kanskje ikke fungerer fullt ut ennå, men blir finjustert på Canary slik at de fungerer fullt ut. Paul Irish, en del av Google Chrome sitt utviklerteam, skrev en fin gjennomgang av funksjonene til Chrome Canary for Developers. Som du kan forestille deg, er han en sterk talsmann for å bruke den testende nettleserversjonen for nettutviklere å leke seg rundt i sin nye sandkasse.

For å se Web Components-presentasjonen på Canary, må du aktivere noen få utvidelser, inkludert eksperimentelle WebKit-funksjoner i omtrent: flagg, eksperimentell JavaScript i omtrent: flagg og Show Shadow DOM i DevTools. Når disse er aktivert, bør du motta tre smilefjes som vist i figur B nedenfor, sett i Chrome versjon 27.0.1444.3 Canary:

Figur B

Når jeg for eksempel åpner presentasjonen i Firefox 15.0.1, viser det samme lysbildet at Object.observe () ikke er tilgjengelig som vist i figur C :

Den første demonstrasjonen som ble vist på lysbilde seks, bruker nettkomponenten til å illustrere en sveveeffekt, noe som resulterer i den lille pop-up av gangnamdansfiguren sammen med en musikkprøve fra gangnam-stil, som vist i figur D :

En annen demonstrasjon som går litt dypere inn i HTML-koden bak webkomponenten, er "Mega Button" -eksemplet på lysbildene 63 og 64, og produserer en hørbar, støtende ku når du klikker på den. Utvidelsen av eksisterende tilpassede elementer starter med demoen x-megabutton.html som inneholder følgende kodebit:

 MegaButton.prototype = { 
 megaClick: function (e) { 
 spille ( 'moo.mp3'); 
 } 
 }; 

Demoen "yourapp.html" inneholder følgende kodebit som lar deg bruke webkomponenten "Mega Button":

 Mega-knapp 
Demonstrasjonen "Mega Button" vist i figur E resulterer i den store knappen på musepekeren, og deretter klikker lyden "moo", når du klikket på den:

Figur E

Andre demonstrasjoner inkluderer en meme-generator og en fanekomponent som bruker webkomponenter.

Flere ressurser

Følgende liste over ressurser finnes også på slutten av demonstrasjonen av webkomponenten, og jeg har listet opp flere av disse nedenfor:

  • Web-Components-Polyfill - Dette depotet bruker Git Sub-moduler, og du må kjøre "git submodule init" og "git sub module module update" fra toppnivåkatalogen i prosjektarbeidstreet før du for eksempel kan kjøre tester.
  • Mozillas x-tags Custom Elements Polyfill - Basert på gjeldende W3 Web Components utkast, aktiverer X-Tag den tilpassede elementdelen av forslaget. Tilpassede elementer lar deg registrere nye koder / elementer med parseren slik at de blir gjenkjent og oppblåst med spesielle evner du definerer, som fungerer på alle nettlesere.
  • Model-driven Views (MDV) - MDV er et JavaScript-mellomlegg som delvis implementerer et design for HTML som støtter en fornuftig dynamisk skille mellom sidevisning og dataene som driver den.

© Copyright 2021 | pepebotifarra.com