Share
Componentele Web sunt în prezent și în mod entuziast despre care se vorbește despre o viitoare schimbare tectonică pentru dezvoltarea web cu promisiunea de a remodela permanent peisajul de design web. Jucătorii mari avansează pentru a aduce în realitate componentele web. Atât Google, cât și Mozilla au lansat deja treptat suportul browser-ului nativ.
Ce sunt componentele web pe care le întrebați? Pe scurt, componentele web vă oferă o modalitate de a vă crea propriile elemente HTML personalizate, care pot face exact ceea ce aveți nevoie de ele. În loc să încărcați site-urile cu marcări verbose, scripturi lungi și cod repetitiv, înfășurați totul în elemente HTML personalizate, personalizate și personalizate.
Cea mai ușoară modalitate de a înțelege modul în care componentele web permit elemente HTML personalizate este să priviți mai întâi la un element existent pe care deja îl cunoaștem din HTML5: etichetă. Folosind acest element puteți plasa un videoclip cu câteva linii de cod, de exemplu:
Puteți vedea doar câteva linii de HTML de mai sus, dar aici e ceea ce elementul pare într-adevăr în spatele scenei:
În mod prestabilit, browserul ascunde tot acest cod detaliat, astfel încât să nu fie nevoie să îl vedeți sau să vă faceți griji despre scrierea acestuia când doriți să plasați un videoclip. Tocmai ai intrat în tine și
Anterior, numai furnizorii de browsere ar putea crea elemente în acest fel. Imaginați-vă însă dacă puteți utiliza aceeași abordare cu alte tipuri de conținut?
Luați o expunere de diapozitive, de exemplu. De obicei, ați avea nevoie de câteva runde de divs imbricate care poartă numele de clasă specifice pentru a manipula împachetarea diapozitivului, înfășurarea fiecărui diapozitiv și adăugarea de subtitrări și miniaturi. De asemenea, ar trebui să setați opțiuni globale de prezentare pentru lucruri precum efecte de tranziție prin intermediul unor jQuery / JavaScript inline.
Ce se întâmplă dacă ați putea sări peste toate acestea și în schimb pur și simplu:
Cu componentele web, exact ceea ce puteți face.
Dacă doriți să oferiți o concisă, ușor de interacționat cu metoda de plasare a conținutului care altfel ar fi umflat și greoi puteți merge mai departe și creați-vă propria componentă web.
Componentele web pot fi, de asemenea, ușor de împărțit, astfel încât dezvoltatorii să ajungă la bord există un pariu bun, veți putea să apucați o componentă web pre-construită pentru cele mai comune cerințe de proiect. Deja observăm că componentele partajate în mod liber apar pentru orice, de la recunoașterea vocii ...
la constructorii de prezentare ...
la generarea codului QR.
Să aruncăm o privire la ceea ce se află în spatele perdelei componentelor web.
Componentele web, așa cum există în momentul de față, sunt compuse din patru bucăți:
Elementele personalizate sunt exact ceea ce ele sună: elemente care pot fi numite tot ce alegeți și funcționează în orice fel doriți. Și când spun ceva în vreun fel, chiar vreau să spun asta. De exemplu, vă prezint
Demo live - hover peste barElementele personalizate sunt declarate, în cea mai simplă formă, după cum urmează:
...
Când creați un element personalizat, îl puteți face complet de la zero sau puteți extinde un element HTML existent, cum ar fi de exemplu, și să îi oferiți funcționalitatea sau prezentarea modificată de care aveți nevoie.
...
Notă: merită subliniat faptul că
Domeniul Shadow DOM este într-adevăr aspectul central al modului în care funcționează componentele web. Mai devreme, ne-am uitat la HTML5 element și a arătat cum, în ciuda faptului că vedeți doar câteva linii de cod, în realitate există destul de puțin cod ascuns în mod implicit. Locul în care trăiește acest cod ascuns se numește "DOM Shadow".
Furnizorii de servicii de navigație folosesc această DOM de umbră de ani de zile pentru a implementa în mod natural elemente precum intrarea, audio, video și așa mai departe. Prin intermediul componentelor web poate fi acum utilizată de orice dezvoltator.
Ideea generală este să luați tot codul care nu trebuie să fie văzut în timpul plasării markup-urilor și să-l observați în DOM-ul Shadow, astfel încât acesta să nu se blocheze. Acest lucru vă va lăsa doar să vă ocupați de informațiile pertinente, de exemplu, înălțimea, lățimea și locațiile fișierului sursă atunci când utilizați element.
Unul dintre cele mai tari lucruri despre lucrul cu DOM-ul Shadow este că fiecare instanță este propria lume mică proprie. Deci, dacă aveți stil și scripturi în interiorul elementului, acestea nu vor scăpa accidental și nu vor afecta nimic altceva pe pagină.
În schimb, CSS și JavaScript în altă parte a paginii nu vor afecta componenta web, cu excepția cârligelor de stil pe care le puteți crea în mod special pentru a permite direcționarea externă a CSS. Tot ceea ce înseamnă că nu vă îngrijorați mai mult numele de nume și de clasă pentru a evita conflictele.
Dacă doriți să vedeți cum arată SH umbra, este ușor. Asigurați-vă că executați o instalare actualizată a browserului Chrome, deschideți Instrumentele de dezvoltare, faceți clic pe pictograma roată pentru a deschide setările și bifați caseta cu eticheta Afișați umbra DOM de la agentul de utilizator:
Apoi, când inspectați orice element cu un DOM de umbră, veți vedea codul său complet. Încearcă-l prin inspectarea
Pentru o analiză completă a umorului DOM verificați: Introduceți DOM Shadow
Am acoperit deja modul în care elementele personalizate permit doar orientarea informațiilor pertinente în timp ce tot codul rămas este ascuns în DOM-ul umbrei. Un șablon în cadrul unei componente web este cel care deține toate elementele de prezentare ale acelui cod rămas.
Ca parte a codului care definește componenta web a etichetelor ... sunt plasate și între aceste etichete sunt incluse toate codurile HTML și CSS.
De exemplu, aruncați o privire la codul care a creat eticheta este pe linia 4 și închiderea acesteia eticheta este pe linia 201. Între aceste etichete veți vedea toate CSS responsabile pentru crearea poziționării și animației și codul HTML care plasează fiecare dintre imaginile implicate.
Importurile HTML vă permit să luați tot ceea ce este descris mai sus și să îl faceți să funcționeze pe pagina dvs. Componentele web sunt definite într-un fișier HTML extern, astfel încât fișierul trebuie să fie importat pentru ca un element personalizat să funcționeze. Importurile HTML se ocupe de acest lucru printr-o tag, la care veți fi familiarizați cu importul fișierelor CSS externe.
De exemplu, înainte de a putea utiliza funcția
Posibilitățile oferite de componentele web fac ca ideea capului de scufundări să fie foarte folositoare, totuși în momentul în care suportul browser-ului nu este încă funcțional. Starea actuală de asistență arată astfel:
http://jonrimmer.github.io/are-we-componentized-yet/Suportul nativ este în curs de implementare pentru Chrome, Opera și Firefox, dar nu este încă finalizat. IE și Safari nu și-au făcut cunoscute planurile, dar se crede că, având în vedere că majoritatea browserelor vor suporta în cele din urmă celelalte componente web, celelalte browsere vor urma, probabil,.
În momentul de față, dacă doriți să începeți să lucrați cu componente web, va trebui să utilizați unul dintre polifilele disponibile. Vestea bună este că două dintre cele mai populare soluții sunt create de Google și Mozilla, așa că ne putem aștepta să vedem o anumită coerență cu modul în care sprijinul nativ va funcționa în cele din urmă.
Este greu să nu te bazezi pe folosirea polimerului, deoarece Chrome este cel mai utilizat browser și ai putea presupune că în timpul dezvoltării va fi luat în considerare modul în care codul componentei web va fi indexat de Google.
Polimerul vine cu o bibliotecă completă de componente web precompilate. Acesta include "elementele de polimer Core" care sunt orientate funcțional, și "elementele de hârtie", care sunt orientate spre design.
Când creați elemente personalizate cu Polymer, în loc să utilizați formatul
Polymer se descrie ca fiind în "previzualizare pentru dezvoltatori", mai degrabă decât gata pregătită de producție, totuși ei spun, de asemenea
... în ciuda etichetei, mulți oameni au avut deja succes folosind Polymer în producție.
Dacă aveți nevoie să satisfaceți IE9, care se estimează că va deține aproximativ 1,9% până la 5,11% din cota de piață, din păcate, nu aveți noroc cu Polymer. Cu toate acestea, puteți merge în continuare cu Mozilla X-Tags în schimb.
X-Tags este o bibliotecă JavaScript creată de Mozilla, care are în prezent un avantaj față de Polymer, în sensul că suportul pentru browser este mai mare. Dacă aceasta este o considerație majoră pentru dvs. X-Tag-uri poate fi preferința dumneavoastră.
Chiar acum, dacă aveți nevoie să sprijiniți IE8, atunci, din păcate, componentele web nu sunt susceptibile de a fi pentru tine, deoarece suportul polyfills disponibil acceptă IE9 +. Se estimează că utilizatorii IE8 se situează la aproximativ 2,1% până la 3,82%, dar, desigur, dacă propriile statistici spun altfel, va trebui să faceți o apreciere asupra intervalului în care ar trebui să se extindă browserul dvs..
Un mod posibil în care vă puteți pregăti să faceți tranziția în utilizarea componentelor web este să lucrați cu Ember.js sau AngularJS pentru moment. Ambele au propriile sisteme de creare a componentelor și ambele promite să treacă la utilizarea codului nativ al componentei web atunci când devine pe deplin disponibil.
Sper că vă place să citiți această analiză a componentelor web și de ce ar trebui să aveți grijă! Există mult mai multe pentru a se arunca cu capul în, dar cu aceste fundamente acoperite, avem o mulțime de oportunități pentru tutoriale pe de fapt, construirea de componente web personalizate. Tu ce crezi? În ce condiții ați putea să vă vedeți că le folosiți??
Accentsconagua