„Express.js“ naudokite šablonus su rankenomis

Šablonų naudojimas tapo būtinas žiniatinklio programų pasaulyje, nes tai padeda atskirti programavimo logiką nuo jos pateikimo. Visas šis atskyrimas ir šio vystymosi stiliaus priėmimo augimas paskatino daugybę rėmus rinkoje, kurie padeda mums prisiimti atsakomybę už šablonų valdymą.
Jeigu Ekspresas, šis iš pradžių yra su šablonų varikliu, vadinamu JadeTačiau daugelis kūrėjų jau yra įgiję kitų žinių ir nebūtų teisinga, kad jie vėl turėtų prisitaikyti prie naujo variklio, tai nėra blogai, bet ne kiekvienam.
Būtent dėl ​​to Ekspresas leidžia mums sukonfigūruoti sistemą taip, kad galėtume dirbti su skirtingais šablonų varikliais, pvz Rankenos kuris yra pratęsimas Ūsai.js ir tai yra labai populiarus šablonų variklis, nes jis pagrįstas „JavaScript“ ir mes galime jį naudoti tiek serverio pusėje, tiek kliente.
ReikalavimaiKad atitiktų kai kuriuos čia pateiktus pavyzdžius, turime būti įdiegę ir pasiekti Node.js, ir anksčiau buvo įdiegta Ekspresas. Teksto redaktorius ir programa Ekspresas jie yra pageidautini, kad galėtų įtraukti pamokoje paaiškintas sąvokas.
Šablono variklio nenaudojimo trūkumaiJei šablono variklis nenaudojamas, atsiranda keletas trūkumų, kurie gali turėti įtakos mūsų programų kūrimo greičiui, mes išvardinsime šiuos trūkumus, kad, kai manysime, kad šablono variklio mums nereikia, pamatysime priešingai.
Netinkamo HTML kūrimo rizika yra daug didesnė, todėl gauti kodo sertifikatus gali būti sunku.
Gautą kodą gali būti sunku dokumentuoti ir bendrinti su kitais kūrėjais.
Jei HTML kūrimui naudojame kodą, visada bus nepatogu dirbti su specialiais simboliais.
Yra tendencija neatskirti taikymo logikos nuo pateikimo.
Kaip matome, yra daug trūkumų: nors jie nėra rimti ir dėl to mūsų programa neveikia, jei tai sumažina produktyvumo galimybę.
Šablono variklio naudojimo pranašumaiDabar pažiūrėkime, ką gausime įgyvendindami tokius sprendimus kaip Rankenos savo programose su „Express“:
Gautas kodas yra labiau organizuotas, ir mes garantuojame, kad nebus netinkamai suformuoto HTML.
Mes galime padalinti savo komandą į dvi dalis, dirbdami su vartotojo sąsajomis, nereikalaudami kurti „Back-End“.
Šablonų varikliai leidžia mums pakartotinai naudoti kodo dalis, taip padėdami optimizuoti mūsų projektą.
Yra daug paslaugų, kurios padeda mums geriau bendrauti su vaizdine mūsų programų dalimi.
Tai, ką mes matome, ką mums siūlo šablonų varikliai, yra galimybė atskirti, optimizuoti ir sutvarkyti savo kodą, o tai tiesiogiai lemia mūsų kūrimo komandos efektyvumo, efektyvumo ir bendro našumo pagerėjimą.
Pamokos pradžioje tai paminėjome Jade tai buvo numatytasis variklis, tad kodėl mes ieškome kito variklio? Atsakymas yra labai paprastas, kaip tai veikia Jade bando sumažinti sumą HTML rašome, tai gali būti šiek tiek painu, nes turime praktiškai išmokti naują kalbos formą Priekinis galas.
Kitame paveikslėlyje pamatysime šablono kodą Jade Taigi galime pamatyti jo sintaksės pavyzdį:

Mes galime pastebėti, kad skirtumas su kodu HTML Standartas yra beprasmis, ir nors kodas yra mažesnis, minčių kiekis yra šiek tiek didesnis.
Rankenos tai kitokia istorija nei Jade, jo veikimo būdas yra panašus į kitus variklius, tokius kaip Jinja2 arba Swig, nes tai leidžia mums rašyti etiketes HTML o tada viduje su savo variklio kodu galime apibrėžti, ką jis spausdina iš konteksto ir kaip tai daro.
Pavyzdžiui, jei žinome, kad spausdinsime tai, ką parašė vartotojas, galime automatiškai išvengti specialiųjų simbolių ir taip išvengti kodo įvedimo, bet jei žinome, kad tai yra mūsų pačių kodas, galime jį išreikšti Rankenos kad neišvengia teksto.
Serveris arba klientasKitas aspektas Rankenos yra tai, kad jis gali veikti dviem būdais - iš serverio pusės arba iš kliento pusės. Šis universalumas reiškia, kad galime geriau nuspręsti, kaip norime vykdyti savo programas, nes jei tai yra SPA o Vieno puslapio programa, galbūt požiūris į klientą yra paprastesnis ir naudingesnis, bet jei norime interneto svetainės, galbūt naudingiau sukurti viską serveryje.
Įdiegimui Rankenos serverio pusėje tai labai paprasta, mes tiesiog turime naudoti npm mūsų konsolėje ir tokiu būdu gausime reikiamus paketus, pažiūrėkime, ką turime parašyti:

 npm įdiegti-sutaupykite greitojo vairo

