Jade —— 简洁的HTML模版引擎
Jade是一款基于haml的html模版引擎，采用JavaScript实现，可以方便地在Node.js、Yeoman等框架中使用。
文档
安装
在Node中安装Jade的方法如下：
npm install jade
在Yeoman中，安装及配置过程较为复杂，具体方法请参看Grunt 之 Jade自动化生成的实现(待写)。
静态语法
在本文中，将会介绍如何用简单的Jade模版语言来生成所需的HTML代码，可以极大减少代码量和提高可读性。
Jade同时具有很多的动态语言特性，本文中不详细涉及。
首先，我们来对比一下xml和json的特性，xml一个很大的缺点就是需要2倍的标签以及4倍的尖括号，虽然机器能够有效识别但十分不便于书写。另外，xml标签这样成对出现也同时增加了错误率，降低了可读性。所以现在越来越多的人用json而非传统的xml。
同样的，html和xml的语法非常相似，缺点也是非常相似，所以这里我们来介绍一种新的更为简洁清晰的模版语言 —— Jade。
第一步，我们来了解一下jade的基本静态语法部分。
对于一个经典的html代码如下：
<html lang="en">
<head>
<title>Jade</title>
</head>
<body>
<h1>Jade - node template engine</h1>
<div id="container" class="col class1 class2">
<p>You are amazing</p>
<p>
Jade is a terse and simple
templating language with a
strong focus on performance
and powerful features.
</p>
</div>
</body>
</html>
我们也可以用jade来写：
html(lang="en")
head
title= pageTitle
body
h1 Jade - node template engine
#container.col.class1.class2
p You are amazing
p.
Jade is a terse and simple
templating language with a
strong focus on performance
and powerful features.
通过上面的例子，相信大家都能很快了解Jade的语法模式，主要概括一下有以下几点：
- 标签名称不变，无需使用尖括号
< >围绕。 - 标签不具有嵌套性，使用缩进来表示嵌套关系，每级缩进相当于一层嵌套。
- 使用标签名称后
#someid来表示id属性，无需再使用属性名id＝‘someid’。 - 使用标签名称后
.someclass来表示class属性，多个class可连续使用。 - 对于带有id或class属性的
div标签，可以省略div不写。 - 对于其他属性，在标签名后使用括号
( )来围绕，与html的标签属性使用方式相同，也可用逗号分隔。 - 在标签名称和所有属性后使用一个空格来分隔其文本内容，即从每个标签名称开始第一个不在属性内的空格之后的内容都将识别为文本。
- 对于多行文本，在标签的所有属性之后使用单独的
.，其下级缩进的内容都将视为文本。
掌握上面的内容基本就已经可以用Jade来写代码了，不过接下来还是说一下其他的一些语法。
对于嵌套来说，除了使用上面的缩进方法外，如果是只有一个子元素，可以使用: 来实现嵌套。例如：
ul#books
li
a(href="#book-a") Book A
li
a(href="#book-b") Book B
该列表中，由于每个li下都只有一个a标签，故也可写作：
ul#books
li: a(href="#book-a") Book A
li: a(href="#book-b") Book B
注意：冒号后面一定要有一个空格！
对于多行文本，如果同时具有子元素的话，使用.会导致无法识别子元素，故需要使用另一种标识符|，例如：
ul#books
p
| foo bar
| hello world
p 这是子元素而非另一行文字
当然，这样的缺点就是对于多行文字的每一行都要有一个|。
过滤器
通过过滤器功能，可以在jade模版中快速套用其他语言，比如写作本文的markdown或者能够替代js的coffee script：
:markdown
# Markdown
+ line 1
+ line 2
> It's quote
I often like including markdown documents.
script
:coffee
console.log 'This is coffee script'
限于篇幅，这里就不对Markdown语言和Coffee Script做介绍了。
过滤器和单元素嵌套一样使用冒号，但是注意，过滤器的冒号后面没有空格！
动态特性
到上面为止，似乎Jade相对于haml都没有什么实质性改变，只是对于html的一种简化方式，使用很多编译器插件也可以实现类似的简化书写能力。而实际上，Jade远不仅仅是一种静态语言，它同时也能实现很多需要脚本语言才能实现的动态特性，比如赋值、循环、判断等等。
在任何一门动态语言中，变量是永远不可或缺的，这也是和标记性语言的根本区分标识。
在Jade中，使用和C系语言相似的方式进行赋值和运算：
foo = "hello"
tmp = "world" + "!"
h1= foo
span= tmp
对于上面的代码，可能很多人第一眼看到都会有一个疑问，Jade怎么知道等号左边是变量名还是标签呢？
再仔细看看，很快就会发现，又是传说中的空格在作祟，变量后面等号前必须加空格，而标签直接接等号，不能加空格！
其实Jade中还有另一种赋值语句，用的不是=而是!=。这里可能会有一些凌乱，!=不是条件语句中的不等于逻辑运算符么？在Jade中，!=确实是不等于的逻辑运算符。但是在对标签的赋值中，也就像上面的一样不加空格的赋值语句中，它表示另一种赋值理念：
name ＝ "Hello <em>World</em>"
li= name
li!= name
生成的html代码为：
<li>Hello <em>World</em></li>
<li>Hello <em>World</em></li>
从上面可以看出，使用=会直接赋予纯文本而非html代码，如果需要产生的值是直接html代码的话，需要使用!=来防止转换！
补充一点，除了在Jade文件中对变量赋值，Jade还支持在编译时对变量赋值的特性，区别在于变量从模版中分离，从而可以在动态赋予相应的内容。
接下来，我们来稍微接触一下Jade的流程控制语句：
books ＝ ["A", "B", "C"]
select
each book, i in books
option(value=i) Book #{book}
上面可以生成具有类似结构的多个option：
<select>
<option value="0">Book A</option>
<option value="1">Book B</option>
<option value="2">Book C</option>
</select>
除此之外，还有if-else,unless-else,case-when等条件控制语句，此处不做详述，如有需要可以访问官方文档。
就工程上来说，这些内容可能真的用不到或者不会用的。Jade的动态特性是根据条件动态的生成对应的HTML，而目前来说，因为JavaScript的存在，HTML本身就已经是动态的了，而且这些动态过程大多并不是在编译成HTML时能够确定的，而是在用户浏览HTML的过程中实时确定；相反，需要在Jade编译成HTML进行逻辑判断的东西，也都能直接通过JavaScript的动态特性来实现，特别是现在已经有了各种各样的JavaScript框架。
虽然Jade在设计上考虑了很多方面，不过对于我们开发人员来说最需要的可能还是其对HTML本身的语法简化部分，Jade的动态特性部分建议不要滥用。
本站地址： http://trotyl.github.io/
