模板引擎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/Hello-World-Follow/tree/master/learnjade
clone下来直接node app.js就行不用npm install
本文参考：
慕课网—带你学习Jade引擎