Bemutató a jade kezdőknek
És ez az elrendezés úgy néz Jade méret:
Második kiviteli tűnik rövidebb és elegánsabb. De Jade - nem csak egy szép elrendezés. Jade van néhány igazán hasznos funkciók, amelyek lehetővé teszik, hogy írjon moduláris újrahasználható (újrafelhasználható) kódot. De mielőtt mélyebbre ás, nézzük meg, az alapokat.
Megyek kiemelni három fő jellemzői Jade:
- Egyszerű tag;
- Attribútumokat a címkék;
- Szövegtömböt.
Ha azt szeretnénk, hogy olvassa el a cikket probyvat a kód megadása alábbi példák segítségével CodePen és válassza ki, hogyan Jade preprotsesor a HTML-t, vagy az online fordító, Jade hivatalos honlapján.
Amint lehet, hogy korábban észre Jade záró tagek. Ehelyett Jade használ fülre, hogy meghatározza a beágyazott címkéket.
A fenti példában, a bekezdések szerint a fülre összeállítás végül lesz a tag div. Milyen egyszerű!
Jade lefordítja pontosan, figyelembe véve az első szó az egyes sorban, mint egy tag, míg a szavakat követő ezen a vonalon kezelik szöveg belsejében a címkét.
Mindez, persze, jó, de hogyan vehet fel attribútumokat a címkéket? Ez valójában nagyon egyszerű.
Térjünk vissza az első példa, és adjunk hozzá egy pár osztályok és néhány kép poszter.
Mivel chudestno, nem?
De miért állnánk meg itt. Jade egy speciális rövidítés indifikatorov és osztályok, ami tovább egyszerűsíti a elrendezés segítségével minden a megszokott jelöléseket:
Mint látható, Jade Írásmódját hasonlóan viselkednek az egyik használata írásakor CSS-választókat.
szövegtömböt
Nézzük elképzelni a következő helyzetet: van egy címke <р> és a felvenni kívánt egy szép nagy mennyiségű szöveget. De várjunk csak, mert Jade mérlegeli az első szó minden egyes sor egy új HTML-tag -, és hogyan lehet ez?
Az első példában, lehet, hogy észre jellegtelen pont után a paragrafus. Hozzáadása egy pont után a címke egyértelművé teszi, hogy a fordító Jade, hogy minden benne Ezen címke a szöveg.
Az érthetőség kedvéért, ha én nem tenném követő időszakra tag <р> A példában a lefordított HTML volna egy nyilvános tag <і>, megtörve az „én vagyok” a sor elejére.
hasznos funkciók
Most, hogy kitaláltam az alapokat, nézzük meg néhány igazán hasznos jellemzője, hogy a jelölő okosabb. Köztük:
És íme, van egy számozás:
Természetesen ebben az esetben a számozott lista lenne sokkal megfelelőbb, de a gondolat, hogy érted? További információért ellenőrizze a dokumentációt.
És ez kell összeállítani az alábbiak szerint:
Akkor navigálni egy sor tárgyak, valamint isspolzovat while ciklus. További információért olvassa el a dokumentációt.
interpoláció
p = «Sziasztok,» + profileName + "Hogy van?"
lehet kezdeni, hogy késlekedik a szemét. Jade több elegáns megoldás erre a problémára? Azzal érvelnek?
Ez nem olyan szép?
Nyálkahal, ezek funkciói, elfogadják paramétereket a bemeneti és létrehoz egy megfelelő elrendezést. Nyálkahal bejelentette a kulcsszó mixin.
Miután nyálkahal volt katekumenekről, akkor hívja meg a + jel.
Mit kell összeállítani, mint:
Mindezt összerakva
Nézzük gyűjt minden, amit meg kellett tanulni, az egyik példa. Tegyük fel, hogy van egy sor filmek, minden objektum, amely tartalmazza a nevét, a film, az öntött (al-array), értékelés, műfaj, a linket IMDB oldalon, az utat a kép (ami lehet használni, mint egy plakát a film). A tömb lesz körülnézni:
Jelenleg 10 film, és azt akarjuk, hogy egy szép jelölést mindegyik. Kezdetben még nem látták előre a használatát linkeket IMDB oldalas film. Ha a film teljesítménye meghaladja az 5, adjunk neki egy ikont egy emelt hüvelykujjával felfelé, egyébként, a hüvelykujj - lefelé. Az általunk használt összes fenti Jade hasznos funkciókat írásához moduláris kódot, amely elvégzi a következő feladatokat látja el:
- Készítsen nyálkahal nevezett film-kártya
- Hajtogat tömb és visszavonja a szereposztás.
- Végighaladni a tömb és a kijelző műfajok.
- Ellenőrizze az értékelés a film, és így megfelel az ikonra.
És így, hozzon létre egy nyálkahal:
Ebben a kódot, egy csomó dolog, de biztos vagyok benne, hogy meg fogja érteni, ahogy azt már eltelt. Most már csak - az, hogy hívja a nyálkahal a ciklusban:
És mégis! Jó, nem. Itt az utolsó kód:
És a kód vigyáz összeállítása:
De hé, várj egy percet! Mi lenne, ha most kell mozgatni, hogy vozvozhnost-IMDB oldalon a film, hogy rákattint a név? Csak meg kell adni egy sort
Fontos megjegyzés: Mint néhányan talán már tudja, Jade átkeresztelték a mopsz. A jövőben Jade cikk fogja használni az új név «mopsz» vagy «Pug.js».