Używaj szablonów z uchwytami w Express.js

Korzystanie z szablonów stało się koniecznością w świecie aplikacji internetowych, ponieważ pomaga nam oddzielić logikę programowania od jej prezentacji. Cała ta separacja i wzrost recepcji tego stylu rozwoju doprowadziły do ​​pojawienia się dużej liczby frameworki na rynku, które pomagają nam ponosić odpowiedzialność za zarządzanie szablonami.
W przypadku Wyrazić, ten jest natywnie wyposażony w silnik szablonów o nazwie JadeitJednak wielu programistów ma już doświadczenie w innych i nie byłoby sprawiedliwe, gdyby musieli ponownie dostosować się do nowego silnika, to nie jest złe, ale nie wszystkim odpowiada.
To z tego powodu Wyrazić pozwala nam skonfigurować framework tak, abyśmy mogli pracować z różnymi silnikami szablonów, takimi jak Kierownice co jest przedłużeniem Wąsy.js i jest to bardzo popularny silnik szablonów, ponieważ jest oparty na JavaScript i możemy go używać zarówno po stronie serwera, jak i klienta.
WymaganiaAby zachować zgodność z niektórymi przykładami pokazanymi tutaj, musimy mieć zainstalowaną i dostęp do Node.jsi wcześniej zainstalowałem Wyrazić. Edytor tekstu i aplikacja Wyrazić są one pożądane, aby mogły zawierać koncepcje wyjaśnione w samouczku.
Wady niekorzystania z silnika szablonówNiekorzystanie z silnika szablonów pociąga za sobą szereg wad, które mogą wpłynąć na szybkość rozwoju naszej aplikacji. Wymienimy te wady, aby gdy myślimy, że silnik szablonów nie jest nam potrzebny, zobaczymy coś przeciwnego.
Ryzyko powstania nieprawidłowego kodu HTML jest znacznie wyższe, więc uzyskanie certyfikatów dla naszego kodu może być trudne.
Powstały kod może być trudny do udokumentowania i udostępnienia innym programistom.
Jeśli używamy kodu do generowania HTML, praca ze znakami specjalnymi zawsze będzie niewygodna.
Istnieje tendencja do nie oddzielania logiki aplikacji od prezentacji.
Jak widać, jest wiele wad, które choć nie są poważne i nie powodują, że nasza aplikacja nie działa, jeśli zmniejsza to możliwość bycia bardziej produktywną.
Zalety korzystania z silnika szablonówZobaczmy teraz, co zyskamy, wdrażając rozwiązania takie jak Handlebars w naszych aplikacjach za pomocą Express:
Wynikowy kod jest bardziej zorganizowany i mamy gwarancję, że nie będzie zniekształconego kodu HTML.
Możemy podzielić nasz zespół na dwie części, pracując interfejsami użytkownika bez konieczności programowania w Back-Endzie.
Silniki szablonów pozwalają nam na ponowne wykorzystanie sekcji kodu, pomagając w ten sposób optymalizować nasz projekt.
Istnieje wiele narzędzi, które pomagają nam zapewnić lepszą interakcję z wizualną częścią naszych aplikacji.
To, jak widzimy, co oferują nam silniki szablonów, to możliwość oddzielenia, optymalizacji i uporządkowania naszego kodu, co bezpośrednio przekłada się na poprawę efektywności, wydajności i ogólnej produktywności w naszym zespole programistycznym.
Na początku samouczka wspomnieliśmy o tym Jadeit to był domyślny silnik, więc dlaczego szukamy innego silnika? Odpowiedź jest bardzo prosta, jak to działa Jadeit stara się zmniejszyć ilość HTML piszemy, może to być nieco mylące, ponieważ musimy praktycznie nauczyć się nowej formy języka dla naszego Front-end.
Na poniższym obrazku zobaczymy kod szablonu Jadeit więc możemy zobaczyć przykład jego składni:

Możemy zauważyć różnicę z kodem HTML Standard jest beznadziejny i chociaż kod jest mniejszy, ilość myśli jest nieco większa.
Kierownice to inna historia niż Jadeit, jego sposób pracy jest podobny do innych silników takich jak: Jinja2 lub Haust, ponieważ pozwala nam pisać etykiety HTML a następnie w środku z naszym własnym kodem silnika możemy zdefiniować, co drukuje z kontekstu i sposób, w jaki to robi.
Na przykład, jeśli wiemy, że zamierzamy wydrukować coś, co napisał użytkownik, możemy automatycznie uciec przed znakami specjalnymi, a tym samym uniknąć wstrzyknięcia kodu, ale jeśli wiemy, że jest to nasz własny kod, możemy to wyrazić Kierownice to nie wymyka się tekstowi.
Serwer lub klientInny aspekt Kierownice jest to, że może działać na dwa sposoby, od strony serwera lub od strony klienta. Ta wszechstronność oznacza, że ​​możemy lepiej decydować, w jaki sposób chcemy realizować nasze aplikacje, ponieważ jeśli jest to SPA o Aplikacja jednostronicowa, może podejście po stronie klienta jest prostsze i bardziej przydatne, ale jeśli chcemy stronę internetową, może bardziej przydatne jest generowanie wszystkiego na serwerze.
Do instalacji Kierownice po stronie serwera jest to bardzo proste, wystarczy użyć npm w naszej konsoli a tym samym uzyskamy niezbędne pakiety, zobaczmy co mamy napisać:

 npm install --save express-handlebars

Z tym npm Zamierza pobrać wszystkie niezbędne komponenty, abyśmy mogli włączyć ten silnik do naszego projektu, na końcu powinniśmy uzyskać wynik podobny do następującego w naszej konsoli:

Następnie w naszym pliku, w którym uruchamiamy naszą aplikację Wyrazić Musimy mu powiedzieć, aby używał tego jako silnika szablonów, w tym celu po prostu musimy napisać następujący kod:

 var handlebars = require ('express-handlebars') .create ({defaultLayout: 'main'});app.engine ('handlebars', handlebars.engine);app.set ('view engine', 'handlebars');

W naszych aktach pozostałoby:

Podstawowa składnia kierownicyKierownice Ma swoją własną, bardzo przejrzystą składnię, która pozwala nam włączyć trochę logiki widoku do szablonu, możemy włączać komentarze, iterować po listach i blokach, usuwać lub nie sekcje tekstu. Dlatego ważne jest, aby znać te najbardziej podstawowe, abyśmy mogli wygodniej wyrażać nasze pomysły, a tym samym czerpać z nich jak najwięcej, zobaczmy najbardziej podstawowy silnik poniżej.
W efekcie nasz widok generuje dane, które musimy pokazać użytkownikowi, przekazujemy te dane poprzez kontekst do naszego szablonu i tam je drukujemy. Aby to wydrukować, musimy po prostu ująć zmienną lub element w podwójnych nawiasach klamrowych, jak poniżej:

 {{Nazwa}}

To prowadzi nas do zapoznania się z treścią "Nazwa" które zdefiniowaliśmy naszym zdaniem, te podwójne nawiasy klamrowe automatycznie zmieniają znaki, w taki sposób, że nie powoduje to drukowania kodu, który nie jest domyślnie dozwolony przez programistę.
Teraz, jeśli chcemy wydrukować tekst bez ucieczki, musimy użyć potrójnych nawiasów klamrowych, to mówi Kierownice że nic nie powinno uciec, zobaczmy przykład:

 {{{Nazwy}}}

To, jeśli pozwala nam to wydrukować kod HTML, znaki specjalne, a nawet JavaScript bez ingerencji naszego silnika.
ten uwagi w szablonie są niezbędne, ponieważ pozwalają nam zidentyfikować sekcje, dodać ważne informacje i udokumentować naszą aplikację. Jeśli umieścimy komentarz bezpośrednio na HTML w formie: jest to widoczne dla każdego, kto sprawdza kod naszej strony, więc ogranicza nas to, co możemy zostawić udokumentowane.
Ale jeśli użyjemy komentarzy w Kierownice, zawsze możemy je zobaczyć w kodzie źródłowym, ale silnik podczas generowania tego, co widzi użytkownik, pomija je, a potem, gdy sprawdzimy kod strony internetowej lub aplikacji, nic nie zobaczymy. Aby napisać komentarz do Kierownice musimy wykonać następujące czynności:

 {{! nasz komentarz}}

Oznacza to, że treść komentarza nigdy nie jest generowana w wyniku widocznym dla naszych użytkowników, czyniąc to, co piszemy, tajemnicą dla tych, którzy są poza naszym zespołem programistów.
Coś, o czym nie wolno nam zapomnieć, to to, że nie musimy ograniczać się do tego, co jest w główny nurt, istnieje wiele opcji, które mogą być lepsze dla stylu rozwoju każdej osoby, dlatego ważne jest, aby przeprowadzić badania i nie bać się próbować nowych rzeczy.
Na tym zakończyliśmy ten samouczek, mieliśmy małe, ale dość wzbogacające wprowadzenie do tego, co oznacza użycie szablonów i jak włączyć nowy silnik do Wyrazić.
tak ok Kierownice jest znacznie bardziej rozbudowany, ale z tymi kluczowymi pojęciami i naszą aplikacją Wyrazić w krótkim czasie będziemy mogli osiągnąć bardzo ciekawe rzeczy.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt