Používejte šablony s řídítky v Express.js

Používání šablon se ve světě webových aplikací stalo nezbytností, protože nám pomáhá oddělit logiku programování od jeho prezentace. Celé toto oddělení a vzestup přijetí tohoto stylu vývoje vedl ke vzniku velkého počtu rámců na trhu, které nám pomáhají nést odpovědnost za správu šablon.
V případě Vyjádřit, tento přichází nativně s templátovým motorem zvaným NefritMnoho vývojářů však již přichází s pozadím v jiných a nebylo by fér, aby se museli znovu přizpůsobit novému enginu, není to špatné, ale není to každému po chuti.
Je to kvůli tomu Vyjádřit nám umožňuje konfigurovat rámec tak, abychom mohli pracovat s různými motory šablon, jako například Řídítka což je rozšíření Moustache.js a je to velmi populární šablonovací engine, protože je založen na JavaScript a můžeme jej použít jak na straně serveru, tak na straně klienta.
PožadavkyAbychom vyhověli některým zde uvedeným příkladům, musíme mít nainstalovaný přístup a přístup k němu Node.jsa již byly nainstalovány Vyjádřit. Textový editor a aplikace Vyjádřit jsou žádoucí, aby mohli začlenit koncepty vysvětlené v tutoriálu.
Nevýhody nepoužívání šablony motoruNepoužívání šablony motoru s sebou nese řadu nevýhod, které mohou ovlivnit rychlost vývoje naší aplikace, tyto nevýhody uvedeme v seznamu, takže když si myslíme, že modul šablon nepotřebujeme, uvidíme opak.
Riziko vytváření chybně formátovaného HTML je mnohem vyšší, takže získání certifikace pro náš kód může být obtížné.
Výsledný kód může být obtížné dokumentovat a sdílet s jinými vývojáři.
Pokud ke generování HTML použijeme kód, bude práce se speciálními znaky vždy nepohodlná.
Existuje tendence neoddělovat aplikační logiku od prezentace.
Jak vidíme, existuje mnoho nevýhod, které přestože nejsou závažné a nevedou k tomu, že naše aplikace nefunguje, pokud snižuje možnost být produktivnější.
Výhody použití šablony motoruNyní se podívejme, co získáme implementací řešení, jako jsou řídítka, do našich aplikací s Express:
Výsledný kód je organizovanější a garantujeme, že nebude chybný HTML.
Náš tým můžeme rozdělit na dvě části, a to fungováním uživatelských rozhraní, aniž bychom museli vyvíjet v Back-Endu.
Motory šablon nám umožňují znovu použít části kódu, čímž pomáhají udržovat náš projekt optimalizovaný.
Existuje mnoho nástrojů, které nám pomáhají zajistit lepší interakci s vizuální částí našich aplikací.
Jak vidíme, co nám šablony motory nabízejí, je schopnost oddělit, optimalizovat a organizovat náš kód, což přináší přímý důsledek zlepšení efektivity, efektivity a obecné produktivity v našem vývojovém týmu.
Na začátku tutoriálu jsme to zmínili Nefrit byl to výchozí motor, tak proč hledáme jiný motor? Odpověď je velmi jednoduchá, způsob, jakým to funguje Nefrit se snaží snížit množství HTML píšeme, to může být trochu matoucí, protože se musíme prakticky naučit novou formu jazyka pro naše Front-end.
Na následujícím obrázku uvidíme kód šablony z Nefrit takže můžeme vidět příklad jeho syntaxe:

Můžeme si všimnout rozdílu s kódem HTML Standardní je propastný, a přestože je kód menší, množství myšlenek je o něco větší.
Řídítka je to jiný příběh než Nefrit, jeho způsob práce je podobný jako u jiných motorů jako např Jinja2 nebo Lok, protože nám umožňuje psát popisky HTML a pak uvnitř s vlastním kódem motoru můžeme definovat, co se tiskne z kontextu a způsob, jakým to dělá.
Pokud například víme, že budeme tisknout něco, co uživatel napsal, můžeme automaticky uniknout speciálním znakům a vyhnout se tak vkládání kódu, ale pokud víme, že se jedná o náš vlastní kód, můžeme jej vyjádřit Řídítka to textu neunikne.
Server nebo klientDalší aspekt Řídítka je, že může fungovat dvěma způsoby, na straně serveru nebo na straně klienta. Tato všestrannost znamená, že se můžeme lépe rozhodnout, jak chceme provádět naše aplikace, protože pokud je LÁZNĚ o Jednostránková aplikace, možná je přístup na straně klienta jednodušší a užitečnější, ale pokud chceme webové stránky, generování všeho na serveru je užitečnější.
Pro instalaci Řídítka na straně serveru je to velmi snadné, stačí použít npm v naší konzole a tím získáme potřebné balíčky, podívejme se, co musíme napsat:

 npm install --save express-řídítka

S tím npm Chystá se stáhnout všechny potřebné komponenty, abychom mohli tento engine začlenit do našeho projektu, nakonec bychom měli v konzole získat výsledek podobný následujícímu:

Pak v našem souboru, kde spouštíme naši aplikaci Vyjádřit Musíme mu říct, aby to použil jako modul šablony, proto musíme jednoduše napsat následující kód:

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

To, co by zůstalo v našem souboru, by bylo následující:

Základní syntaxe řídítekŘídítka Má svou vlastní velmi čistou syntaxi, která nám umožňuje začlenit do šablony trochu logiky pohledu, můžeme začlenit komentáře, iterovat seznamy a bloky, uniknout nebo ne části textu. Proto je důležité znát ty nejzákladnější, abychom mohli své myšlenky vyjádřit pohodlněji a tím z toho vytěžit maximum, podívejme se na to nejzákladnější z motoru níže.
Výsledkem je, že náš pohled generuje data, která musíme uživateli ukázat, tato data předáme prostřednictvím kontextu do naší šablony a zde je vytiskneme. Chcete -li to vytisknout, musíme jednoduše uzavřít proměnnou nebo prvek do dvojitých závorek jako následující:

 {{Název}}

To nás vede k pochopení obsahu "Název" které jsme definovali v našem pohledu, tyto dvojité složené závorky automaticky unikají znakům takovým způsobem, že to nevede k tisku kódu, který není ve výchozím nastavení povolen vývojářem.
Nyní, pokud chceme vytisknout text bez úniku, musíme použít trojité závorky, to říká Řídítka že by nic nemělo uniknout, podívejme se na příklad:

 {{{Jména}}}

To nám umožňuje tisknout kód HTML, speciální znaky a dokonce i JavaScript bez zásahu našeho enginu.
The komentáře v šabloně jsou životně důležité, protože nám umožňují identifikovat sekce, přidávat důležité informace a dokumentovat naši aplikaci. Pokud dáme komentář přímo na HTML ve formě: to skončí viditelností pro každého, kdo kontroluje kód naší stránky, takže nás to omezuje v tom, co můžeme nechat zdokumentované.
Pokud ale použijeme komentáře v Řídítka, vždy je můžeme vidět ve zdrojovém kódu, ale engine při generování toho, co uživatel vidí, jej vynechává, a poté, když zkontrolujeme kód webu nebo aplikace, nic neuvidíme. Chcete -li napsat komentář Řídítka musíme udělat následující:

 {{! náš komentář}}

To znamená, že obsah komentáře se nikdy nevygeneruje ve výsledku, který je viditelný pro naše uživatele, což činí to, co píšeme, tajemstvím pro ty, kteří jsou mimo náš vývojový tým.
Na něco, co nesmíme zapomenout, je, že se nemusíme omezovat na to, co je v hlavní proud„Existuje mnoho možností, které mohou být pro vývojový styl každého člověka lepší, a proto je důležité provádět výzkum a nebát se zkoušet nové věci.
Tímto jsme dokončili tento tutoriál, měli jsme malý, ale docela obohacující úvod k tomu, co znamená použití šablon a jak začlenit nový modul do Vyjádřit.
Ano, dobře Řídítka je mnohem rozsáhlejší, ale s těmito klíčovými koncepty a naší aplikací Vyjádřit budeme moci v krátké době dosáhnout velmi zajímavých věcí.Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod