title: "Jade模板引擎学习笔记（一）"
date: 2016-04-10 20:19:41
tags:
jade是什么
最近学习NodeJS相关的知识，因此接触到了Jade、Ejs等模板。
其中Ejs模板的语法和原生html语法基本一致，不过无数的<%=xxx>使书写和阅读产生困难，稍有不慎缺少/>闭合的尖括号则会使寻找异常困难；而Jade则采用了tab缩进式的语法，去除了html中<>尖括号的描述，从而使模板编码和阅读更加简洁明了。
jade安装
首先确保安装了nodejs和npm包管理器，然后在命令行输入：
npm install jade -g
jade在命令行包含很多参数，可以通过jade -h获取帮助内容。
C:\Users\Administrator>jade -h
Usage: jade [options] [dir|file ...]
Options:
-h, --help output usage information
-V, --version output the version number
-O, --obj <str|path> JavaScript options object or JSON file containing it
-o, --out <dir> output the compiled html to <dir>
-p, --path <path> filename used to resolve includes
-P, --pretty compile pretty html output
-c, --client compile function for client-side runtime.js
-n, --name <str> The name of the compiled template (requires --client)
-D, --no-debug compile without debugging (smaller functions)
-w, --watch watch files for changes and automatically re-render
-E, --extension <ext> specify the output file extension
-H, --hierarchy keep directory hierarchy when a directory is specifie
d
--name-after-file Name the template after the last section of the file
path (requires --client and overriden by --name)
--doctype <str> Specify the doctype on the command line (useful if it
is not specified by the template)
Examples:
# translate jade the templates dir
$ jade templates
# create {foo,bar}.html
$ jade {foo,bar}.jade
# jade over stdio
$ jade < my.jade > my.html
# jade over stdio
$ echo 'h1 Jade!' | jade
# foo, bar dirs rendering to /tmp
$ jade foo bar --out /tmp
jade语法
基本语法
jade使用不含尖括号的html标签和tab缩进的层级关系来描述页面内容。
比如我们新建一个stu.jade文件，首先声明页面类型：
doctype html
通过jade stu.jade命令编译后，产生stu.html文件，编译后内容如下：
<!DOCTYPE html>
如果需要频繁的修改jade文件内容，而不想每次都用jade命令编译的话，我们可以使用jade - P-w stu.jade命令，监听stu.jade文件的变化，自动进行编译，-P参数表示编译结果不被压缩（是可读的）。
修改stu.jade的内容如下(注意层级之间的缩进关系)：
doctype html
html
head
meta(charset='utf-8')
title jade
body
div#content
h1 my first jade
p
|aaaa
|bbbb
|cccc
<a href="#">testtest</a>
|ddd
span#test ffffff
a(src='xxx.jpg') testsrc
script.
console.log('hello jade.')
console.log('welcome to jade.')
文件自动编译为：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jade</title>
</head>
<body>
<div id="content">
<h1>my first jade</h1>
</div>
<p>
aaaa
bbbb
cccc
<a href="#">testtest</a>
ddd<span id="test">ffffff</span><a src="xxx.jpg">testsrc</a>
</p>
<script>
console.log('hello jade.')
console.log('welcome to jade.')
</script>
</body>
</html>
可以看到，jade中不需要关注标签的闭合关系，只需要关注具体的标签、标签层级关系和内容即可。
上一个例子中，我们看到，可以通过标签+#id.css的方式增加此标签的id名和css样式名，这点与css和jQuery都是一致的；可以通过标签+(属性名=‘属性值’)来为标签设置属性，也可以在jade语法标签中嵌套html语法标签内容；而如果在标签中紧接着加一个.的话，其子层级内容，则完全使用html标签语法。
代码
Jade目前支持三种类型的可执行代码，第一种以-为前缀，不会被缓冲：
- for (var i = 0; i < 3; i++)
li hello jade!
输出如下：
<li>hello jade!</li>
<li>hello jade!</li>
<li>hello jade!</li>
接下来我们转义了缓冲代码，用于缓冲返回值，以等号（=）作为前缀：
p= 'Welcome to jade, we want <b>you</b>'
输出：
<p>Welcome to jade, we want <b>you</b></p>
可以看到，被’='缓冲的代码会默认经过转义以增强安全性，要输出为转义的值需要使用!=：
p!= 'Welcome to jade, we want <b>you</b>'
输出：
<p>Welcome to jade, we want <b>you</b></p>
使用变量
- var name = 'kelvin';
p my name is #{name}
输出：
<p>my name is kelvin</p>
如果定义的变量中包含特殊字符，则在使用时需要使用!来替换#来调用：
- var scr1 = '<script>console.log(\'hello jade.\');</script>';
|!{scr1}
输出：
<script>console.log('hello jade.');</script>
浙公网安备 33010602011771号