Su tuo npm Ji atsisiųs visus reikalingus komponentus, kad galėtume įtraukti šį variklį į savo projektą, galų gale turėtume gauti panašų rezultatą kaip šis konsolėje:

Tada mūsų faile, kuriame pradedame savo programą Ekspresas Turime pasakyti, kad jis naudotų tai kaip šablono variklį, tam tiesiog turime parašyti šį kodą:

 var rankenos = reikalauti ('greitosios rankenos') .create ({defaultLayout: 'main'}); app.engine ('vairas', rankena.variklis); app.set ('view engine', 'vairo');

Tai, kas liktų mūsų byloje, būtų tokia:

Pagrindinė rankenos sintaksėRankenos Ji turi savo labai švarią sintaksę, leidžiančią į šabloną įtraukti šiek tiek peržiūros logikos, mes galime įtraukti komentarus, kartoti sąrašus ir blokus, pabėgti arba ne teksto dalis. Štai kodėl svarbu žinoti pačias pagrindines, kad galėtume patogiau išreikšti savo idėjas ir taip išnaudoti visas galimybes, pažiūrėkime žemiau esantį pagrindinį variklį.
Dėl to mūsų vaizdas generuoja duomenis, kuriuos turime parodyti vartotojui, mes perduodame šiuos duomenis per kontekstą į mūsų šabloną ir čia mes juos spausdiname. Norėdami tai atspausdinti, mes tiesiog turime įtraukti kintamąjį arba elementą į dvigubus skliaustus, tokius kaip:

 {{Vardas}}

Tai leidžia mums pamatyti turinį "Vardas" kaip mes supratome, šios dvigubos garbanotos skliaustelės automatiškai pašalina simbolius taip, kad nespausdinamas kodas, kurio pagal numatytuosius nustatymus neleidžia kūrėjas.
Dabar, jei norime išspausdinti tekstą nepabėgdami, turime naudoti trigubus skliaustus Rankenos kad niekas neturėtų pabėgti, pažiūrėkime pavyzdį:

 {{{Vardai}}}

Tai leidžia mums spausdinti kodą HTML, specialieji simboliai ir net „JavaScript“ be mūsų variklio įsikišimo.
The komentarus šablone yra gyvybiškai svarbūs, nes jie leidžia mums nustatyti skyrius, pridėti svarbios informacijos ir dokumentuoti savo paraišką. Jei komentuosime tiesiogiai HTML formoje: tai gali būti matoma tiems, kurie tikrina mūsų puslapio kodą, todėl tai riboja tai, ką galime palikti dokumentuotus.
Bet jei naudosime komentarus Rankenos, juos visada galime matyti šaltinio kode, tačiau variklis, generuodamas tai, ką mato vartotojas, praleidžia jį, o tada, kai apžiūrėsime žiniatinklio ar programos kodą, nieko nematysime. Norėdami parašyti komentarą apie Rankenos turime daryti taip:

 {{! mūsų komentaras}}

Tai reiškia, kad komentaro turinys niekada nesukuriamas mūsų vartotojams matomame rezultate, todėl tai, ką rašome, yra paslaptis tiems, kurie nepriklauso mūsų kūrimo komandai.
Turime nepamiršti, kad neturime apsiriboti tuo, kas yra pagrindinė, yra daug variantų, kurie gali būti geresni kiekvieno žmogaus vystymosi stiliui, todėl labai svarbu atlikti tyrimus ir nebijoti išbandyti naujų dalykų.
Baigę šį vadovėlį, turėjome nedidelį, bet gana praturtinantį įvadą, ką reiškia šablonų naudojimas ir kaip įterpti naują variklį Ekspresas.
taip gerai Rankenos yra daug platesnis, tačiau su šiomis pagrindinėmis sąvokomis ir mūsų taikymu Ekspresas per trumpą laiką galėsime pasiekti labai įdomių dalykų.Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką