Brug skabeloner med styr i Express.js

Brugen af ​​skabeloner er blevet en nødvendighed i verden af ​​webapplikationer, dette fordi det hjælper os med at adskille programmeringslogikken fra dens præsentation. Al denne adskillelse og stigningen i modtagelsen af ​​denne udviklingsstil har ført til fremkomsten af ​​et stort antal rammer på markedet, der hjælper os med at bære ansvaret for at styre skabeloner.
I tilfælde af Express, denne kommer indfødt med en skabelonmotor kaldet JadeMange udviklere har imidlertid allerede en baggrund i andre, og det ville ikke være rimeligt, at de igen skal tilpasse sig en ny motor, det er ikke dårligt, men det er ikke for alles smag.
Det er på grund af det Express giver os mulighed for at konfigurere rammerne, så vi kan arbejde med forskellige skabelonmotorer, som f.eks Styr som er en forlængelse af Overskæg.js og det er en meget populær skabelonmotor, da den er baseret på JavaScript og vi kan bruge det både på serversiden og på klienten.
KravFor at overholde nogle af eksemplerne vist her skal vi have installeret og adgang til Node.js, og har tidligere installeret Express. En tekstredigerer og et program Express de er ønskelige, så de kan inkorporere de begreber, der er forklaret i selvstudiet.
Ulemper ved ikke at bruge en skabelonmotorManglende brug af en skabelonmotor medfører en række ulemper, der kan påvirke hastigheden på vores applikationsudvikling, vi vil liste disse ulemper op, så når vi tror, ​​at vi ikke har brug for skabelonmotoren, vil vi se det modsatte.
Risikoen for at lave misdannet HTML er meget højere, så det kan være svært at få certificeringer til vores kode.
Den resulterende kode kan være vanskelig at dokumentere og dele med andre udviklere.
Hvis vi bruger kode til at generere HTML, vil det altid være ubehageligt at arbejde med specialtegn.
Der er en tendens til ikke at adskille applikationslogik fra præsentation.
Som vi kan se, er der mange ulemper ved, at selvom de ikke er alvorlige og ikke får vores ansøgning til ikke at fungere, hvis den reducerer muligheden for at være mere produktiv.
Fordele ved at bruge en skabelonmotorLad os nu se, hvad vi får ved at implementere løsninger som håndtag i vores applikationer med Express:
Den resulterende kode er mere organiseret, og vi er garanteret, at der ikke vil være nogen misformet HTML.
Vi kan adskille vores team i to ved at arbejde med brugergrænseflader uden at skulle udvikle sig i Back-End.
Skabelonmotorer giver os mulighed for at genbruge afsnit af kode og dermed hjælpe med at holde vores projekt optimeret.
Der er mange værktøjer, der hjælper os med at give bedre interaktion med den visuelle del af vores applikationer.
Hvordan vi ser, hvad skabelonmotorerne tilbyder os, er at være i stand til at adskille, optimere og organisere vores kode, hvilket medfører en direkte konsekvens af forbedringen af ​​effektiviteten, effektiviteten og den generelle produktivitet i vores udviklingsteam.
I begyndelsen af ​​selvstudiet nævnte vi det Jade det var standardmotoren, så hvorfor leder vi efter en anden motor? Svaret er meget enkelt, hvordan det fungerer Jade forsøger at reducere mængden af HTML vi skriver, kan det være lidt forvirrende, da vi praktisk talt skal lære en ny form for sprog til vores Front-end.
I det følgende billede vil vi se en skabelonkode for Jade så vi kan se et eksempel på dets syntaks:

Vi kan bemærke, at forskellen med kode HTML Standard er afgrundsdyb, og selvom koden er mindre, er den involverede tanke lidt mere.
Styr det er en anden historie end Jade, dens måde at arbejde på ligner andre motorer som f.eks Jinja2 eller Swig, da det giver os mulighed for at skrive etiketter HTML og derefter inde med vores egen motorkode kan vi definere, hvad den udskriver ud fra konteksten og den måde, den gør det på.
For eksempel, hvis vi ved, at vi skal udskrive noget, som en bruger har skrevet, kan vi automatisk undslippe specialtegnene og dermed undgå kodeindsprøjtning, men hvis vi ved, at det er vores egen kode, kan vi udtrykke det til Styr det undgår ikke teksten.
Server eller klientEt andet aspekt af Styr er, at det kan fungere på to måder, fra serversiden eller fra klientsiden. Denne alsidighed betyder, at vi bedre kan beslutte, hvordan vi vil udføre vores applikationer, da hvis det er en SPA o Enkelsides applikation, måske er klientsiden tilgang enklere og mere nyttig, men hvis vi vil have et websted, er det måske mere nyttigt at generere alt på serveren.
Til installation Styr på serversiden er det meget let, vi skal bare bruge npm i vores konsol, og dermed får vi de nødvendige pakker, lad os se, hvad vi skal skrive:

 npm install-gem ekspresstyr

Med det npm Det vil downloade alle de nødvendige komponenter, så vi kan inkorporere denne motor i vores projekt, i sidste ende skulle vi opnå et resultat svarende til følgende i vores konsol:

Derefter i vores fil, hvor vi starter vores ansøgning Express Vi skal fortælle det at bruge dette som skabelonmotor, for dette skal vi simpelthen skrive følgende kode:

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

Det, der ville forblive i vores fil, ville være følgende:

Styrets grundlæggende syntaksStyr Det har sin egen meget rene syntaks, der giver os mulighed for at inkorporere lidt visningslogik i skabelonen, vi kan inkorporere kommentarer, iterere over lister og blokke, undslippe eller ikke dele af tekst. Derfor er det vigtigt at kende de mest basale, så vi kan udtrykke vores ideer mere komfortabelt og dermed få mest muligt ud af det, lad os se den mest grundlæggende af motoren herunder.
Som et resultat genererer vores visning data, som vi skal vise brugeren, vi sender disse data gennem konteksten til vores skabelon, og det er her, vi udskriver dem. For at udskrive dette skal vi simpelthen omslutte variablen eller elementet i dobbelte seler som følgende:

 {{Navn}}

Det får os til at se indholdet af "Navn" som vi har defineret i vores opfattelse, undslipper disse dobbeltkrøllede seler automatisk tegn, på en sådan måde, at det ikke resulterer i udskrivning af kode, der ikke er tilladt som standard for udvikleren.
Nu, hvis vi vil udskrive en tekst uden at flygte, skal vi bruge tredobbelt seler, fortæller dette Styr at intet skulle undslippe, lad os se eksemplet:

 {{{Navne}}}

Dette hvis det giver os mulighed for at udskrive kode HTML, specialtegn og endda JavaScript uden indgriben fra vores motor.
Det kommentarer i skabelonen er afgørende, da de giver os mulighed for at identificere sektioner, tilføje vigtige oplysninger og dokumentere vores ansøgning. Hvis vi lægger en kommentar direkte på HTML i formen: dette ender med at være synligt for den, der inspicerer koden på vores side, så det begrænser os i, hvad vi kan efterlade dokumenteret.
Men hvis vi bruger kommentarer i Styr, vi kan altid se dem i kildekoden, men motoren ved generering af det, brugeren ser, udelader det, og når vi inspicerer webkoden eller applikationen, ser vi ikke noget. At skrive en kommentar til Styr vi skal gøre følgende:

 {{! vores kommentar}}

Det betyder, at indholdet af kommentaren aldrig genereres i det resultat, der er synligt for vores brugere, hvilket gør det, vi skriver, hemmeligt for dem, der er uden for vores udviklingsteam.
Noget, vi ikke må glemme, er, at vi ikke behøver at begrænse os til det, der er i mainstream, der er mange muligheder, der kan være bedre for hver persons udviklingsstil, hvorfor det er vigtigt at undersøge og ikke være bange for at prøve nye ting.
Med dette har vi afsluttet denne vejledning, vi har haft en lille, men ganske berigende introduktion til, hvad brugen af ​​skabeloner betyder, og hvordan man integrerer en ny motor i Express.
Ja OK Styr er meget mere omfattende, men med disse nøglebegreber og vores anvendelse Express vi vil kunne opnå meget interessante ting på kort tid.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt