sablonozó lodash
Ebben a fejezetben megnézzük szabványosítás - a kényelmes módja annak, hogy a HTML a „sablon” és az adatok.
De a komplex felület jelölő kezdetben hiányzik egy oldalon. Components létre saját DOM dinamikusan alapján nyert adatokat a szerver vagy más forrásokból.
Korábban láttuk menü kódját. amely maga is létrehozza a saját elem:
Ha ez a kód világos? Nyilván van, ami generál HTML render módszerekkel. renderItems?
Első pillantásra - nem valószínű. Szükségünk van legalább, hogy közelről, és átgondolni a kódot, hogy kitaláljuk, milyen DOM-struktúra jön létre.
... De mi van, ha módosítani kell a generált HTML? ... Mi van, ha ezt a feladatot nem kapott a programozó, aki írta a kódot, és a betűszedő, aki a HTML / CSS projekt aláírására finom, de a JS-kódot látja, az első alkalommal? Annak a valószínűsége, hiba ebben az esetben túl minden ésszerű határokon.
Szerencsére, a generációs HTML egyszerűsíthető. Ehhez használja a könyvtár szabványosítás.
Minta - egy karakterláncot egy speciális formában, hogy a helyettesítésével értéket (szöveges üzenet, az ár, stb), és végrehajtja a beágyazott kódrészek átalakult DOM / HTML.
Példa menü:
Mint látható, ez általában a HTML, a típusú betétek <%. %> .
Ahhoz, hogy működjön együtt az ilyen minta, egy speciális funkció _.template. amely keretet LoDash. szintaxis, nézzük részletesen.
Példa _.template használni generálására HTML strukturált fenti:
Ez a kód sokkal könnyebb, mint a JS-kódot, nem? A sablon nagyon világosan mutatja, hogy az eredmény legyen. Ellentétben a kódot a sablon szöveget az elsődleges, és beilleszti a kód általában kicsi.
Vessünk egy közelebbi pillantást _.template és szintaktikai mintákat.
Szent háború észlelt!
Módszerek a szabványosítás, és különösen a szintaxis sablonok, körülbelül annyi, mint egy módja annak, hogy elkapjon egy oroszlán a sivatagban. Más szóval ... sokat.
Ez a fejezet - egyáltalán nincs helye a szent háborúk ebben a témában.
A sablon egy húr speciális szeparátor, amely csak három:
<% code %> - kód
A kódot a határolók <%. %> Meg kell végezni „ahogy van”
<%= expr %> - beszúrni expr HTML
Változó vagy expressziós belül <%=. %> „Ahogy van” lesz beszúrva. Például: <%=title %> helyezze az értéke címet. és <%=2+2%> helyezze 4.
<%- expr %> - szúrni a szöveget, mint egy expr
Változó vagy expressziós belül <%-. %> Ez egészül ki: „szövegként”, azaz a csere karakterek <> "„Ahhoz, hogy a megfelelő HTML-entitások.
Például, ha a kifejezés tartalmaz a szöveg
. majd amikor <%-expr%> a, szemben az eredményt kap az <%=expr%>. Nem HTML-tag
. és a szöveg lt; brgt; .
Ahhoz, hogy működjön együtt a sablont a könyvtár egy függvény LoDash _.template (tmpl, adatok, beállítások).
tmpl sablont. opciók Opcionális beállítások, például meg lehet változtatni a zárójelek.
Ez a funkció elindítja a „válogatás» tmpl sablont, és visszaadja az eredményt formájában funkció, amely azután futni adatokat szerezni, és az eredmény karakterláncot.
Ez az eredmény a hívó az új funkció ( „obj”, „Code”). ahol a kódot dinamikusan generált sablon alapján:
- Eleinte, a kód megy „sapka” - egy szabványos start funkció, amelyben a változó deklarált __p. Amint azt rögzítik az eredményt.
- blokkolják az (obj) adunk hozzá. amelyen belül __p adunk töredék HTML sablonból, valamint a változók a kifejezések <%=. %>. kódja <%. %> másolni a funkció „ahogy van”.
- A funkció akkor ér véget, és visszaadja a visszatérő __p.
Ha ezt a funkciót nevezik, például összeállítani (). megkapja az adatokat tárgy obj. itt is van. és ha a belsejét (obj) lásd a cím. akkor a tervezési szabályok Legyen nyert az objektumot.
Lehet, vagy anélkül
Design elavult, de ebben az esetben hasznos.
Mivel ez a funkció révén létrejött új funkció ( „obj”, „Code”), hogy:
- Úgy működik a globális hatókörű, nincs hozzáférése a külső lokális változók.
- Külső használat szigorú egy ilyen funkció nem befolyásolja, hogy van, még a szigorú mód, a minta továbbra is működni fog.
Ha még mindig nem akarja használni - meg kell tenni a második lehetőség - lehetőségeket. megadásával változó (a változó nevét az adatok).