Pro inženýry, kteří se pokusili použít Jade Template Engine a nemohou začít

Když jsem začal pracovat ve Storify jako Node.js Engineer. Technologický zásobník byl Express a Jade. Nerad to přiznávám, ale hodně jsem s Jade bojoval!

Předtím jsem většinou pracoval s Underscore a Handlebars. Pokusil jsem se upravit některé HTML v šablonách Jade. Jindy bych změnil pouze text. Byly to triviální aktualizace, ale velmi často způsobovaly selhání celého serveru .

Strašně se mi nedařilo učit se metodou pokus-omyl. Nenáviděl jsem Jade. Také jsem začínal nenávidět úpravy šablon. Pak jsem měl žárovkový moment:Potřebuji tutoriál. Šel jsem do oficiálních dokumentů. Kéž by tento článek v té době existoval. Poté, co jsem strávil pouhou hodinu učením Jade, byl jsem schopen používat Jade a plynule provádět všechny změny v šablonách.

Chytrí lidé se učí svými chybami a moudří lidé se učí od ostatních . Neopakuj mou blbost. Projděte si tento tutoriál Jade, abyste využili sílu tohoto úžasného jazyka šablon.

Šablonový engine je knihovna nebo rámec, který používá některá pravidla/jazyky k interpretaci dat a vykreslování pohledů. V případě webových aplikací jsou zobrazení stránkami HTML (nebo jejich částmi), ale mohou to být soubory JSON nebo XML nebo v programech pro stolní počítače GUI. Pro ty z vás, kteří jsou obeznámeni s konceptem model–view–controller, patří šablony k zobrazení.

Ve webových aplikacích je výhodné používat šablony, protože pomocí jediné šablony můžeme dynamicky generovat nekonečný počet stránek! Další vedlejší výhodou je, když potřebujeme něco změnit; můžeme to udělat pouze na jednom místě.

Pokud se vrátíme k diagramům v předchozí kapitole (tradiční vs. REST API přístupy), můžeme odvodit, že šablony lze zkompilovat do HTML buď na straně serveru (tradiční přístup) nebo na straně klienta (přístup REST API). Bez ohledu na to, jaký přístup zvolíme, syntaxe samotných knihoven zůstává nedotčena.

V tomto článku se budu zabývat následujícím:

  • Syntaxe a funkce Jade
  • Samostatné použití Jade

Jade syntaxe a funkce

Jade je Node.js bratr Hamla v tom smyslu, že používá mezery a odsazení jako součást svého jazyka. Proto musíme být opatrní, abychom dodrželi správnou syntaxi.

Příklady syntaxe Jade v této sekci můžete sledovat online, na demo stránce oficiálního webu (http://jade-lang.com/demo) nebo na zdroji @naltatis (http://naltatis.github.io/ jade-syntax-docs/), nebo psaním samostatných skriptů Node.js (příklady jsou uvedeny v „Jade Standalone Usage“, které se objeví dále v této kapitole).

Značky

Jakýkoli text na začátku řádku – ve výchozím nastavení – je interpretován jako značka HTML. Hlavní výhodou Jade je, že tento text vykresluje jak uzavírací, tak otevírací tagy pro element HTML a také <></> symboly. Proto ušetříme mnoho úhozů, když vývojáři píší v Jade!

Text za značkou a mezerou (např. tag <text> ) je analyzován jako vnitřní HTML (tj. obsah uvnitř prvku). Například, pokud máme následující Jade kód:

Body
  div
    h1 Practical Node.js
    p The only book most people will ever need.
  div
    footer &copy; Apress

Výstup výše uvedené šablony bude:

<body>
  <div>
    <h1>Practical Node.js</h1>
    <p>The only book most people will ever need.</p>
  </div>
  <div>
    <footer>&copy; Apress</footer>
  </div>
</body>

Proměnné/místní

Data předávaná do šablony Jade se nazývají místní . Pro výstup hodnoty proměnné použijte = . Viz následující příklady:

[Sidenote]

Čtení blogových příspěvků je dobré, ale sledování videokurzů je ještě lepší, protože jsou poutavější.

Mnoho vývojářů si stěžovalo, že na Node je nedostatek dostupného kvalitního videomateriálu. Sledování videí na YouTube je rušivé a platit 500 $ za videokurz Node je šílené!

Jděte se podívat na Node University, která má na Node ZDARMA videokurzy:node.university.

[Konec vedlejší poznámky]

Jade kód:

h1= title
p= body

Místní:

{
  title: "Express.js Guide",
  body: "The Comprehensive Book on Express.js"
}

HTML výstup:

<h1>Express.js Guide</h1>
<p>The Comprehensive Book on Express.js</p> 

Atributy

Atributy se přidávají jejich vložením do závorek hned za názvem značky. Řídí se name=value formát. Kromě toho je třeba více atributů oddělit čárkou. Například,

div(id="content", class="main")
  a(href="http://expressjsguide.com", title="Express.js Guide", target="_blank") Express.js Guide
  form(action="/login")
    button(type="submit, value="save")
div(class="hero-unit") Lean Node.js!

změní na:

<div id="content" class="main"><a href="http://expressjsguide.com" title="Express.js Guide"
target="_blank">Express.js Guide</a>
  <form action="/login">
    <button type="submit" value="save"></button>
  </form>
  <div class="hero-unit">Learn Node.js</div>
</div>

Někdy musí být hodnota atributu dynamická. V tomto případě stačí použít název proměnné! Trubka nebo | , nám umožňuje napsat obsah HTML uzlu na nový řádek – jinými slovy, řádek s čárou se stane vnitřním textem, příklad je následující:

a(href=url, data-active=isActive)
label
  input(type="checkbox", checked=isChecked)
  | yes / no

Výše uvedená šablona je poskytována místním obyvatelům:

{
  url: "/logout",
  isActive: true,
  isChecked: false
}

A oba, tj. data šablony a místní data, vytvářejí výstup:

<a href="/logout" data-active="data-active"></a>
<label>
  <input type="checkbox"/>yes / no
</label>

Všimněte si, že atribut s hodnotou false je z výstupu HTML vynecháno. Pokud však není předána žádná hodnota, true předpokládá se – například:

input(type='radio', checked)
input(type='radio', checked=true)
input(type='radio', checked=false)
<input type="radio" checked="checked"/>
<input type="radio" checked="checked"/>
<input type="radio"/>

Literály

Pro pohodlí můžeme za názvy značek napsat třídy a ID. Například pak můžeme použít lead a center třídy do odstavce a vytvořte div prvek s side-bar ID a pull-right class (opět svislá čára označuje vnitřní text):

div#content
  p.lead.center
    | webapplog: where code lives
    #side-bar.pull-right
    span.contact.span4
      a(href="/contact") contact us
<div id="content">
  <p class="lead center">
    webapplog: where code lives
    <div id="side-bar" class="pull-right"></div>
    <span class="contact span4">
      <a href="/contact">contact us</a>
    </span>
  </p>
</div>

Všimněte si, že pokud je vynechán název značky, div místo toho se používá.

Text

Výstup surového textu se provádí pomocí |—například:

div
  | Jade is a template engine.
  | It can be used in Node.js and in the browser JavaScript.

Bloky skriptů a stylů

Někdy chtějí vývojáři napsat bloky obsahu pro script nebo style značky v HTML! To je možné pomocí tečky. Například můžeme napsat inline front-end JavaScript takto:

script.
   console.log('Hello Jade!')
   setTimeout(function(){
    window.location.href='http://rpjs.co'
   },200))
   console.log('Good bye!')
<script>
  console.log('Hello Jade!')
  setTimeout(function(){
   window.location.href='http://rpjs.co'
  },200))
  console.log('Good bye!')
</script> 

Kód JavaScript

Na rozdíl od předchozího příkladu, pokud chceme použít any JavaScript v době kompilace šablony – jinými slovy, k psaní spustitelného kódu JavaScript, který manipuluje s výstupem Jade (tj. HTML) – můžeme použít - , = nebo != symboly. To se může hodit, když vydáváme prvky HTML a vkládáme JavaScript. Je zřejmé, že tyto typy věcí by se měly dělat opatrně, aby se zabránilo útokům cross-site scripting (XSS). Například pokud chceme definovat pole a výstup <> můžeme použít != .

- var arr = ['<a>','<b>','<c>']
ul
  - for (var i = 0; i< arr.length; i++)
    li
      span= i
      span!="unescaped: " + arr[i] + " vs. "
      span= "escaped: " + arr[i]

vytváří toto:

<ul>
  <li><span>0</span><span>unescaped: <a> vs. </span><span>escaped: &lt;a&gt;</span></li>
  <li><span>1</span><span>unescaped: <b> vs. </span><span>escaped: &lt;b&gt;</span></li>
  <li><span>2</span><span>unescaped: <c> vs. </span><span>escaped: &lt;c&gt;</span></li>
</ul>

T i p Jedním z hlavních rozdílů mezi Jade a Handlebars je to, že první umožňuje v podstatě jakýkoli JavaScript ve svém kódu, zatímco druhý omezuje programátory pouze na hrstku vestavěných a na zakázku registrovaných pomocníků.

Komentáře

Pokud jde o komentáře, máme na výběr, zda je vydat nebo ne. V prvním případě použijte styl JavaScriptu //; pro druhou možnost použijte //- . Například,

// content goes here
p Node.js is a non-blocking I/O for scalable apps.
//- @todo change this to a class
p(id="footer") Copyright 2014 Azat

výstupy:

<!-- content goes here-->
<p>Node.js is a non-blocking I/O for scalable apps.</p>
<p id="footer">Copyright 2014 Azat</p>

Podmínky (pokud )

Je zajímavé, že kromě standardního kódu JavaScript, kde je if příkaz lze použít s předponou - , můžeme použít minimalistickou alternativu Jade bez předpony a závorek – například:

- var user = {}
- user.admin = Math.random()>0.5
if user.admin
    button(class="launch") Launch Spacecraft
else
    button(class="login") Log in

Existuje také if, což je ekvivalentní not nebo ! .

Iterace (každá smyčka)

Podobně jako podmínky lze iterátory v Jade psát jednoduše pomocí each— například:

- var languages = ['php', 'node', 'ruby']
div
  each value, index in languages
    p= index + ". " + value

Výstup HTML je následující:

<div>
  <p>0. php</p>
  <p>1. node</p>
  <p>2. ruby</p>
</div>

Stejná konstrukce funguje i s objekty:

- var languages = {'php': -1, 'node': 2, 'ruby':1}
div
  each value, key in languages
    p= key + ": " + value

Výše uvedený Jade je zkompilován do výstupu HTML:

<div>
  <p>php: -1</p>
  <p>node: 2</p>
  <p>ruby: 1</p>
</div>

Filtry

Filtry se používají, když jsou bloky textů napsané v jiném jazyce. Například filtr pro Markdown vypadá takto:

p
 :markdown
   # Practical Node.js

Tato kniha (http://expressjsguide.com) skutečně pomáhá pochopit mnoho komponent potřebných pro moderní vývoj webu.

■ Poznámka Moduly Markdown je ještě třeba nainstalovat. marked a markdown NPM balíčky se k tomu často používají. Není potřeba další konfigurace, stačí je nainstalovat do místního node_modules projektu složka.

Interpolace

Interpolace v Jade je dosažena pomocí #{name} . Například pro výstup title v odstavci proveďte následující:

- var title = "Express.js Guide"
p Read the #{title} in PDF, MOBI and EPUB

Interpolace se zpracovává při kompilaci šablony; proto jej nepoužívejte ve spustitelném JavaScriptu (- ).

Případ

Zde je příklad case prohlášení v Jade:

- var coins = Math.round(Math.random()*10)
case coins
  when 0
    p You have no money
  when 1
    p You have a coin
default
  p You have #{coins} coins!

Mixiny

Mixiny jsou funkce, které berou parametry a vytvářejí nějaké HTML. Syntaxe deklarace je mixin name(param,param2,...) a použití je +name(data) . Například:

mixin row(items)
  tr
    each item, index in items
      td= item 

mixin table(tableData)
  table
    each row, index in tableData
      +row(row)
- var node = [{name: "express"}, {name: "hapi"}, {name: "derby"}]
+table(node)
- var js = [{name: "backbone"}, {name: "angular"}, {name: "ember"}]
+table(js)

Šablona a data výše vytvářejí tento HTML:

<table>
  <tr>
    <td>express</td>
  </tr>
  <tr>
    <td>hapi</td>
  </tr>
  <tr>
    <td>derby</td>
  </tr>
</table>
<table>
  <tr>
    <td>backbone</td>
  </tr>
  <tr>
    <td>angular</td>
  </tr>
  <tr>
    <td>ember</td>
  </tr>
</table>

Zahrnout

include je způsob, jak rozdělit logiku do samostatného souboru za účelem opětovného použití ve více souborech. Je to přístup shora dolů; diktujeme, co se má použít v souboru, který obsahuje jiný soubor. Nejprve se zpracuje soubor, který obsahuje (můžeme tam definovat locals), pak se zpracuje zahrnutý soubor (můžeme použít dříve definované locals).

Chcete-li zahrnout šablonu Jade, použijte include /path/filename. Například v souboru A:

include ./includes/header

Všimněte si, že pro název šablony a její cestu nejsou potřeba dvojité nebo jednoduché uvozovky. Je možné procházet stromem:

include ../includes/footer

Neexistuje však způsob, jak použít dynamickou hodnotu pro soubor a cestu (použijte proměnnou), protože zahrnutí/části se zpracovávají při kompilaci (nikoli za běhu).

Prodloužit

extend je přístup zdola nahoru (na rozdíl od include ), v tom smyslu, že zahrnutý soubor přikazuje, které části hlavního souboru chce nahradit. Funguje to s extendem filename a block blockname prohlášení:

V file_a :

block header
  p some default text
block content
  p Loading ...
block footer
  p copyright

V file_b :

extend file_a
block header
  p very specific text
block content
  .main-content

Použití samostatného nefritu

Šablonové motory se ne vždy používají s Node.js (a frameworky jako Express.js). Někdy bychom mohli chtít použít Jade samostatně. Příklady použití zahrnují generování šablony e-mailu, předkompilaci Jade před nasazením a ladění. V této části provádíme následující:

  • Nainstalujte modul Jade
  • Vytvořte náš první soubor Jade
  • Vytvořte program Node.js, který používá soubor Jade
  • Porovnejte jade.compile , jade.render a jade.renderFile

Chcete-li přidat jade závislosti na vašem projektu, nebo pokud začínáte od nuly z prázdné složky projektu, proveďte následující:

  • Vytvořte prázdný node_modules složka s $ mkdir node_modules
  • Nainstalujte a přidejte jade na package.json s $ npm install jade –save . Viz výsledky na obrázku 4–1.

Obrázek 4-1. Instalace Jade

Řekněme, že máme nějaký skript Node.js, který odesílá e-maily, a potřebujeme použít šablonu pro dynamické generování HTML pro e-maily. Takto by to mohlo vypadat (soubor jade-example.jade ):

.header
  h1= title
  p
.body
  p= body
.footer
  div= By
    a(href="http://twitter.com/#{author.twitter}")= author.name
ul
  each tag, index in tags
    li= tag

V tomto případě musí náš skript Node.js hydratovat nebo naplnit tuto šablonu následujícími daty:

  • title:string
  • body:string
  • autor:řetězec
  • značky:array

Tyto proměnné můžeme extrahovat z více zdrojů (databází, souborových systémů, uživatelských vstupů a tak dále). Například v jade-example.js používáme pevně zakódované hodnoty pro title , author , tags , ale předejte argument příkazového řádku pro body :

var jade = require('jade'),
  fs = require('fs'); 
var data = {
  title: "Practical Node.js",
  author: {
    twitter: "@azat_co",
    name: "Azat"
  },
  tags: ['express', 'node', 'javascript']
}
data.body = process.argv[2];

fs.readFile('jade-example.jade', 'utf-8', function(error, source){
  var template = jade.compile(source);
  var html = template(data)
  console.log(html)
});

Tímto způsobem, když spustíme $ node jade-example.js 'email body' , dostaneme výstup zobrazený na obrázku 4–2.

Obrázek 4–2. Výsledek výstupu jade-example

„Pretified“ HTML výstup je následující:

<div class="header">
    <h1>Practical Node.js</h1>
    <p></p>
</div>
<div class="body">
    <p>email body</p>
</div> 
<div class="footer">
    <div><a href="http://twitter.com/@azat_co"> Azat</a>
    </div>
    <ul>
        <li>express</li>
        <li>node</li>
        <li>javascript</li>
    </ul>
</div>

Kromě jade.compile() , Jade API má funkce jade.render() a jade.renderFile() . Například předchozí soubor lze přepsat pomocí jade.render() :

var jade = require('jade'),
  fs = require('fs');

var data = {
  title: "Practical Node.js",
  author: {
    twitter: "@azat_co",
    name: "Azat"
  },
  tags: ['express', 'node', 'javascript']
}
data.body = process.argv[2];

//jade.render
fs.readFile('jade-example.jade', 'utf-8', function(error, source){
  var html = jade.render(source, data)
  console.log(html)
});

Navíc s jade.renderFile , jade-example.js file je ještě kompaktnější:

var jade = require('jade'),
  fs = require('fs');

var data = {
  title: "Practical Node.js",
  author: {
    twitter: "@azat_co",
    name: "Azat"
  },
  tags: ['express', 'node', 'javascript']
}
data.body = process.argv[2];

//jade.renderFile

jade.renderFile('jade-example.jade', data, function(error, html){
  console.log(html)
});

Poznámka Jade lze také použít jako nástroj příkazového řádku po instalaci s -g nebo --global možnost přes NPM. Další informace získáte spuštěním jade -h nebo si prohlédněte oficiální dokumentaci (http://jade-lang.com/command-line/).

Chcete-li použít Jade v prohlížeči, můžete použít browserify (https://github.com/substack/node-browserify) a jeho middleware jadeify (https://github.com/substack/node-jadeify).

Poznámka Chcete-li použít stejné šablony Jade na straně front-endu (prohlížeče) a serveru, doporučuji jade-browser  (https://www.npmjs.org/package/jade-browser) od Storify, jehož jsem byl během své práce nějakou dobu správcem. jade-browser funguje jako middleware Express.js a zpřístupňuje prohlížeči šablony na straně serveru spolu s užitečnými funkcemi. GitHub: ttps://github.com/storify/jade-browser.

Tím tento rychlý průvodce Jade končí. V dalších příspěvcích se budu věnovat souvisejícím tématům:

  • Syntaxe řídítek
  • Samostatné použití řídítek
  • Použití Jade a Handlebars v Express.js 4
  • Projekt:přidání šablon Jade do blogu