Използвайте шаблони с кормилото в Express.js

Съдържание
Използването на шаблони се превърна в необходимост в света на уеб приложенията, защото това ни помага да отделим логиката на програмиране от нейното представяне. Цялото това отделяне и възходът на рецепцията на този стил на развитие доведоха до появата на голям брой рамки на пазара, които ни помагат да носим отговорността за управление на шаблони.
В случай че Експрес, този идва първоначално с шаблонен двигател, наречен НефритВъпреки това, много разработчици вече идват с опит в други и не би било честно, че трябва да се приспособят отново към нов двигател, това не е лошо, но не е за всеки вкус.
Точно заради това Експрес ни позволява да конфигурираме рамката, така че да можем да работим с различни механизми за шаблони, като напр Дръжки което е продължение на Mustache.js и това е много популярен шаблонен двигател, тъй като е базиран на JavaScript и можем да го използваме както от страна на сървъра, така и на клиента.
ИзискванияЗа да се съобразим с някои от примерите, показани тук, трябва да имаме инсталиран и достъп до Node.js, и вече са инсталирани Експрес. Текстов редактор и приложение Експрес те са желателни, за да могат да включат концепциите, обяснени в урока.
Недостатъци на неизползването на шаблонен механизъмНеизползването на шаблонен механизъм води до редица недостатъци, които могат да повлияят на скоростта на разработването на нашето приложение, ние ще изброим тези недостатъци, така че когато смятаме, че не се нуждаем от шаблонен механизъм, ще видим обратното.
Рискът от създаване на неправилен HTML код е много по -висок, така че получаването на сертификати за нашия код може да бъде трудно.
Полученият код може да бъде труден за документиране и споделяне с други разработчици.
Ако използваме код за генериране на HTML, винаги ще бъде неудобно да работим със специални знаци.
Съществува тенденция да не се отделя логиката на приложението от представянето.
Както виждаме, има много недостатъци, които въпреки че не са сериозни и не водят нашето приложение да не работи, ако намалява възможността да бъдем по -продуктивни.
Предимства на използването на шаблонен механизъмСега нека видим какво ще спечелим, като внедрим решения като кормилото в нашите приложения с Express:
Полученият код е по -организиран и сме сигурни, че няма да има неправилен HTML.
Можем да разделим нашия екип на две, като работим с потребителски интерфейси, без да е необходимо да се развиваме в Back-End.
Двигателите на шаблони ни позволяват да използваме повторно части от кода, като по този начин спомагаме за поддържането на нашия проект оптимизиран.
Има много помощни програми, които ни помагат да осигурим по -добро взаимодействие с визуалната част на нашите приложения.
Начинът, по който виждаме това, което ни предлагат шаблоните, е да можем да отделим, оптимизираме и организираме нашия код, това води до пряко следствие подобряването на ефективността, ефективността и общата производителност в нашия екип за разработка.
В началото на урока споменахме това Нефрит това беше двигателят по подразбиране, така че защо търсим друг двигател? Отговорът е много прост, начинът, по който работи Нефрит се опитва да намали размера на HTML пишем, това може да бъде малко объркващо, тъй като на практика трябва да научим нова за нас форма на език Преден край.
На следващото изображение ще видим шаблон на код на Нефрит така че можем да видим пример за неговия синтаксис:

Можем да забележим, че разликата с кода HTML Стандартът е ужасен и въпреки че кодът е по -малък, обемът на мисленето е малко повече.
Дръжки това е различна история от Нефрит, начинът му на работа е подобен на други двигатели като Джинджа2 или Swig, тъй като ни позволява да пишем етикети HTML и след това вътре със собствения си код на двигателя можем да определим какво отпечатва от контекста и начина, по който го прави.
Например, ако знаем, че ще отпечатаме нещо, което потребителят е написал, можем автоматично да избягаме от специалните символи и по този начин да избегнем инжектирането на код, но ако знаем, че това е наш собствен код, тогава можем да го изразим на Дръжки което не избяга от текста.
Сървър или клиентДруг аспект на Дръжки е, че може да работи по два начина, от страна на сървъра или от страна на клиента. Тази гъвкавост означава, че можем по -добре да решим как искаме да изпълняваме нашите приложения, тъй като ако е a СПА център o Приложение за една страница, може би подходът от страна на клиента е по-прост и по-полезен, но ако искаме уеб сайт, може би генерирането на всичко на сървъра е по-полезно.
За инсталиране Дръжки от страна на сървъра е много лесно, просто трябва да използваме npm в нашата конзола и по този начин ще получим необходимите пакети, нека видим какво трябва да напишем:
 npm install --save express-кормило
С това npm Той ще изтегли всички необходими компоненти, за да можем да включим този двигател в нашия проект, в крайна сметка трябва да получим резултат, подобен на следния в нашата конзола:

След това в нашия файл, където стартираме нашето приложение Експрес Трябва да му кажем да използва това като шаблон на двигателя, за това просто трябва да напишем следния код:
 var handlebars = require ('express-handlebars') .create ({defaultLayout: 'main'}); app.engine ('handlebars', handlebars.engine); app.set ('view engine', 'handlebars');
Това, което ще остане в нашия файл, ще бъде следното:

Основен синтаксис на кормилотоДръжки Той има свой собствен много чист синтаксис, който ни позволява да включим малко логика на изгледа в шаблона, можем да включим коментари, да преглеждаме списъци и блокове, да избягваме или не секции от текст. Ето защо е важно да знаем най -основните, за да можем да изразим идеите си по -удобно и по този начин да извлечем максимума от него, нека видим най -основното от двигателя по -долу.
В резултат на това нашият изглед генерира данни, които трябва да покажем на потребителя, предаваме тези данни през контекста на нашия шаблон и тук го отпечатваме. За да отпечатаме това, просто трябва да поставим променливата или елемента в двойни скоби, както следва:
 {{Име}}
Това ни кара да видим съдържанието на "Име" които сме дефинирали според нас, тези двойни къдрави скоби автоматично избягват знаци, по такъв начин, че да не доведат до отпечатване на код, който не е разрешен по подразбиране на разработчика.
Сега, ако искаме да отпечатаме текст, без да избягаме, трябва да използваме тройни скоби, това казва Дръжки че нищо не трябва да избяга, нека да видим примера:
 {{{Имена}}}
Това, ако ни позволява да отпечатаме код HTML, специални символи и дори JavaScript без намеса от нашия двигател.
The коментари в шаблона са жизненоважни, тъй като ни позволяват да идентифицираме раздели, да добавяме важна информация и да документираме нашето приложение. Ако направим коментар директно HTML във формата: това в крайна сметка ще бъде видимо за всеки, който проверява кода на нашата страница, така че ни ограничава в това, което можем да оставим документирано.
Но ако използваме коментари в Дръжки, винаги можем да ги видим в изходния код, но двигателят, когато генерира това, което потребителят вижда, го пропуска, а след това, когато проверим кода на мрежата или приложението, няма да видим нищо. За да напишете коментар Дръжки трябва да направим следното:
 {{! нашият коментар}}
Това означава, че съдържанието на коментара никога не се генерира в резултат, който е видим за нашите потребители, което прави това, което пишем, тайна за тези, които са извън нашия екип за разработка.
Нещо, което не трябва да забравяме, е, че не трябва да се ограничаваме до това, което е в мейнстрийм, има много възможности, които може да са по -добри за стила на развитие на всеки човек, поради което е жизненоважно да се правят изследвания и да не се страхувате да опитвате нови неща.
С това завършихме този урок, имахме малко, но доста обогатяващо въведение за това какво означава използването на шаблони и как да включим нов двигател в Експрес.
да, добре Дръжки е много по -обширен, но с тези ключови концепции и нашето приложение Експрес ще можем да постигнем много интересни неща за кратко време.Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка
wave wave wave wave wave