Använd mallar med handtag i Express.js

Användningen av mallar har blivit en nödvändighet i världen av webbapplikationer, detta eftersom det hjälper oss att skilja programmeringslogiken från dess presentation. All denna separering och ökningen av mottagandet av denna utvecklingsstil har lett till att ett stort antal ramar på marknaden som hjälper oss att bära ansvaret för att hantera mallar.
I fallet med uttrycka, den här kommer inbyggd med en mallmotor som kallas JadeMånga utvecklare har dock redan en bakgrund i andra och det vore inte rättvist att de måste anpassa sig igen till en ny motor, det här är inte dåligt men det är inte för allas smak.
Det är på grund av det uttrycka låter oss konfigurera ramverket så att vi kan arbeta med olika mallmotorer, t.ex. Handtag som är en förlängning av Mustasch.js och det är en mycket populär mallmotor eftersom den är baserad på JavaScript och vi kan använda det både på serversidan och på klienten.
KravFör att följa några av exemplen som visas här måste vi ha installerat och åtkomst till Node.js, och har tidigare installerat uttrycka. En textredigerare och en applikation uttrycka de är önskvärda så att de kan införliva de begrepp som förklaras i självstudien.
Nackdelar med att inte använda en mallmotorIcke-användning av en mallmotor innebär en rad nackdelar som kan påverka hastigheten på vår applikationsutveckling, vi kommer att lista dessa nackdelar så att när vi tror att vi inte behöver mallmotorn ser vi motsatsen.
Risken för felaktig HTML är mycket högre, så det kan vara svårt att få certifieringar för vår kod.
Den resulterande koden kan vara svår att dokumentera och dela med andra utvecklare.
Om vi ​​använder kod för att generera HTML är det alltid obehagligt att arbeta med specialtecken.
Det finns en tendens att inte skilja applikationslogik från presentation.
Som vi kan se finns det många nackdelar med att även om de inte är allvarliga och inte leder till att vår ansökan inte fungerar om den minskar möjligheten att bli mer produktiv.
Fördelar med att använda en mallmotorLåt oss nu se vad vi kommer att få genom att implementera lösningar som Handtag i våra applikationer med Express:
Den resulterande koden är mer organiserad, och vi är garanterade att det inte kommer att finnas någon felaktig HTML.
Vi kan dela vårt team i två genom att använda användargränssnitt utan att behöva utvecklas i Back-End.
Med mallmotorer kan vi återanvända kodavsnitt och hjälper till att hålla vårt projekt optimerat.
Det finns många verktyg som hjälper oss att ge bättre interaktion med den visuella delen av våra applikationer.
Hur vi ser vad mallmotorerna erbjuder oss är att kunna separera, optimera och organisera vår kod. Detta medför en direkt konsekvens av förbättringen av effektivitet, effektivitet och allmän produktivitet i vårt utvecklingsteam.
I början av handledningen nämnde vi det Jade det var standardmotorn, så varför letar vi efter en annan motor? Svaret är väldigt enkelt, hur det fungerar Jade försöker minska mängden HTML vi skriver, det här kan vara lite förvirrande, eftersom vi praktiskt taget måste lära oss en ny form av språk för våra Front-end.
I följande bild kommer vi att se en mallkod för Jade så vi kan se ett exempel på dess syntax:

Vi kan märka att skillnaden med kod HTML Standarden är urusel, och även om koden är mindre, är tankemängden lite mer inblandad.
Handtag det är en annan historia än Jade, dess arbetssätt liknar andra motorer som t.ex. Jinja2 eller Slurk, eftersom det tillåter oss att skriva etiketter HTML och sedan inuti med vår egen motorkod kan vi definiera vad den skriver ut ur sammanhanget och hur den gör det.
Till exempel, om vi vet att vi ska skriva ut något som en användare skrev, kan vi automatiskt undkomma specialtecknen och därmed undvika kodinjektion, men om vi vet att det är vår egen kod kan vi uttrycka det till Handtag som inte går undan texten.
Server eller klientEn annan aspekt av Handtag är att det kan fungera på två sätt, från serversidan eller från klientsidan. Denna mångsidighet innebär att vi bättre kan bestämma hur vi vill utföra våra applikationer, eftersom om det är en SPA o Enkeltsideapplikation, kanske är klientsidan mer enkel och mer användbar, men om vi vill ha en webbplats kanske det är mer användbart att generera allt på servern.
För installation Handtag på serversidan är det väldigt enkelt, vi måste bara använda npm i vår konsol och därmed kommer vi att få de nödvändiga paketen, låt oss se vad vi har att skriva:

 npm installera-spara expressstyr

Med det npm Det kommer att ladda ner alla nödvändiga komponenter så att vi kan införliva denna motor i vårt projekt, i slutändan bör vi få ett resultat som liknar följande i vår konsol:

Sedan i vår fil där vi startar vår ansökan uttrycka Vi måste berätta det för att använda detta som mallmotor, för detta måste vi helt enkelt skriva följande kod:

 var styr = kräver ('express-styr') .create ({defaultLayout: 'main'}); app.engine ('styr', handtag.engine); app.set ('visa motor', 'styr');

Det som skulle finnas kvar i vår fil skulle vara följande:

Handtagets grundläggande syntaxHandtag Den har sin egen mycket rena syntax som gör att vi kan införliva lite visningslogik i mallen, vi kan införliva kommentarer, iterera över listor och block, undvika eller inte delar av text. Det är därför det är viktigt att känna till de mest grundläggande så att vi kan uttrycka våra idéer mer bekvämt och på så sätt få ut det mesta av det, låt oss se den mest grundläggande av motorn nedan.
Som ett resultat genererar vår vy data som vi måste visa användaren, vi överför dessa data genom kontexten till vår mall och det är här vi skriver ut dem. För att skriva ut detta måste vi helt enkelt omsluta variabeln eller elementet i dubbla hängslen som följande:

 {{Namn}}

Det leder oss att se innehållet i "Namn" som vi har definierat i vår uppfattning, undviker dessa dubbla lockiga hängslen automatiskt tecken, på ett sådant sätt att det inte resulterar i utskrift av kod som inte är tillåten som standard för utvecklaren.
Nu om vi vill skriva ut en text utan att fly, måste vi använda trippel hängslen, berättar detta Handtag att inget ska fly, låt oss se exemplet:

 {{{Namn}}}

Detta om det tillåter oss att skriva ut kod HTML, specialtecken och till och med JavaScript utan ingripande från vår motor.
De kommentarer i mallen är viktiga, eftersom de tillåter oss att identifiera avsnitt, lägga till viktig information och dokumentera vår ansökan. Om vi ​​lägger en kommentar direkt på HTML i formuläret: detta blir synligt för den som inspekterar koden på vår sida, så det begränsar oss i vad vi kan lämna dokumenterat.
Men om vi använder kommentarer i Handtag, vi kan alltid se dem i källkoden, men motorn när den genererar vad användaren ser utelämnar den, och sedan när vi inspekterar koden för webben eller applikationen ser vi ingenting. Att skriva en kommentar om Handtag vi måste göra följande:

 {{! vår kommentar}}

Detta innebär att innehållet i kommentaren aldrig genereras i resultatet som är synligt för våra användare, vilket gör det vi skriver hemligt för dem som står utanför vårt utvecklingsteam.
Något som vi inte får glömma är att vi inte behöver begränsa oss till det som finns i vanliga, det finns många alternativ som kan vara bättre för varje människas utvecklingsstil, varför det är viktigt att forska och inte vara rädd för att prova nya saker.
Med detta har vi avslutat denna handledning, vi har haft en liten men ganska berikande introduktion till vad användningen av mallar betyder och hur man införlivar en ny motor i uttrycka.
Ja OK Handtag är mycket mer omfattande, men med dessa nyckelbegrepp och vår applikation uttrycka vi kommer att kunna uppnå mycket intressanta saker på kort tid.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng