Bevezetés a Web komponensek, és a polimer
Modern webes alkalmazások komplex tervezés és fejlesztés. Ha adott egy sor használt eszközök, tesztelési eszközök, könyvtárak / plugins, a fejlesztési folyamat egyre összetettebbé válik. Mivel a kérelem növekszik az idő, egyre nehezebb fenntartani a kódot, és fejlesztéseket.
Például nézzük meg a külső felület több népszerű oldalak:
Chrome Developer Tools nem tükrözi teljes mértékben a komplexitás a forráskódot, de biztosan ad ötletet a bonyolult szerkezete DOM modern webes alkalmazások. Ez főként annak köszönhető, hogy a túlzott használata div (ok) és a span (ek) a jelölésben, hogy teszi a kódot nehézkes. Ez volt a sok vita szemantikai jelentését HTML5 tag, de a széles körű használata nem megfelelő, két okból:
- A weboldalak használjunk túl sok alkatrészt, akiknek munkája megköveteli feldolgozás kommunikálni a szemantikai szerkezetét. Ahhoz, hogy kölcsönhatásba lépnek velük, az általunk használt osztályok, id attribútumok.
- A meglévő lista szemantikus címkék nem terjed ki minden alkatrészek, amelyeket az oldalakon. Ennek eredményeként, visszatérünk a hagyományos tag, például egy div vagy span.
A döntést a szemantikai problémák
W3C javasolja megoldani ezt a problémát, a Web Components. Ezek a vonatkozó előírásokat, amelyek lehetővé teszik a fejlesztők a újrafelhasználható komponensek. Web Components bennünket távolodjon el a hagyományos megközelítés web design, jelentősen megváltoztatja a építünk és elképzelni webes alkalmazások.
Minden komponens található saját egység a megfelelő logikai stílus és viselkedés. Ezek az összetevők nem csak egyetlen webes alkalmazás, hanem átterjedt a hálózat használata más fejlesztők.
Mi Polymer?
Nem minden böngésző támogatja a lehetőségét, hogy a fenti. Azonban, mivel a polimer Könyvtár, a Google által kifejlesztett, lehet javítani. Polymer biztosít egy sor Polyfills, amely lehetővé teszi számunkra, hogy használja a web komponensek összeférhetetlen böngészők:
- Ez lehetővé teszi, hogy az elemeket a nevüket. Akkor ossza meg a többi fejlesztők;
- Mindegyik elem. saját sablont;
- Ez lehetővé teszi, hogy egy előre beállított UI elem, a projekt.
telepítés Polymer
Javasoljuk, hogy telepítse Polymer (v0.3.4) keresztül Bower. Bower Package Manager kezelésére scripting függőségeket.
Tegyük fel, hogy létrehoztak egy projekt mappát bower.json fájlt. Most már lehet telepíteni a legújabb verzióját a Polymer:
Ez telepíti a Polymer könyvtár és platform Polyfills belül a lugas-alkatrészek mappát.
Megjegyzés. --save hozzá a csomag függőség bower.json fájlt. Ez akkor hasznos, ha azt szeretné, hogy a csomagokat frissíteni a projektben használt.
Telepítése után Polymer, akkor kezdeni az index.html fájlt a gyökérkönyvtárban a projekt.
Hozzá platform.js
, és tudod használni az egyéni elemek a dokumentumokban.Segítségével saját elemeket
A saját jelölő elemek, általában a következő lépésekből áll:
- Töltse le a csomagot át Bower;
- Importálja a megfelelő fájlt .html;
- Használja jelölő elem bárhol a dokumentumban.
Ebben a példában fogunk kísérletezni egyedi elemet, és használja a HTML oldalt. Beállíthatjuk, hogy a papír bemeneti közvetlenül a Bower, és akkor automatikusan letölti a többi szükséges függőségeket.
Mielőtt használja az elemeket az oldalon, meg kell importálni a megfelelő html fájlt:
Most már használhatja a papír bemeneti elem bárhova a tag
:A komponensek oldalt van egy teljes listát az attribútumokat is használható papír bemenet.
Szeretem a lehetőséget Úszó Label. Mindezek a nagy lehetőségek által bevezetett hozzáadásával attribútum:
Styling elemek
Például, hogy feldolgozza a papír-input elem. tudjuk használni a nevét egy tag, mint a választó:
Vagy osztály címét:
A variáns, ha azt szeretné, hogy felülbírálja a stílusokat az elem, de a választó nem működik. Ennek oka, hogy a jelölést árnyékában található DOM-e, ha a stílus nem teszik az utat.
Szerencsére Polymer biztosít pszeudoelem. árnyék. vagy / mély / amellyel tudunk dolgozni az árnyék DOM-én.
Például, azt szeretné, hogy felülbírálja a kék szín a zöld.
Tekintsük az árnyék DOM, és megtalálni .focusedColor osztály változtatni a színét.
Selector papír bemeneti :: árnyék fog egyezni a # árnyék-gyökér eleme a papír-bemenet. így a választó fog kinézni:
Hasonlóképpen kombináló / mély / teljesen figyelmen kívül hagyja az összes árnyék határ elérése a cél cella:
böngésző kompatibilitás
Polymer célja. támogatására örökzöld böngészők (böngészők automatikus frissítés).
Apple eltávolította árnyék DOM Safari, ami azt jelenti, hogy még a támogatást. árnyék és / mély / nem tud átjutni a elemek a stílus.
Azonban a legújabb verzióját Safari (v7.0.4) lehetővé teszi a hozzáférést a DOM elemeket árnyék a külső szinten, standard CSS választók.
Túl sok HTTP-kérést?
Nehéz elképzelni, hogy a használata egyszerű elem, mint a papír bemeneti vezet jelentős számú HTTP kérések!
Mindez azért, mert a működési elvek Polymer, amely betölti a több modult függetlenül dolgozó.
Ezeknek a használata elemek nagyméretű webes alkalmazás drámaian csökkentheti a webhely teljesítményét. Ezért az alkotók Polymer írta vulkanizál. Vulkanizál beágyazza HTML importfüggőség és optimalizálja kimenetek az eredményt, hogy használ kevesebb kérelmet.
De, hogy azt mondta, nem akadályozza meg minket a Polymer tételek a web-alapú alkalmazások.
5 óra az utolsó oszlop „HTML és DHTML”
Írásakor vagy hibát PHP scriptek, gyakran használja a var_dump () és print_r (), hogy megjelenjen egy sor fejlett adatok és objektumok. Ebben a bejegyzésben szeretnék mesélni var_export () függvény, amely képes átalakítani a tömb megfelelő formátumba a PHP kódot.
Egy pár ingyenes sablonok admin panel.
Sablon létrehozása írásra nem egy egyszerű dolog. Nálunk válogatott 30 helyszínen, ahol lehet letölteni ezeket a sablonokat, hogy megfeleljen minden ízlést.
Például, ha van egy keresőmező, amely a feldolgozott minden egyes megnyomásakor egy billentyűt. Ha valaki meg akarja írni a szót a Windows, AJAX kérés fog küldeni a következő részletet: W, Wi, Win, szél, Windo, ablak, Windows-t. A probléma?.
Válogatás a 15 új területek, ahol lehet letölteni ingyenes kép, hogy töltse ki az oldalakat.
Könnyebb megtanulni, hogyan kell optimalizálni a kódot, mint tanulni több tucat új kiegészítő mankó a Google =) Ez a cikk nem a kezdő, valamint a nagy projektek, de az öreg már régen szerzett személyes könyvtár
Aydar Avkhadiev
Által nyújtott információk útján két csatorna (látás és hallás) a képzés hatékonyságának sokkal jobb tanulás könyvekből. A házi feladatok és online tesztek lehetővé teszi, hogy folyamatosan úgy gondolja, a célnyelven, és azonnal ellenőrizze tudását!
Ha azt szeretnénk, hosszú ideig, hogy tanulmányozzák, hogyan lehet HTML-t, akkor engem, mert van jó hír!
Ha már megtanulta a HTML és tovább szeretne lépni, a következő lépés az lesz, hogy tanulmányozza a CSS technológiával.
Ha azt szeretnénk, hogy megértsék a fogalmak domain és tárhely, megtanulják, hogyan kell létrehozni egy adatbázist, feltölteni a fájlokat a honlapon keresztül FTP szerver, hozzon létre aldomain konfigurálja a postaládákat a helyszínen, és ellenőrzi a részvétel, a tanfolyam kifejezetten az Ön számára!