模板引擎Jade

前言：node.js的模板引擎有多种，如：ejs，Handlebars，jade。一开始首先学习了ejs，可是发现其有一个很大的弊端，那就是它不能继承（因为以前用的所有是thinkphp的模板，因此用起来很是别扭，只能进行include，而不能extend），因而转为jade，将html作了一层抽象的模板引擎。

安装jade

利用npm全局安装：

$ npm install jade --global

因为sublime对jade没有高亮的支持，因此须要咱们手动来安装插件，进入到sublime下的Packages，而后执行下面命令便可：

git clone https://github.com/davidrios/jade-tmbundle.git

Hello World

先来进行一个简单的小demo，感受下jade：
新建一个文件命名为：demo.jade：

doctype html
html
    head
        meta(charset="utf-8")
        title Jade
    body
        h1 Hello World

终端中执行命令jade demo.jade，会发现咱们的文件夹下多了一个demo.html，这个就编译出来的html代码，打开一开会很是的乱：

这个代码是被压缩过的，没有任何可读性，咱们改下命令就能够得出具备可读性的代码，jade demo.jade -P：

可是每次更改完文件，咱们都要手动来执行一次命令这样实在是太费时间了，咱们能够采用jade demo.jade -P -w，监控咱们的jade，一有改变自动编译。

基本语法

• jade采起的是缩进的方式来肯定其关系，而且不管是须要闭合的标签仍是单个标签都是用其标签名便可，如：

div
  h1 Hello
  br
div 
  h1 World

编译成html就是

<div>
  <h1>Hello</h1>
</div><br>
<div>
  <h1>World</h1>
</div>

• 设定class与id:

div.tite#title表明的就是<div class='title' id='title></div>'
在jade中还能够将div.tite#title简写为.title#title，也会被编译成相应的div

• 设定其余属性：

除了class和id，其他属性都要在括号内设定，如：

meta(charset="utf-8")
a(href="http://www.baidu.com", title="百度")

• 一行文本太长怎么破：

这种状况是指，咱们的文字太多，编译器会换行，这样咱们的缩进就会被破坏，解决这个问题的方法有两种：

一： 缩进后一个|和一个空格：

p
    | 1.aa
    strong 11
    | 2.bb
    strong 22
    | 3.cc
    strong 33
    | 4.dd
    strong 44

二： 利用.:

p.
  1.aa<strong>11<strong>
  2.bb<strong>22<strong>
  3.cc<strong>22<strong>
  4.dd<strong>44<strong>

注意：p的每一行内容，在.后开始，利用.咱们还能够写内置的样式与脚本：

style.
      body{
         color: gray;
      }
script.
       var x = "123";

• 注释：

jade的注释有两种：
一： 能够被编译到咱们的html中：

// div#title 123
html中的显示为：
<!-- div#title 123-->

二：非缓存注释，不能被编译到html中：
只须要在//后加一个-就能够//- #title 不会被编译到html中

jade同时容许咱们假如对ie浏览器的条件判断注释，格式与html中同样：
<!--[if IE 8]><strong>换浏览器吧</strong><![endif]-->

• 变量声明：

在jade中能够进行变量的声明，- var test = "zp1996"，这样咱们就声明了一个test变量，要是想用这个变量的话也很简单，利用#{test}就能够，而且这个{}内支持js语法，如：#{test.toUpperCase()}，获得的就是ZP1996，做为模板语言来讲，固然能够接受外界传来的数据，可是须要注意的是在jade声明的变量优先级高于外面传入的，咱们来尝试下外面传入数据的方式，首先咱们将demo.jade的title写成#{title}，而后咱们在终端中输入下面命令：

$ jade index.jade -P -w --obj '{"title": "Hello World"}'

打开浏览器刷新下，能够看到咱们的网页的title值为Hello World。咱们也能够利用一个json文件来进行数据的传递，新建一个data.json：

// json文件内容
{
    "title": "Hello World"
}
// 终端输入命令
$ jade index.jade -P -w -O data.json

刷新浏览器，能够看到咱们的title值仍为Hello World 。
jade在拿变量的时候其实有两种方式：
一：#{}取值时对变量进行转义，利用=号一样能够。

- var data = "<script>alert(1);</script>"
div #{data}
div= data  //- 注意,此时=要紧挨着div且与data之间有一空格
// 编译成html得：
<div>&lt;script&gt;alert(1);&lt;/script&gt;</div>
<div>&lt;script&gt;alert(1);&lt;/script&gt;</div>

可是=号与#{}也有不一样，那就是在咱们所取得变量是没有定义的，用#{}取值取出来的是undefined，而=取出来的是空字符串：

input(type="text", value="#{zp}")
input(type="text", value=zp)
// html
<input type="text" value="undefined">
<input type="text">

二： !{}取值时不对变量进行转义，利用!=一样能够

- var data = "<script>alert(1);</script>"
div !{data}
div!= data  //- 注意,此时=要紧挨着div且与data之间有一空格
// 编译成html得：
<div><script>alert(1);</script></div>
<div><script>alert(1);</script></div>

当咱们须要在网页上输出#{}和!{}时，采用\#{}和\!{}就好。

流程控制语法

• js原生流程控制语句

jade支持js原生的流程控制语句，如遍历对象属性时的for...in，遍历数组时的for，进行判断时的if...else：

- var arr = [1, 2, 3, 4];
ul
  - for (var i = 0, len = arr.length; i < len; i++) 
    li #{arr[i]}
- var n = 0;
ul
  while (n < 4)
    li= n++ 
if (arr.length > 3)
  p the length of arr is more than 3
else
  p the length of arr is less than 3
// html
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>
<ul>
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
<p>the length of arr is more than 3</p>

• each

jade提供了一些语法糖
each来遍历对象或者数组
unless进行条件判断，unless(x) = if (!x)
case when来实现js原生的switch

- var obj = {x: 1, y: 2, z: 3};
each val, key in obj
  p #{key}: #{val}
each val in obj
  p #{val}
unless zp
  p zp is undefined
case n
  when 3
    p n is three
  when 4
    p n is four
  default 
    p n is n
// html
<p>x: 1</p>
<p>y: 2</p>
<p>z: 3</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>zp is undefined</p>
<p>n is four</p>

重用jade代码块

• mixin定义公共代码（相似于函数）

在某些状况下，代码可能常常会重用，就像函数同样，mixin就是为了解决这一问题：

// 基本语法：
mixin test
  p zp1996
+test
// 既然说了像函数同样，那么它确定也能够带有参数
mixin lessonsInfo(name, course)
  p #{name}'s lessons:
    ul
      each val, id in course
        li #{id}: #{val}
+lessonsInfo("zp", {"001": "数学分析", "002": "线性代数"});
// 还能够内联代码块
mixin show
  if block
    block
  else
    p no content for the time being
+show
  p 123
// 编译后为
p 123
+show
// 编译后为
p no content for the time being
// 同时还只是传递属性
mixin attr(name)
  p(class!=attributes.class) #{name}
+attr("attr")(class="demo")
// 编译后：
<p class="demo">attr</p>
// 咱们想要传递的是多个属性
mixin attrs(name)
  p&attributes(attributes) #{name}
+attrs("attrs")(class="demo", id="demo")
// 参数不肯定时和和ES2015中箭头函数的处理方式相同，就是...
mixin manyarg(name, ...items)
  ul(class="#{name}")
    each item in items
      li #{item}

• 模板继承

block demo
  p this is a demo about how to use block
block demo
// 编译后：
<p>this is a demo about how to use block</p>
<p>this is a demo about how to use block</p>

模板的继承和thinkphp的模板继承语法基本相似，经过extend来进行继承，下面来看个例子：

// layout.jade
html
  head
    meta(charset="utf-8")
    title jade
    style.
            body{
                color: gray;
            }
    script.
                 var x = "123";
  body
    block item
        p a item in layout.jade
    block content
// item.jade
extends layout
block content
  block item
    p a item in item.jade
// 编译后咱们会发现的就是外面的那个item块被里面的这个item块给覆盖掉了

• include

经过include咱们能够将页面抽象出一个个小块，能够说造成一个组件化的方式，好比头部，尾部，搜索框等，这样利于咱们的维护咱们的页面。
对于include来讲我既能够引入.jade，也能够引入.html文件。

// 咱们的一个页面的一个骨架
doctype html
html
  head
    meta(charset="utf-8")
    title jade
  body
    include header
    block content
    include footer

jade与后台交互

首先咱们须要了解的就是jade的API，详情请见：http://jade-lang.com/api/
常常用的的API有就是jade.renderFile(filename, options)，filename是jade文件的一个路径，options是一些配置，如咱们的jade文件内变量名的值，pretty是否进行格式化等；这个函数的返回值为html字符串

与后台交互的一个demo：
https://github.com/zp1996/Hel...
clone下来直接node app.js就行不用npm install
本文参考：
慕课网—带你学习Jade引擎